...

View Full Version : Why aren't main and sidebar contained in content?



stavrogin
05-13-2007, 11:10 PM
Could anyone please help me figure out why my main and sidebar containers aren't contained in my content container? The result of this problem is that the content background color doesn't appear properly in firefox. It works fine in IE but I have noticed that Dreamweaver's design view doesn't seem to place the two element inside "content." The site in question is aleph.dk.

The relevant bit of css should be as follows:
#content {
width:660px;
margin:0 auto;
padding:10px;
text-align:left;
background-color:#333333;
}
#main {
width:410px;
float:left;
}
#sidebar {
width:220px;
float:right;
}

And an example of the corresponding html-code is:
<!-- Begin #content -->
<div id="content">
<!-- Begin #main -->
<div id="main">
<p style="padding-top: 15px"><img src="images/produce.jpg" /></p>
</div>
<!-- End #main -->
<!-- Begin #sidebar -->
<div id="sidebar"><div id="sidebar2">
<!-- Begin #navi-container -->
<div id='navi-container'>
<h2 class='sidebar-title'><a href="index.html">aleph.dk</a></h2>
<li class='navi-link'><a href="irrelevans.html">Fakultet for Komparativ
Irrelevans</a></li>
<li class='navi-link'><a href="sprogbrug.html">Fakultet
for Afvigende Sprogbrug</a></li>
<li class='navi-link'><a href="fragmentum.htm">Fragmentum</a></li>
<li class='navi-link'><a href="http://www.aleph.dk/wordpress">Polemos</a></li>
<li class='navi-link'><a href="http://aleph.dk/blogs/blogger.html">Le Blog</a></li>
<li class='navi-link'><a href="audio.htm">Audio</a></li>
<li class='navi-link'><a href="video.htm">Video</a></li>
<li class='navi-link'><a href="foto.htm">Foto</a></li>
<li class='navi-link'><a href="links.htm">Links</a></li>
</div>
<!-- End #navi -->
<a href="mailto:aleph@aleph.dk"><img src="images/mail.jpg" /></a>
</ul>

</div></div>
<!-- End #sidebar -->

</div>
<!-- End #content -->

I know there is a loose </ul> tag in there but it gives me a border which I haven't defined otherwise just yet.

Any hints as how to solve this problem would be greatly appreciated!

Best regards
Stavrogin

_Aerospace_Eng_
05-13-2007, 11:12 PM
http://www.positioniseverything.net/easyclearing.html

koyama
05-13-2007, 11:31 PM
Alternatively, you could use overflow: hidden (http://www.quirksmode.org/css/clearing.html)


#content {
overflow: hidden;
}

stavrogin
05-13-2007, 11:32 PM
Thank you very much for the link, I see the problem now. But I am a bit at a loss as to where to place the clearfix definition. I have tried under #content, #main and #sidebar but this doesn't seem to work.

Placement hints?

Thanks again

stavrogin
05-13-2007, 11:46 PM
The owerflow:hidden bit did the trick, thanks! Quite a relief! I am still curious as to the placement of the clearfix though (just for my education). But thanks again guys!

koyama
05-13-2007, 11:57 PM
But I am a bit at a loss as to where to place the clearfix definition. I have tried under #content, #main and #sidebar but this doesn't seem to work.
It should be quite straightforward:


.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */



<div id="content" class="clearfix">
[...]
</div>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum