Forums

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

Home Forums CSS My battle with 2 column layout

  • This topic is empty.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #38397
    Derper
    Member

    Hi guys!
    All I need it is 2 column layout with fixed-width left column (sidebar) and right column (content) have all the remaining space.
    They must be 100% height if the text on the page a little, but stretch down (and be the same height) if the text a lot.

    I can’t understand how to achieve what I need. In one case, the columns have different heights in other case they don’t stretch down.

    At this moment I have this: http://i.imgur.com/J9Gt5.png
    It looks how I want if there is small amount of content… but if I add more content everything starts to go bad: http://i.imgur.com/KTSJi.png

    It is very important that they have always occupied 100% of the screen because columns have different monochrome background.

    If anyone know how to fix it please help me. Thanks.

    Here is my HTML:






    Lorem Ipsum












    Lorem Ipsum


    Lorem Ipsum







    • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    • Aliquam tincidunt mauris eu risus.

    • Vestibulum auctor dapibus neque.




    • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    • Aliquam tincidunt mauris eu risus.

    • Vestibulum auctor dapibus neque.




    • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    • Aliquam tincidunt mauris eu risus.

    • Vestibulum auctor dapibus neque.











    And my CSS:


    html, body{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #FF8700;
    }

    .container {
    height: 100%;
    }

    .content {
    height: 100%;
    float: left;
    width: 500px;
    background-color: #FF8700;
    }

    .nav {
    height: 100%;
    background-color: #FFBD73;
    float: left;
    width: 250px;
    }

    .name {
    padding-left: 180px;
    padding-top: 40px;
    }

    .name h1 {
    color: #FFFFFF;
    font-size: 36pt;
    font-weight: bold;
    }
    #104023
    Paulie_D
    Member

    You have an extra closing div in there but that’s not really an issue.

    Try changing the background color of your body to the same as your nav and add ‘overflow:hidden’ to your ‘content’ div.

    That should get you part of the way: http://jsfiddle.net/Paulie_D/BkCx5/

    #104027
    Derper
    Member

    Thanks for your reply, it’s partially solved my problem. But if I add a really long content ‘overflow:hidden’ cuts it off and this is unfortunately not quite what I need.

    #104029
    Paulie_D
    Member

    No problem, change it to overflow: auto.

    That should do it. http://jsfiddle.net/Paulie_D/BkCx5/1/

    #104033
    Derper
    Member

    Schmotty, columns should have different color background.

    Paulie_D, yeah it works but it fixes sidebar position so sidebar does not scroll anymore. :(

    #104034
    Paulie_D
    Member

    Isn’t that a good thing?

    Whatever, they’ll all have problems…try playing with it to get what you want.

    #104035
    Mottie
    Member

    Maybe this tutorial will help?

    #104038
    JPC776
    Participant

    If you want the sidebar to scroll also just change


    .container {
    height: 100%;
    }

    to

    .container {
    width: 100%;
    }

    I think that should work

    #104040
    Derper
    Member

    JPC776 now sidebar is able to scroll but “a wild gap appeared” at the end of page. http://i48.tinypic.com/351bp8n.png

    #104067
    Derper
    Member

    Thanks for all comments. I take a break, I need to talk to the person for whom I am doing all this stuff.

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