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

Question

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

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

Code here - 4 column margins not correct

Answer 1

Я предполагаю, что проблема с CSS является то, что вы не принимать во внимание отступы.

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

Я осмотрела свой код и изменить его немного :)

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

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

Cheers!