Varsis Studio FadeThe 2 column layout
On this page I showed you how to make a 4 column layout with a little HTML and a little CSS. This time around, I am going to take almost the identicle concept and show you a 2 column layout.
The HTML
The following is straight forward markup. We've put a couple of classes on each, the first being .column and the second reflecting the order they appear in. Note I spelled the number. Classes and id's can't start with a numeric value (which is a stupid rule if you ask me, ascii is ascii is ascii). The first class is the common class so broad styles can be applied quickly. The second class serves as a way of differentiating between each column if need be.
<div class="column one"> <h3>Column 1</h3> <p>This is column one, the first one, followed by 2. Pretty cool eh?</p> </div> <div class="column two"> <h3>Column 2</h3> <p>This is column two, the second one, preceded by 4. Pretty cool eh?</p> </div>
The CSS
The CSS is where the magic happens. To strike a balance across all columns we use .column to apply the common width, 50%, and to float each one to the left. The we use .column * to apply a lesser width to all elements contained within each .column. This is the easiest way to get space between each column as adding padding gets a little funky on different browsers. Lastly we use the auto margin trick to balance the spacing of each .column evenly across the width of the layout.
.column {
width: 50%;
float: left;
}
.column * {
width: 95%;
margin: 0 auto;
}
How it looks
Column 1
This is column one, the first one, followed by 2. Pretty cool eh?
Column 2
This is column two, the second one, preceded by 4. Pretty cool eh?
Why do our themes matter?
So who are some of the developers who have really made a difference: