Need Help with 3 Column Layout

[TreeTopStudio]

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.








Sidebar column should align to top of Section header


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;

}

[TreeTopStudio]

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.












Sidebar column should align to top of Section header


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.

[Author]

Posts