<div> positioning

[GiffordS]

I'm having a bit of a <div> issue. Essentially, I have a parent division and two child divisions. The parent division spans the width of the page, the two children split the page vertically. The length of the two children is set to auto because they are filled dynamically, and one will usually be longer than the other, but there is no way to know which will be longer, or how long, etc. This works just fine. My issue arises when I want to add another division below these that once again spans the width of the page. I have tried this as both a third child of the parent, and as a separate division outside of the parent, neither works. The problem is in positioning this new division below the longest of the two child divisions. I've tried using top:auto in the style attribute for the new division, but I get nowhere. I will post the <div> tags for all divisions but will leave out the content as it is not germaine and would take up a huge chunk of space.


<div id="back" style="position:relative; z-index:1">This is the parent division and holds the background image upon which the other divisions are displayed.

<div id="left" style="position:absolute; left:0px; top:320px; width:450px; height:auto; z-index:3">This is the left side division</div>

<div id="right" style="position:absolute; left:500px; top:320px; width:450px; height:auto; z-index:3">And this is the right side division</div>

<div id="subm" style="position:absolute; left:300px; top:auto; width:300px; height:auto; z-index:3">This is the bottom division that is causing the issue. As you can see, I tried setting the top to auto because I have absolutely no way of knowing how long the child divisions will be. Right now the result is that this division is rendered below the main background image and atop the left and right divisions. When I try to move this division outside of the parent it didn't change a thing.</div>

Any thoughts on how to render this division below the longest of the side divisions? Again, it's dynamic content that changes minute by minute, so there is just no way to put a real number in that top attribute. I've also tried removing this code from a division entirely, but the result is still the same.

 

[ChrisHirst]

you are using absolute positioning, this takes the elements out of the document flow so are unaffected by other elements in the document and where you place them is where they will stay.

use all relative positioning, float:left the two divs that are side by side and clear:left the footer




Chris.

Indifference will be the downfall of mankind, but who cares?
Woo Hoo! the cobblers kids get new shoes.
People Counting Systems

So long, and thanks for all the fish.

 

[GiffordS]

Actually, that's not really an option. I mentioned the background image, and the left and right divisions need to start at an exact point relative to that image. Making those divisions relative makes a hash of everything on the page. I did try clear:left for the footer division, but that had absolutely no impact whatsoever. It still throws it right in the middle of the page. I even tried creating a table with left/right divisions in one row and the footer division in a lower row. For some reason that did not work. I have to admit that I'm a little thrown by that. My assumption was that the height of a given row in the table would expand to fit the content, in this case the longest of the two divisions. From there, the next row should be rendered lower. I took the content of the footer division out of a division entirely and tried to put it in the lower row. No change. Any other thoughts?

 

[Foamcow]

Can you post your full code?
To my mind something like clear:both; should work perfectly.
So I'm guessing there is something that I'm not getting from your description of the problem (or indeed my interpretation of it!).

Foamcow Heavy Industries - Web design and ranting
Toccoa Games - Day of Defeat gaming community
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
"I'm making time

 

[Vragabond]

What you say and looking at your code using absolute positioning is all possible via relative positioning and floats. Like Foamcow said, post your code or even better, give us a link to the live site. Like Chris mentioned in his post, this is (and is usually best if it is) achieved by floats and should work if code is correct.

 

[GiffordS]

You will have to excuses the slashing. The page is served via php. I took out the content, which is meaningless and mostly a bunch of db queries that generate the conent.


<body background=\"ooo.jpg\">
<center><p><br><p>
<div id=\"back\" style=\"position:relative; z-index:1\">
<img src=\"orderlistback.jpg\" border=\"0\" height=\"600\" width=\"800\"></img>

<div id=\"chs\" style=\"position:absolute; left:260px; top:51px; width:97px; height:31px; z-index:3\">
<a href=\"chs.htm\" onmouseover=\"ch.src='chtile2.jpg'\" onmouseout=\"ch.src='chtile.jpg'\">
<img name=\"ch\" src=\"chtile.jpg\" width=\"96\" height=\"30\" border=\"0\"></img></a></div>

