Nested div/css issue (Mambo)

ltparis posted this at 14:55 — 8th September 2005.

Joined: Jul 2001

Reference php page: http://ltparis.com/index.php

So I have this issue with dynamically adjusted heights with mambo, div tags and css. Right now I have a div layout illustrated by this graphic:

The problem I have is with the "main-content-wrap" div tag not extending the height of the content that Mambo generates. Below is the code that I have for the body wrap, content wrap, and child divs of content wrap. Because the two other div wrappers have fixed heights, there is no problem with rendering, just below.

Interesting note, IE makes a half attempt to render and because of the padding in my css, it falls short, Firefox and Opera stops below the image.

#body-wrap {width: 770px;
height: 100%;
padding: 20px;
margin-left: auto;
margin-right: auto;}

#main-content-wrap {position: relative;
width: 770px;
height: 100%;
top: +35px;
position: relative;}

#pane-left {float: left;
width: 345px;
height: auto;
position: relative;}

#pane-middle {float: left;
width: 210px;
height: auto;
margin-left: +15px;
position: relative;}

#pane-right {float: left;
width: 185px;
height: auto;
margin-left: +15px;
position: relative;}

Lou Paris Jr

bja888 (not verified) posted this at 16:32 — 8th September 2005.

They have: 5,633 posts

Joined: Jan 1970

Quote:
#main-content-wrap {position: relative; width: 770px; height: 100%; top: +35px; position: relative;}
'

Well I could be wrong but this is what I know about CSS.
- You only need one "position: relative;".
- Height and Width don’t work with relative positioning
- With relative positioning CSS doesn’t need a positive indicator "+"

Relative positioning works as fallows....
You have a layer on a page that is 500 pixels wide because you have text in it that stretches that far. you can move it in any direction from where it is originally posted. The browser still thinks that block of text is still in its original spot but is displayed somewhere else.

ltparis posted this at 16:40 — 8th September 2005.

He has: 10 posts

Joined: Jul 2001

I cleaned up the code to remove the extra relative position in the content wrapper, + tags, and removed the relative position tags in the subsequent child div tags. That being said still researching into some solution.

Resolution
By putting in a .class of "clear: both;" and a br in each child everything works super smooth:

<div id="body-wrap">

	<div id="top-wrap">
		<div id="logo"></div>
		<div id="image-menu"></div>
                <br class="clear" />
	</div>
	
	<div id="top-image"><br class="clear" /></div>
	
	<div id="main-content-wrap">
		<div id="pane-left"></div>
		<div id="pane-middle"></div>
		<div id="pane-right"></div>
                <br class="clear" />
	</div>
	
</div>

Lou Paris Jr