Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Div collapsing

  • This topic is empty.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #31549
    Arvid
    Member

    I have a sidebar within the content div, and for some reason the Content div doesn’t go all the way that the inside sidebar does, the sidebar stretches out of the box. Is there any way to fix this?

    /* RESET */

    * { margin: 0px; padding: 0px; }


    /*Structure & colour */

    body
    {
    background: #666;
    }
    .wrapper
    {
    width: 800px;
    margin: auto;
    background: #333;
    }
    .slideshow
    {
    width: 198px;
    height: 200px;
    float: left;
    margin: 20px 25px 50px 50px;
    background: #FFF;
    -moz-border-radius: 14px;
    -webkit-border-radius: 14px;
    border: 1px solid #000;
    text-align:center;
    }
    .header
    {
    width: 418px;
    float: left;
    margin: 20px 50px 50px 25px;
    background: #FFF;
    height: 200px;
    text-align: center;
    -moz-border-radius: 14px;
    -webkit-border-radius: 14px;
    border: 1px solid black;
    }
    .content
    {
    width: 650px;
    margin: 0px 0px 100px 50px;
    background: #FFF;
    clear: both;
    -moz-border-radius: 14px;
    -webkit-border-radius: 14px;
    padding: 10px;
    }
    .sidebar
    {
    width: 200px;
    float: left;
    margin: 20px 30px 200px 30px;
    background: #fff;
    padding-bottom: 200px;
    }
    .footer
    {
    background: #000;
    color: #FFF;
    text-align: center;
    clear: both;
    }
    #62191
    Keyamoon
    Member

    You didn’t post your html so I’m not sure why that clear: both on your footer is not doing the trick.

    Still, you might want to try adding overflow: hidden; to your wrapper.

    #62169
    Arvid
    Member

    Overflow hidden didn’t work. Worth mentioning is that with enough text it actually works.





    Analytikerna










    Psykoanalytikerna


    Prat om vad ni gör







    Startsida - Analytikerna


    Tralalalala








    #62128
    Keyamoon
    Member

    Your clearing should happen after and next to the floated box. your content doesn’t have any float properties and so your footer is not clearing anything. As a quick fix, you might want to add a float: left to your container. Or, you may want to add a clear class to your css and then add this after your sidebar:


    However, you better use a grid system. This whole layout you are using right now is a total mess if i want to be honest with you.

    #62072
    Arvid
    Member

    Thank you for the honest feedback. Please also tell me what about the code is messy so that I can learn and know better when I design a website again.

    #62062
    Keyamoon
    Member

    Basically, you should use a grid system. My favorite is the one that comes with oocss. It will help you make any flexible layout very easily.

    #62036
    Arvid
    Member

    Why should I use a grid system? I’m sorry if that question seems stupid, I’ve never heard of gridsystems before. Are there any arguments against using it?

    #62038
    Keyamoon
    Member

    There are lots of benefits in using a grid system. I’d rather leave you with google.com and this video below =) http://developer.yahoo.com/blogs/ydn/posts/2009/03/website_and_webapp_performance/

    glhf

    #62044
    TheDoc
    Member

    Just to throw another opinion in here, I don’t use grid systems nor will I any time in the near future. I have my own snippets and things that I use to save time, but any time I’ve ever attempted a grid system in the past I just end up changing everything that’s in it anyways.

    #61954
    SAiNT
    Participant

    hey Arvid, check this out:
    https://css-tricks.com/forums/discussion/10722/clearing-floats-%3A-br-clear-all-…-%3A/#Item_6

    also, there are many articles on the site on this subject.. Search “clearing floats”.

    #61890
    Arvid
    Member

    Wow, thanks a lot. You have really helped me, both your ways seem to work. I’ll probably don’t use a grid system for something this simple though. Thanks a lot everyone!

    #61881
    Arvid
    Member

    Edited…

Viewing 12 posts - 1 through 12 (of 12 total)
  • The forum ‘CSS’ is closed to new topics and replies.