PDA

View Full Version : Is there no solution???



jthierry
Oct 7th, 2009, 03:45 PM
I need some help with my layout, been pulling my hair out for days!:eek:

This problem does not happen in IE6 or IE7. Problem in all other browsers (IE8, FF, Safari)

The problem is that the #content DIV inherits the height of the tallest "side" DIV (only if the side is taller).

If the two inner DIVs are not floated the problem goes away. I need to have these DIVs (Left_Inside & Right_Inside) to be side by side.

Also if the CLEARFLOAT DIV is removed the #content DIV no longer encloses my 2 inside boxes.

Any help?



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>

<title>Jays CSS Layout V.1</title>

<style type="text/css">

*{padding:0;margin:0;border:none;}

html {
width:100%;
height:100%;
}

body {
margin:0;
padding:0;
width:100%;
height:100%;
font-family:arial;
font-size:100%;
}

#container {
position:relative;
margin:0 auto;
width:100%; min-width:900px;
height:auto !important;
height:100%;
min-height:100%;
background:lightyellow;
font-size:.8em;
}

#header {
height:90px;
background:#cccccc;
}

#page_body {
padding-bottom:40px;
}

#navigation {
width:220px;
padding:10px;
float:right;
display:block;
padding-bottom:40px;
background:lime;
}

#sidebar {
width:220px;
padding:10px;
float:left;
display:block;
padding-bottom:40px;
background:red;
}

#content_container {
width:auto;
margin-left:240px;
margin-right:240px;
padding:14px;
}

#content {
width:98%;
margin-left: auto;
margin-right: auto;
background: pink;
border:solid black 1px;
color:green;
}

.left_inside {width:40%;border:solid red 1px;background:aqua;float:left;margin:8px;padding:4px;}

.right_inside {width:40%;border:solid red 1px;background:yellow;float:left;margin:8px;padding:4px;}

#footer {
position:absolute;
width:100%;
height:40px;
bottom:0;
display:block;
background:#cccccc;
}

.clearfloat {clear:both;}

</style>

</head>

<body>

<div id="container">

<div id="header">Header</div>

<div id="page_body">

<div id="navigation">Navigation<br><br> Aliquam venenatis, massa ut elementum condimentum, dui augue ornare lacus, eget cursus libero lorem ut lacus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eget cursus libero lorem ut lacus. Nunc sit amet pharetra nunc.Aliquam venenatis, massa ut elementum condimentum, dui augue ornare lacus, eget cursus libero lorem ut lacus.Lorem ipsum dolor sit amet, consectetur adipiscing e</div>

<div id="sidebar">Optional Sidebar<br><br> Aliquam venenatis, massa ut elementum condimentum, dui augue ornare liquam venenatis, massa ut elementum condimentum, dui augue ornare liquam venenatis, massa ut elementum condimentum, dui augue ornare lacus, eget cursus libero lorem ut lacus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eget cursus libero lorem ut lacus. Nunc sit amet pharetra nunc.Aliquam venenatis,lacus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eget cursus libero lorem ut lacus. Nunc sit amet pharetra nunc.Aliquam venenatis, massa ut elementum condimentum, dui augue ornare lacus, eget cursus libero lorem ut lacus.Lorem ipsum dolor sit amet, consectetur adipiscing e </div>

<div id="content_container">

<div id="content">

<div class="left_inside" style="">Left Inside<br><br> Need the PINK box to enclose the aqua and yellow boxes without having the same height as the red box or the green box (PINK box takes on the hieght of tallest element right now).</div>

<div class="right_inside" style="">Right Inside<br><br> If the next div (clearfloat) is removed the PINK box loses all height</div>

<div class="clearfloat"></div>

</div><!-- END content -->

</div><!-- END conttent_container -->

</div><!-- END body -->

<div class="clearfloat"></div>

<div id="footer">Footer</div><!-- END footer -->

</div><!-- END container -->

</body>

</html>

abduraooft
Oct 7th, 2009, 03:55 PM
Try
#content {/*index.htm (line 71)*/
background:pink none repeat scroll 0;
border:1px solid black;
color:green;
float:left;
margin-left:auto;
margin-right:auto;
width:98%;
}
http://www.codingforums.com/showpost.php?p=766405&postcount=3&highlight=block%20formatting%20context might help you.

jthierry
Oct 7th, 2009, 04:08 PM
How did I continue to miss that? Anyway thanks much!