<div id=\"crs\" style=\"position:absolute; left:357px; top:51px; width:97px; height:31px; z-index:3\">
<a href=\"crs.htm\" onmouseover=\"cr.src='crtile2.jpg'\" onmouseout=\"cr.src='crtile.jpg'\">
<img name=\"cr\" src=\"crtile.jpg\" width=\"96\" height=\"30\" border=\"0\"></img></a></div>

<div id=\"hrs\" style=\"position:absolute; left:454px; top:51px; width:97px; height:31px; z-index:3\">
<a href=\"hrs.htm\" onmouseover=\"hr.src='htile2.jpg'\" onmouseout=\"hr.src='htile.jpg'\">
<img name=\"hr\" src=\"htile.jpg\" width=\"96\" height=\"30\" border=\"0\"></img></a></div>

<div id=\"order\" style=\"position:absolute; left:551px; top:51px; width:97px; height:31px; z-index:3\">
<a href=\"order.htm\" onmouseover=\"order.src='otile2.jpg'\" onmouseout=\"order.src='otile.jpg'\">
<img name=\"order\" src=\"otile.jpg\" width=\"96\" height=\"30\" border=\"0\"></img></a></div>

<div id=\"information\" style=\"position:absolute; left:648px; top:51px; width:97px; height:31px; z-index:3\">
<a href=\"info.htm\" onmouseover=\"info.src='itile2.jpg'\" onmouseout=\"info.src='itile.jpg'\">
<img name=\"info\" src=\"itile.jpg\" width=\"96\" height=\"30\" border=\"0\"></img></a></div>

<div id=\"2x2\" style=\"position:absolute; left:0px; top:320px; width:450px; height:auto; z-index:3\">This is the left side division</div>

<div id=\"oz\" style=\"position:absolute; left:500px; top:320px; width:450px; height:auto; z-index:3\">This is the right side division</div>

<div id=\"subm\" style=\"position:relative; clear:both; z-index:3\">This is the bottom division in question. No matter what I do it always renders about halfway down the two side divisions. </div></div><p><br><p></center></body></html>";?>

 

[Vragabond]

This gives the result you're looking for:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]

<style type="text/css">
body {
	background: red url(ooo.jpg);
}

#main {
	position: relative;
	background: blue url(orderlistback.jpg) top left no-repeat;
	margin: 0 auto;
	width: 800px;
	height: 600px;
}

#menu {
        position: relative;
	top: 51px;
	margin-left: 260px;
	padding: 0;
	height: 31px;
	background: purple;
}

#menu li {
	display: inline;
}

#sectionOne {
	margin-top: 238px;
	width: 400px; /* changed from 450px since 2x450px cannot fit 800px */
	float: left;
	background: yellow;
}

#sectionTwo {
	margin-top: 238px;
	width: 400px; /* changed from 450px since 2x450px cannot fit 800px */
	float: left;
	background: gray;
}

#footer {
	clear: both;
}

</style>

<body>
  <div id="main">
    <ul id="menu">
      <li><a href="chs.htm" onmouseover="ch.src='chtile2.jpg'" onmouseout="ch.src='chtile.jpg'"><img name="ch" src="chtile.jpg" width="96" height="30" border="0"></img></a></li>
      <li><a href="crs.htm" onmouseover="cr.src='crtile2.jpg'" onmouseout="cr.src='crtile.jpg'"><img name="cr" src="crtile.jpg" width="96" height="30" border="0"></img></a></li>
      <li><a href="hrs.htm" onmouseover="hr.src='htile2.jpg'" onmouseout="hr.src='htile.jpg'"><img name="hr" src="htile.jpg" width="96" height="30" border="0"></img></a></li>
      <li><a href="order.htm" onmouseover="order.src='otile2.jpg'" onmouseout="order.src='otile.jpg'"><img name="order" src="otile.jpg" width="96" height="30" border="0"></img></a></li>
      <li><a href="info.htm" onmouseover="info.src='itile2.jpg'" onmouseout="info.src='itile.jpg'"><img name="info" src="itile.jpg" width="96" height="30" border="0"></img></a></li>
    </ul>
    <div id="sectionOne">This is the left side division</div>
    <div id="sectionTwo">This is the right side division<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>
    <div id="footer">This is the bottom division in question. No matter what I do it always renders about halfway down the two side divisions. </div>
  </div>
</body>

Please study the code. Also, you can remove most all of the background colors, they were just there for my help to orient since I had no pics to work with.