PDA

View Full Version : Making a DIV fall below another?



Mechphisto
Mar 6th, 2012, 11:07 PM
Hi.
I've a page that looks just like I want, but now I need to make a pared-down mobile style sheet for it. And I need to get a DIV (1) that appears within a DIV wrapper before another DIV (2) to fall below it (DIV 2) -- and I just can't find a way to do it.
The best I can come up with is to use absolute positioning, but that's not a preferred solution!
Is there some combination of relative or float positionings I can use that I haven't hit on yet?

The normal page is:
http://www.girlscoutsmoheartland.org/pages/gs100th-expo.php
with the DIV I want to have fall being "leftnavexpo" seen as the left-side bar, needing it to fall below "content" which is the main section in the middle.

And here's what I can do with absolutes:
http://www.girlscoutsmoheartland.org/pages/gs100th-expo.php?mobtest=1
which is, as I said, not ideal.

Thanks for any suggestions!!
Liam

teedoff
Mar 7th, 2012, 01:27 AM
Divs are block level elements and unless styled(floated) will automatically render one under the other.

telekovar
Mar 7th, 2012, 05:04 AM
Divs are block level elements and unless styled(floated) will automatically render one under the other.

What he wants to do is take something that is on the left side of the screen (first in code), and render it below the object in the center of the screen (last in code).

Try to get the red block below the green block, using css only.



<html>
<head>
<style type="text/css">
#left {
display: block;
width: 250px;
height: 500px;
background: #ff0000;
}

#center {
display: block;
width: 450px;
height: 600px;
background: #00ff00;
}
</style>


<div id="left">
<p>&nbsp;</p>
</div>

<div id="center">
<p>&nbsp;</p>
</div>

</body>
</html>

teedoff
Mar 7th, 2012, 05:12 AM
What he wants to do is take something that is on the left side of the screen (first in code), and render it below the object in the center of the screen (last in code).

Try to get the red block below the green block, using css only.



<html>
<head>
<style type="text/css">
#left {
display: block;
width: 250px;
height: 500px;
background: #ff0000;
}

#center {
display: block;
width: 450px;
height: 600px;
background: #00ff00;
}
</style>


<div id="left">
<p>&nbsp;</p>
</div>

<div id="center">
<p>&nbsp;</p>
</div>

</body>
</html>


Yes I know that was what he wanted, which is why I hinted to the fact that he has floated elements therefore nonfloated elements would be under each other.

telekovar
Mar 7th, 2012, 05:35 AM
Yes I know that was what he wanted, which is why I hinted to the fact that he has floated elements therefore nonfloated elements would be under each other.

Yes, but in the wrong order. That's what makes this a little more complex.

telekovar
Mar 7th, 2012, 06:09 AM
Sorry about double posting... firstly.
Secondly, this is a quirk. It does NOT work in IE 5.x, but does work in IE6, 7, FF, Opera, Safari and Chrome. It is standards compliant, and functions the way the specifications say it should..

The concept:


<html>
<head>
<style type="text/css">
#wrapper{
background: #0000ff;
position: relative;
}
#left {
width: 250px;
height: 500px;
background: #ff0000;
position: absolute;
top: 100%;
}

#center {
width: 450px;
height: 600px;
background: #00ff00;
}

</style>

<div id="wrapper">
<div id="left" class="reorder">
<p>&nbsp;</p>
</div>

<div id="center" class="reorder">
<p>&nbsp;</p>
</div>
</div>

</body>
</html>


Your code:


<style type="text/css">
#container{
position: relative;
}

#leftnavexpo {
display: block;
position: absolute;
top: 100%;
}

#content {
display: block;
}
</style>