Про width

Aleksey751 · July 18, 2011

Есть два дива :

  div.header {
        width:70%;
	 div.header {

	height:100px;
	min-width:400px;
	margin:30px 15% 0;
	background-color:grey;
	}  

  div.header>div {
    border:1px solid;
	float:left;
	height:100%;
	padding-left: 10px;
        width:33%;
   }

В div.header>div вложено ещё 3 дива, которые исполняют роль пунктов меню.

Хочется, чтобы они занимали всю ширину div.header. Но в значение width: 33% не включены паддинги, и элементы выходят за свои пределы.

Ещё стало заметно, что при паддинги добавляются засчет увеличения размера дива, а не засчет ущемления внутреннего пространства.

Подскажите, как обойти это.

Только обязательно должна сохраняться разделительный вертикальный бордер

Edited July 18, 2011 by Aleksey751

Justnewone · July 18, 2011

Какой доктайп?

Aleksey751 · July 18, 2011

Какой доктайп?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Пробовал разные - эффекта нет.

Gaspode · July 18, 2011

div.header {
        width:70%;
         div.header {

Это что вообще?

SelenIT · July 18, 2011

стало заметно, что при паддинги добавляются засчет увеличения размера дива, а не засчет ущемления внутреннего пространства.

Так уж сложилось в стандарте. Повлиять можно только в новых браузерах с помощью box-sizing: border-box (CSS3). В какой-то мере и в старых IE путем сброса в quirks mode (напр. комментарий перед доктайпом)... но это из разряда лечения перхоти гильотиной .

В сабжевой задаче, имхо, самое надежное и логичное — display:table контейнеру и table-cell пунктам. А IE7- (чтоб их уже...) подпереть скриптовым костылем...

Great Rash · July 19, 2011

Самое надежное решение без всяких костылей - использовать таблицу.

SelenIT · July 19, 2011

Ну или так (с)

Aleksey751 · July 19, 2011

стало заметно, что при паддинги добавляются засчет увеличения размера дива, а не засчет ущемления внутреннего пространства.
Так уж сложилось в стандарте. Повлиять можно только в новых браузерах с помощью box-sizing: border-box (CSS3). В какой-то мере и в старых IE путем сброса в quirks mode (напр. комментарий перед доктайпом)... но это из разряда лечения перхоти гильотиной .
В сабжевой задаче, имхо, самое надежное и логичное — display:table контейнеру и table-cell пунктам. А IE7- (чтоб их уже...) подпереть скриптовым костылем...

Поставил display:table и table-cell, ничего не поменялось.

Что должно было произойти?

amelice · July 21, 2011

стало заметно, что при паддинги добавляются засчет увеличения размера дива, а не засчет ущемления внутреннего пространства.
Так уж сложилось в стандарте. Повлиять можно только в новых браузерах с помощью box-sizing: border-box (CSS3). В какой-то мере и в старых IE путем сброса в quirks mode (напр. комментарий перед доктайпом)... но это из разряда лечения перхоти гильотиной .
В сабжевой задаче, имхо, самое надежное и логичное — display:table контейнеру и table-cell пунктам. А IE7- (чтоб их уже...) подпереть скриптовым костылем...
Поставил display:table и table-cell, ничего не поменялось.
Что должно было произойти?

Вот так должно получиться: http://jsfiddle.net/NLVwm/1/.

Тока в ИЕ включая 7-ю версию не поддерживается присвоения display:table к любому элементу.

Edited July 21, 2011 by cheburek

Sign In

Про width

Question

Aleksey751

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

Justnewone

Link to comment

Share on other sites

Aleksey751

Link to comment

Share on other sites

Gaspode

Link to comment

Share on other sites

SelenIT

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

SelenIT

Link to comment

Share on other sites

Aleksey751

Link to comment

Share on other sites

amelice

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information