Forums

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

Home Forums CSS Need Help with 3 Column Layout

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #32501

    I want to create a 3 column layout with 3 vertical columns and a header/column above the first two columns that spans only the first 2 columns – pushing them down – with the third aligning to the top.

    If anyone has a suggestion I’m all ears. This has been driving me crazy.

    P.S. I would like to avoid absolute positioning.

    See code…

    HTML






    Section Header Spans Column 1 and 2





    Column 1


    Lorem ipsum lorem libris no vim, his et delicata moderatius. Lorem reprimique his ut, eos albucius electram rationibus at. Est et deleniti constituto, facer comprehensam duo at. Ut puto error qualisque eos. Nec offendit adipisci eu, elitr solet pro ei, putant regione pri eu.


    Eu nulla noluisse atomorum his. Dolores reformidans referrentur per ne. Quo antiopam facilisis id. Ea eam fabellas eleifend.


    Vituperata inciderint has id. Pro impedit verterem efficiantur cu, te solum labores mea.





    Column 2


    Lorem ipsum lorem libris no vim, his et delicata moderatius. Lorem reprimique his ut, eos albucius electram rationibus at. Est et deleniti constituto, facer comprehensam duo at. Ut puto error qualisque eos. Nec offendit adipisci eu, elitr solet pro ei, putant regione pri eu.


    Eu nulla noluisse atomorum his. Dolores reformidans referrentur per ne. Quo antiopam facilisis id. Ea eam fabellas eleifend.


    Vituperata inciderint has id. Pro impedit verterem efficiantur cu, te solum labores mea.










    CSS

    body {
    }
    #wrap {
    font-family: sans-serif;
    margin: 0 auto;
    display: block;
    width: 890px;
    font-size: 12px;
    color: #333333;
    line-height: 16px;
    padding-bottom: 8px;
    background-color: #ccffff;
    }
    #column-span {
    display: block;
    width: 610px;
    float: left;
    clear: right;
    margin-left: 10px;
    background-color: #ffff66;
    }
    #column1 {
    display: block;
    width: 290px;
    float: left;
    clear: right;
    margin-right: 10px;
    margin-left: 10px;
    padding-right: 5px;
    padding-left: 5px;
    background-color: #66ffff;
    }
    #column2 {
    display: block;
    width: 290px;
    float: left;
    clear: right;
    margin-right: 10px;
    padding-right: 5px;
    padding-left: 5px;
    background-color: #66ccff;
    }
    #sidebar {
    display: block;
    width: 240px;
    float: left;
    clear: right;
    padding-right: 5px;
    padding-left: 5px;
    background-color: #cccccc;
    margin-right: 10px;
    }

    .section-header{
    font-size: 14px;
    font-weight: bold;
    color: #ffffff;
    background-color: #000099;
    line-height: 28px;
    display: block;
    height: 25px;
    }
    .clear {
    clear: both;
    }
    #49181

    Figured it out-

    Wrapped the column-span, column1 and column2 in a separate div floated left and cleared right. The sidebar jumps up and aligns to top.

    HTML

    body {
    }
    #wrap {
    font-family: sans-serif;
    margin: 0 auto;
    display: block;
    width: 890px;
    font-size: 12px;
    color: #333333;
    line-height: 16px;
    padding-bottom: 8px;
    background-color: #ccffff;
    }
    #column-span {
    display: block;
    width: 610px;
    float: left;
    clear: right;
    margin-left: 10px;
    background-color: #ffff66;
    margin-bottom: 20px;
    }

    #column-wrap{
    width: 620px;
    display: block;
    background-color: #666666;
    margin-right: 10px;
    float: left;
    clear: right;
    }

    #column1 {
    display: block;
    width: 290px;
    float: left;
    clear: right;
    margin-right: 10px;
    margin-left: 10px;
    padding-right: 5px;
    padding-left: 5px;
    background-color: #66ffff;
    }
    #column2 {
    display: block;
    width: 290px;
    float: left;
    clear: right;
    padding-right: 5px;
    padding-left: 5px;
    background-color: #66ccff;
    }
    #sidebar {
    display: block;
    width: 240px;
    float: left;
    clear: right;
    padding-right: 5px;
    padding-left: 5px;
    background-color: #cccccc;
    margin-right: 10px;
    position: relative;
    }

    .section-header{
    font-size: 14px;
    font-weight: bold;
    color: #ffffff;
    background-color: #000099;
    line-height: 28px;
    display: block;
    height: 25px;
    }
    .clear {
    clear: both;
    }

    HTML








    Section Header Spans Column 1 and 2





    Column 1


    Lorem ipsum lorem libris no vim, his et delicata moderatius. Lorem reprimique his ut, eos albucius electram rationibus at. Est et deleniti constituto, facer comprehensam duo at. Ut puto error qualisque eos. Nec offendit adipisci eu, elitr solet pro ei, putant regione pri eu.


    Eu nulla noluisse atomorum his. Dolores reformidans referrentur per ne. Quo antiopam facilisis id. Ea eam fabellas eleifend.


    Vituperata inciderint has id. Pro impedit verterem efficiantur cu, te solum labores mea.





    Column 2


    Lorem ipsum lorem libris no vim, his et delicata moderatius. Lorem reprimique his ut, eos albucius electram rationibus at. Est et deleniti constituto, facer comprehensam duo at. Ut puto error qualisque eos. Nec offendit adipisci eu, elitr solet pro ei, putant regione pri eu.


    Eu nulla noluisse atomorum his. Dolores reformidans referrentur per ne. Quo antiopam facilisis id. Ea eam fabellas eleifend.


    Vituperata inciderint has id. Pro impedit verterem efficiantur cu, te solum labores mea.











Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.