column left floated layout with equal left and right margins

I have a four-column, left-floated layout. I want equal margins for left and right margins. I've floated the four columns to the left and assigned a right margin of 20px on each float. The full width column div looks correct, but the margins and columns are not displaying correctly on the columns with different widths. I've gone over the math several times and my eyes are burning trying to figure out what I'm doing wrong.

Any suggestions on the best way to do this or how to do this? I could create a 20px width first column for a total of five columns, or use tables. But I was looking for a more elegant way of doing this, but maybe it's not possible. I also have to support IE7. Thanks.

Code here - 4 column margins not correct

---

I guess the problem with your CSS is that you didn't take the padding into account.

In order to do this more elegant you should centred all the blocks with equals margins.

I've inspected your code and modified it a little :)

http://jsfiddle.net/w3YRF/5/

Anyway, I recommend you to use a Grid System such as Grid960 (http://960.gs/) that you give you a great hand on your way!

Cheers!

链接地址: http://www.djcxy.com/p/88476.html

上一篇: 两个div并排

下一篇: 列左浮动布局具有相等的左右边距