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
[sourcecode language='css']
.col1, .col4{
width:200px;
margin-right:10px;
}
.col4 {
margin-right:0px;
}
[/sourcecode]
HTML
[sourcecode language='html']
[/sourcecode]
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
[sourcecode language='css']
.work{
width:950px;
margin-left:-10px;
}
.col1{
float:left;
margin-left:10px;
width:200px;
}
[/sourcecode]
HTML
[sourcecode language='html']
With regards to your first example. Why didn't you use this :
.col1{
width:200px;
margin-right:10px;
}
.col4 {
width:200px;
margin-right:0px;
}
Because I'm lazy.
It allows me to make the change to all the columns at once, rather then having to make the change twice.
It takes the last value declared. So far it works in Safari, Firefox, and IE.
cool. I wasn't sure how browsers intepreted this kind of thing. I've downloaded a lot of wordpress themes which have loads of duplicate code like this but I usually tidy it up and add comments etc to it so that its easier to update it later on.
Thats what control copy and paste is for
Will defining a margin twice with different values not cause problems in some browsers or do browsers just use the last value stated?
Elefant developed a computer algorithm that predicts the targets of microRNAs. Her algorithm, named RepTar