Home › Forums › CSS › Need Help with 3 Column Layout › Re: Need Help with 3 Column Layout
TreeTopStudioFigured 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.