css четырехколоночный левый плавающий макет с равными левым и правым полями

У меня четырехколоночный макет с плавающей запятой. Мне нужны равные поля для левого и правого полей. Я переместил четыре столбца влево и назначил правое поле в 20 пикселей для каждого поплавка. Div столбца с полной шириной выглядит правильно, но поля и столбцы отображаются неправильно в столбцах с разной шириной. Я несколько раз перебирал математику, и мои глаза горят, пытаясь понять, что я делаю не так.

Есть какие-нибудь предложения о том, как это сделать лучше всего или как это сделать? Я мог бы создать первый столбец шириной 20 пикселей всего из пяти столбцов или использовать таблицы. Но я искал более элегантный способ сделать это, но, возможно, это невозможно. Я также должен поддерживать IE7. Спасибо.

Код здесь - 4 поля столбца неверны


person Chris22    schedule 02.07.2012    source источник


Ответы (1)


Думаю, проблема с вашим CSS в том, что вы не учли отступы.

Чтобы сделать это более элегантно, вы должны центрировать все блоки с равными полями.

Я проверил ваш код и немного изменил его :)

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

В любом случае, я рекомендую вам использовать систему сеток, такую ​​как Grid960 (http://960.gs/), которая поможет вам на вашем пути!

Ваше здоровье!

person turik    schedule 02.07.2012
comment
Спасибо, турик. Да, я использовал 960 и собирался прибегнуть к нему, но он не используется в остальной части кода (используются таблицы), поэтому я как бы настраиваю свои столбцы в виде квази-сетки. Я подумал, что это неправильные отступы / поля, и некоторое время настраивал. Огромное спасибо за то, что одолжили мне свои глаза и мозг! :) - person Chris22; 02.07.2012
comment
@ turik, если вы посмотрите на свое решение, вы заметите, что желоба между столбцами шире (15 + 15), чем левое и правое поля, это не то, что я хочу. Мне нужен равный интервал между столбцами (20 пикселей) включая левое и правое поля - person Chris22; 02.07.2012