Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    May 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Why aren't main and sidebar contained in content?

    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

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Alternatively, you could use overflow: hidden
    Code:
    #content {
      overflow: hidden;
    }

  • #4
    New to the CF scene
    Join Date
    May 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #5
    New to the CF scene
    Join Date
    May 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!

  • #6
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by stavrogin View Post
    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:
    Code:
    .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 */
    Code:
    <div id="content" class="clearfix">
      [...]
    </div>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •