2 column layout CSS
Update: Paceville.com is now online.
In order to achieve a 2 column layout, to for instance display a single article as is the case in this tutorial, very little is needed, a few lines which will hide the left column and adjust the middle column in our case.
Demo here.
This is what is needed to go from three columns to two:
#col1 {
width: 0px;
display:none;
}
#col2 {
width: 665px;
float:left;
margin: 0 0 0 -6px;
}
#col3 {
margin-left: 665px;
}As you see we hide the left column (col1) and adjust the width of the middle column (col2) to occupy the free space, the right column’s (col3) left margin needed to be adjusted somewhat too.
For the rest of the stuff on the page we need this:
.profile_thumb{
float:left;
border: 1px #2d3138 solid;
margin: 0px 5px 0px 5px;
}
.article_comment{
margin: 10px 0px 0px 0px;
padding:10px;
}
.text_area_big{
width: 600px;
height: 200px;
margin: 10px 0px;
}
.comment_form{ padding: 10px; }.profile_thumb to affect the thumbnail of the commenter, float left and let the text wrap around, set bottom and right margin to avoid the text getting too close.
.article_comment with some margins and paddings to get the right spacious feeling, same goes for .comment_form.
Imagine if we would’ve used tables, what a mess it would’ve been to change from three to two columns, the example in this tutorial is the best example you can get of why you should style DIVs instead of tables when you create your layouts.