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

05-14-2007, 12:10 AM
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 {
margin:0 auto;
#main {
#sidebar {

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>
<!-- 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
<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>
<!-- End #navi -->
<a href="mailto:aleph@aleph.dk"><img src="images/mail.jpg" /></a>

<!-- End #sidebar -->

<!-- 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

05-14-2007, 12:12 AM

05-14-2007, 12:31 AM
Alternatively, you could use overflow: hidden (http://www.quirksmode.org/css/clearing.html)

#content {
overflow: hidden;

05-14-2007, 12:32 AM
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

05-14-2007, 12:46 AM
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!

05-14-2007, 12:57 AM
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">