Forum Moderators: not2easy
I have a two col layout in a 90% width container.
The rightcol has a fixed width and the leftcol has fluid width. The rightcol is positionned on the right by a float:right and the leftcol has a right margin of rightcol width + 5px
When I add 'float'ing elements inside the leftcol the layout gets messed up in IE because (I think) the left div doesn't have a width set in css. The text above the floating divs also disapears (!) but when double clicked on where it's supposed to be, it re-appears.
If I give the leftcol a width in %ages all is well - but that's not possible as I want it fluid.
Any ideas how to get round this.
CSS
#container{width:90%;}
#right{
float:right;
padding:0;
margin:0;
width:355px;
}
#left{
padding: 0;
margin:0 360px 0 0;
}
.box{
padding:5px;
margin:0 0 5px 0;
background-color:#69c;
}
.col{
width:48%;
float:left;
padding:0;
margin: 0 1%;
}
HTML
<div id="container">
<div id="right">
<div class="box">text</div>
</div><!-- end right-->
<div id="left">
<div class="box">text</div>
<div class="box">
<div class="col"><ul><li><a href="#">text</a></li></ul></div>
<div class="col"><ul><li><a href="#">text</a></li></ul></div>
<div class="col"><ul><li><a href="#">text</a></li></ul></div>
<div class="col"><ul><li><a href="#">text</a></li></ul></div>
</div><!-- end box -->
</div><!-- end left-->
</div><!-- end container-->
Thanks for having a look - as explained I think the pb comes from not having a width in the #left style.
I played with it, and th eonly thing I saw that was weird was you had nothing to clear your floats. Here's what I came up with:
[code]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<style type="text/css">
* {
margin:0;
padding:0;
border:0;
}
#container{
width:90%;
margin:0 250px 50px 10px;
padding:10px;
background-color:pink;
}
#right{
position:relative;
float:right;
width:355px;
background-color:#CCC;
}
#left{
background-color:#EEE;
margin-right:360px;
}
.box{
padding:5px;
margin:0 0 5px 0;
background-color:#69c;
}
.col{
width:48%;
float:left;
padding:0;
margin: 0 1%;
background-color:yellow;
}
hr {
clear:both;
visibility:hidden;
}
</style>
</head>
<body>
<div id="container">
<div id="right">
<div class="box">top right box</div>
</div><!-- end right-->
<div id="left">
<div class="box">top left box</div>
<div class="box">
<div class="col"><ul><li><a href="#">text</a></li></ul></div>
<div class="col"><ul><li><a href="#">text</a></li></ul></div>
<div class="col"><ul><li><a href="#">text</a></li></ul></div>
<div class="col"><ul><li><a href="#">text</a></li></ul></div>
</div><!-- end box -->
</div><!-- end left-->
<hr />
</div><!-- end container-->
</body>
</html>
Not sure if this was what you were after - let me know!
thanks for that.
If you look at the site in IE6 and play with the screen width, the .col are going across the whole page instead of staying within the .box div.
In your solution it does this as well. (more orderly but still does it).
In 800x600 my original code also create a side scrolling which I don't understand.
here is what I ended up with.
strangely enough the text in the left col disapears on ie if I don't add the {width:100%} to it!?!?!?!?!?
<html>
<head>
<style>
#container{width:90%;}
#right{
float:right;
padding:0;
margin:0;
width:355px;
}
#left{
padding: 0;
margin:0 360px 0 0;
width:auto;
voice-family: "\"}\""; voice-family:inherit;
width:100%;
} #container>#left {width:auto;}
.box{
padding:5px;
margin:0 0 5px 0;
background-color:#69c;
}
#col1,#col2{
float:left;
margin:0;
width:49%;
}
#col1{
padding: 0;
}
#col2{
padding: 0;
}
h2,p{width:100%;} /* keep otherwise text dispears in IE */
h2,p,ul,li{
padding:0;
margin:0;
list-style:none;
}
</style>
</head>
<body>
<div id="container">
<div id="right">
<div class="box"><h2>title box h2</h2><p>some text below</p></div>
<div class="box"><h2>title box h2</h2><p>some text below</p><p>some text below</p><p>some text below</p><p>some text below</p></div>
</div><!-- end right-->
<div id="left">
<div class="box">text</div>
<div class="box"><h2>some title here for the h2</h2><p>some text here for the para to see if it disapears as well</p>
<div id="col1">
<ul>
<li><a href="#">some title here for the link</a></li>
</ul>
<ul>
<li><a href="#">some title here for the link(and a bit more)</a></li>
</ul>
</div>
<div id="col2">
<ul>
<li><a href="#">some title here for the link(and more)</a></li>
</ul>
<ul>
<li><a href="#">some title here for the h2(and still some stuff added)</a></li>
</ul>
</div>
<p style="clear:both;">for a complete list of all the li, visit our li page</p>
</div><!-- end box -->
</div><!-- end left-->
</div><!-- end container-->
</body>
</html>
Any one care to shed some lights:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style>
#container{
clear:both;
width:90%;
margin:auto;
}
/* RIGHT COLUMN */
#right{
float:right;
padding:0;
margin:0;
width:355px;
background-color:red;
}
/* LEFT COLUMN */
#left{
padding: 0;
margin:0 360px 0 0;
width:auto;
voice-family: "\"}\""; voice-family:inherit;
width:100%;
background-color:yellow;
} #container>#left {width:auto;}
</style>
</head>
<body>
<div id="container">
<div id="right"></div><!-- end right-->
<div id="left"></div><!-- end left-->
</div><!-- end container-->
</body>
</html>
#left{
padding: 0;
margin:0 360px 0 0;
width:auto;
voice-family: "\"}\""; voice-family:inherit;
} #container>#left {width:auto;}(Note the removal of the 100% width) it looks the same on Firefox and IE 6...
unfortunatelly with the addition of doctype the left box content is 'pushed' down.
No worries - I'LL GET TO THE BOTTOM OF IT.
