Columns dropping off

I’ve talked about using grids in designing websites previously, aligning your elements to a formula to create consistency and harmony. It isn’t hard to integrate into your design process, but issues can pop up in putting the layout to code; one such problem is columns dropping off.

As seen in this example image the issue is that the margin (in red) of the object (in yellow) extends past the main containers boundary (in black). There are two solutions to this problem, the first and the most obvious is to apply a special class to the last column. This is what I have personally used in the past for what its worth.

In a four column layout I will name the class col1 and use it for the first three columns, the fourth and last I will call col4. In my style sheet I set the width of all the columns to 200px and a right margin of 10px, but below that for col4 I rescind that order.

CSS

.col1, .col4{
width:200px;
margin-right:10px;
}

.col4 {
margin-right:0px;
}

HTML

<div class="col1">Clinical Depression</div>   

<div class="col1">Government of Canada</div>   

<div class="col1">deviantART</div> 

<div class="col4">NortheastEnder</div>

The other method is probably the better solution, and the easiest to maintain, esspecialy if you have a dynamic list of items. First you switch up the margin to the left side of the columns, then you give the group a negative margin. You can wrap it in a div or use an unordered list to accomplish this. But the result is the left most margin is cancelled out.

CSS

.work{
width:950px;
margin-left:-10px;
} 

.col1{
float:left;
margin-left:10px;
width:200px;
} 

HTML

<div class="work>   

<div class="col1">Clinical Depression</div>   

<div class="col1">Government of Canada</div>   

<div class="col1">deviantART</div> 

<div class="col1">NortheastEnder</div>

</div> 

Your mileage may vary depending with your settings, but these techniques never fail me.

Written by John Leschinski from Leschinski Design
Posted on June 21st, 2008 and filed under CSS
Do not forget to subscribe to our RSS feed for updates

6