Forum Moderators: not2easy
Summary:
Two column layout. Centered in browser using #container. #header is next in source, is full width of #container. Next is #content-ctr, not full width but sucked in from either side (i.e. header is wider then everything below it). Next is #colmaker, a div I just put a repeat-y image in to make my sidebar expand in height to fill the height of my #content area. Last is #footer. which is as wide as #content-ctr. There should be a space between #sidebar and #content of 12px and I am currently using margin-left on #content to do this.
Behavior: With all css in place, a ul placeholder in #sidebar and the float on #side bar everything is visible in both ff and IE6 except that #content is not-overlapping sidebar in IE (a few px off the right edge of sidebar) and in FF (is positioned 12px off the left edge of sidebar but it's text (for the first 5 lines) starts outside the right edge of sidebar, but then starts overlapping after a few lines of text)
When I add float:left;display:inline; to #content it positions correctly to the right of #sidebar in FF but both #sidebar and #content vanish into a blank red field (my reference background-color for testing on #content-ctr). I have tested maybe that my widths are too wide but even with #sidebar and #content at 200px they don't sit side by side (but vanish) when both are floated left
Here is my css and layout.
body{margin-top:0;text-align:center;font-size:76%;font-family:verdana,arial,sans-serif;color:#000;background:#008de7 url(../images/layout/body-bg.gif) repeat-x top left;}
a{color:#000;text-decoration:none;}
a:hover{color:#333;text-decoration:underline;}
div{position:relative;}
p{padding:0;margin:0;}
form{padding:0;margin:0;}
ul{margin:0;}
/* Main Layout */
/*-------------------------------*/
/*comments refer to selector below it*/
/*to center in window */
#container{width:868px;margin:auto;}
/*is full width, has bg-image of full width and contains div with form which is positioned absolutely relative to header*/
#header{background:url(../images/layout/header-bg.gif) no-repeat top left;height:132px;margin-bottom:0;text-align:left;}
/* to suck-in (widthwise) all content below the header */
#content-ctr{margin-left:57px;margin-right:48px;width:763px;text-align:left;background:red;}
/* to create full length sidebar */
#colmaker{background:url(../images/layout/colmaker-bg.gif) repeat-y left;}
/*on the left side of the content-ctr*/
#sidebar{float:left;display:inline;width:159px;border-top:#000 1px solid;border-left:#000 1px solid;border-right:#000 1px solid;}
/*on the right side of the content-ctr with 12 px between it and sidebar*/
#content{width:588px;margin-left:12px;border-top:#000 1px solid;border-left:#000 1px solid;border-right:#000 1px solid;}
/*Makes both #sidebar and #content vanish in IE
#content{float:left;display:inline;width:588px;margin-left:12px;border-top:#000 1px solid;border-left:#000 1px solid;border-right:#000 1px solid;}
*/
/*below sidebar and content and as wide as content-ctr*/
#footer{text-align:center;border:#000 1px solid;background-color:#99cc33;width:761px;height:37px;margin-top:9px;padding-top:15px;}
/*Utility Classes*/
/*-------------------------------------*/
.clear{height:1px;line-height:1px;font-size:1px;clear:both;}
<body>
<div id="container">
<div id="header">
<div class="clear"> </div>
</div>
<div id="content-ctr">
<div id="colmaker">
<div id="sidebar">
<ul id="sidenav">
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi justo odio, commodo et, aliquet quis, tristique sed, diam. Donec id sem id pede laoreet ornare. Vestibulum dapibus. Quisque tellus.</p>
</div>
<div class="clear"> </div>
<!--<div id="col-cap-bottom"> </div>!-->
</div>
<div id="footer">
</div>
</div>
</div>
</body>
my div #colmaker in which the two columns sit and which has the repeat-y background so that the sidebar will always look as tall as the main content area is the culprit.
If I remove it and just float the two divs left they appear in both FF and IE but the sidebar doesnt look like it stays as tall as the main #content div.
I'll have to look at other methods of full sized column apearance.
Well heres the solution. After a night's rest
In IE (and im just saying this because that's where I saw this)
A div must have a width to contain floats. once I applied a width to #colmaker its child divs popped into existence.
All my best.
E
