CSS Column Layout Code
Posted by TimSlavin at November 18, 2004
I got an email earlier today from a subscriber to my weekly email newsletter asking about some CSS code published awhile back. Like many people, creating multi-column layouts with CSS is a bear. Until I found this code in a book while picking through CSS books at Border's:
#container {
width: 840px;
border-top: 4px double #bbb;
margin: 10px 10px; /*top&bottom right&left*/
padding: 0;
}
#column1, #detail, #column2, #column3 {
float: left;
padding: 0 0 40px 0; /*top, right, bottom, left*/
margin-right: 0px;
text-align: left;
}
#column1 {
width: 310px;
border-right: 1px solid #bbb;
}
#detail { /*column 1 + column2 styles, used on inside content pages*/
width: 620px;
}
#column2 {
width: 310px;
}
#column3 {
width: 190px;
border-left: 1px solid #bbb;
}
The beauty is that this approach works for 2 to n number of columns. Then you handle content style formatting with separate divs, like this (do a View > on any page on this site to see how):
width: 840px;
border-top: 4px double #bbb;
margin: 10px 10px; /*top&bottom right&left*/
padding: 0;
}
#column1, #detail, #column2, #column3 {
float: left;
padding: 0 0 40px 0; /*top, right, bottom, left*/
margin-right: 0px;
text-align: left;
}
#column1 {
width: 310px;
border-right: 1px solid #bbb;
}
#detail { /*column 1 + column2 styles, used on inside content pages*/
width: 620px;
}
#column2 {
width: 310px;
}
#column3 {
width: 190px;
border-left: 1px solid #bbb;
}
.content {
padding: 5px 10px;
margin: 0;
}
#column1 .content {
padding: 10px 10px 20px 0;
}
#detail .content {
padding: 10px 20px 20px 0;
}
By separating the column layout styles from presentation styles, you eliminate a huge headache from juggling padding and margin issues. I'd also note this does not solve the CSS problem of balancing the height of all columns. I wing that one by making sure at least one column (usually the side nav) is the minimum height I will tolerate.
By comparison, all the CSS books except the one I found with this code, and all the free online layouts, use a more complicated approach to multi-column layout.
padding: 5px 10px;
margin: 0;
}
#column1 .content {
padding: 10px 10px 20px 0;
}
#detail .content {
padding: 10px 20px 20px 0;
}
Comments
Post a comment
Popular Articles
- How to Pick an Online ECommerce Shopping Cart: 6 Carts Reviewed
- How to Code HTML Email Newsletters
- How To Create An Editorial Process To Publish Web Content
- How To Do Basic Search Engine Optimization for Web Pages
- How To Easily Edit DNS Zone Files To Configure Email Servers
Helpful Podcasts
BoagworldAbout This Website
This site is an online magazine that offers free how-to internet knowledge for budget-minded businesses and the designers, programmers, and others who support them. Learn More...
Masthead
Writer, Editor, Publisher: Tim Slavin
Tel: (602)325-3024 (US)
AIM: redhorsecomm
Est. November 2002
