CSS re-вёрстка: сделать ширину=auto для 1 из элементов в диве, без размещения в столбец

amz00m · November 16, 2009

Есть широкий див, в нём находятся 2 элемента, 1-ый из них имеет фиксированную ширину.

Задача: приделать динамическую (изменяемую) ширину для 2-ого элемента, расположив оба элемента в одну строку.

Проблема: если установить 2-ому элементу width:auto, то в таком случае элементы размещаются в столбец, а надо в строку. Если установить для 1-ого элемента float:left, а для второго width:auto и float:right, то по идее всё должно решиться, но этого не происходит (firefox 3.5 + stylish).

Ещё я поигрался с display: table-row/table-column (пробовал и менять на другие возм. параметры), но ничего не изменилось. Как правильно выставить этот параметр и главное для кого? Для суб-элементов или для основного дива?

Подскажите пожалуйста, что я делаю не так?

Edited November 16, 2009 by amz00m

mishka · November 16, 2009

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>test</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<style type="text/css">
	body{
		margin:0;
	}
	#wrapper{
		width:100%;
		overflow:hidden;
	}
	.left{
		width:200px;
		float:left;
		padding:10px;
		background:#d8af00;
	}
	* html .left{
		margin-right:-3px;
	}
	.right{
		overflow:hidden;
		height:1%;
		padding:10px;
		background:#00abd6;
	}
	</style>
</head>
<body>
<div id="wrapper">
	<div class="left">
		<p>Lorem ipsum dolor sit amet consectetuer Aenean Nam lorem justo tristique. Penatibus Sed senectus eros senectus Curabitur Curabitur vitae sed eget lacinia. Convallis Ut justo augue et Vestibulum consequat.</p>
	</div>
	<div class="right">
		<p>Lorem ipsum dolor sit amet consectetuer Vestibulum ligula in libero ut. Dolor adipiscing vitae non eget metus porta Vivamus Sed lacus id. Quisque pulvinar pretium.</p>
		<p>Convallis nibh ut quis Ut sed Fusce dapibus In Donec interdum. Sit adipiscing In ullamcorper arcu eleifend mauris Fusce.</p>
		<p>Neque condimentum nibh Vivamus orci a urna montes lacinia orci malesuada. Lacus.</p>
	</div>
</div>
</body>
</html>

CoDy · November 16, 2009

Подскажи плиз, а зачем нужно это правило:

* html .left{

margin-right:-3px;

}

?

VJiK · November 16, 2009

Цитата с блога Димка:

Устранение бага с повторяющимися символами.
Хитро структурированные CSS-макеты могут вызвать в IE6 ошибку, при которой несколько последних символов плавающего элемента могут дублироваться и вылезти на блок, очищающий (закрывающий) флоаты. Есть несколько решений:
применить ко всем плавающим элементам display: inline;
применить margin-right: -3px к последнему плавающему элементу (если вы заглянете в исходники, создаваемые генератором CSS-макетов, то найдете, что в большинстве из них для блока сайдбара используется данное правило, как раз для решения этого бага);
поместить комментарий в самом конце плавающего блока, например: <!–– Здесь комментарий ––>;
поместить пустой <div></div> в самом конце плавающего блока.

mishka · November 16, 2009

VJiK, ты вернулся :rolleyes: где пропадал?

mishka · November 16, 2009

Устранение бага с повторяющимися символами.
Хитро структурированные CSS-макеты могут вызвать в IE6 ошибку, при которой несколько последних символов плавающего элемента могут дублироваться и вылезти на блок, очищающий (закрывающий) флоаты. Есть несколько решений:
применить ко всем плавающим элементам display: inline;
применить margin-right: -3px к последнему плавающему элементу (если вы заглянете в исходники, создаваемые генератором CSS-макетов, то найдете, что в большинстве из них для блока сайдбара используется данное правило, как раз для решения этого бага);
поместить комментарий в самом конце плавающего блока, например: <!–– Здесь комментарий ––>;
поместить пустой <div></div> в самом конце плавающего блока.

Нет это не то.

В ие6 возникает отступ в 3 пикселя. Если дизайн не строгий то можна оставить. Если строгий, и этот отступ видно то так вот его исправляют.

По поводу повторяющихся символов - это при многих флоатях в ие6 иногда вилазят последние символы последнего слова, и вылазят они гдето после футера. Вот появляются и висят там внизу.

У меня пару раз было с селекта вываливались :rolleyes:

CoDy · November 16, 2009

Спасибо за консультацию.

В ие6 возникает отступ в 3 пикселя. Если дизайн не строгий то можна оставить. Если строгий, и этот отступ видно то так вот его исправляют.

я это решаю таким правилом:

* {

margin: 0;

padding: 0;

border: 0;

}

Justnewone · November 16, 2009

Спасибо за консультацию.
я это решаю таким правилом:
* {
margin: 0;
padding: 0;
border: 0;
}

нет, таким правилом эту проблему не решишь. Это знаменитый "3-х пиксельный баг", очень широко раскрыт в сети.

amz00m · November 16, 2009

mishka2, спасибо за ответ, но это не подходит: вы мне привели кусок хтмл кода в качестве ответа, а я забыл сказать: я делаю css re-вёрстку: т.е. я пишу собственные юзерстили для сайтов, интерфейс которых мне не нравится, в моих возможностях править только CSS, и тем не менее:

мой код в первом посте - повторяет ваш (за исключением ненужностей) и он не работает.

Вот то что firebug показывает по элементам:

#wrapper{display:block}

#left{display:block; float:left; width: 50px;}

#right{display:block; float:right; width: auto (или 100%);} - в таком случае #right находится не справа от #left, а снизу, что мне и нужно исправить.

EDIT:

оказалось что по непонятной причине float:right не правильно обрабатывается, если для right применить float:none то в принципе это частично решает мою проблему, но возникает новая:

#right состоит из 3-ёх суб-дивов, и при float:right верхний субдив (#subdiv1) распологается справа от #left, а #subdiv2 и #subsdiv3 уже под ними, и всё бы ничего, но #left имеет приличную высоту, а #subdiv1 должен бы иметь мелкую, однако после такого правила он по высоте приравнивается к #left, и получается между содержимым #subdiv1 и #subdiv2 находится большой пропуск (пустое место). Мне бы в это место хотелось бы запихнуть #subdiv2.

Помогите, пожалуйста.

Edited November 16, 2009 by amz00m

psywalker · November 16, 2009

поменяй блоки местами, да и всего делов то

amz00m · November 16, 2009

поменяй блоки местами, да и всего делов то

этого - нельзя.

psywalker · November 16, 2009

1) Почему нельзя

2) Давай скрин того, что хочешь получить с подробным объяснением

Searcher · November 16, 2009

EDIT:
оказалось что по непонятной причине float:right не правильно обрабатывается, если для right применить float:none то в принципе это частично решает мою проблему, но возникает новая:
#right состоит из 3-ёх суб-дивов, и при float:right верхний субдив (#subdiv1) распологается справа от #left, а #subdiv2 и #subsdiv3 уже под ними, и всё бы ничего, но #left имеет приличную высоту, а #subdiv1 должен бы иметь мелкую, однако после такого правила он по высоте приравнивается к #left, и получается между содержимым #subdiv1 и #subdiv2 находится большой пропуск (пустое место). Мне бы в это место хотелось бы запихнуть #subdiv2.
Помогите, пожалуйста.

Кошмарик какой-то! Ничё не понял! А можно весь код посмотреть этого сайта где-нить в и-нете?

amz00m · November 16, 2009

1) Почему нельзя
2) Давай скрин того, что хочешь получить с подробным объяснением

1. потому что это нарушит логику. Вы не думали, что дивы могут быть не пустыми, а ещё и иметь содержимое, у которого важна последовательность?

2)

Кошмарик какой-то! Ничё не понял! А можно весь код посмотреть этого сайта где-нить в и-нете?

vkontakte.ru -> заметки. Пытаюсь доделать свой стиль http://userstyles.org/styles/15459

psywalker · November 16, 2009

Так в чём проблема, я никак не пойму, зачет ты себе жизнь усложняешь. Тут же всё просто. Общий Див,ему overflow:hidden; внутри два дива, один левый другой правый, да и всё, не вижу тут проблемы в упор

Edited November 16, 2009 by psywalker

Searcher · November 16, 2009

Последовательность в коде и последовательность визуальная - разные вещи. Все просто. Фиксированный блок размещаем в коде первым, даем ему float, а дальше блок без указания ширины (он сам растянется на всю ширину) с margin со стороны первого блока и равным ширине 1-го блока.

amz00m · November 16, 2009

Так в чём проблема, я никак не пойму, зачет ты себе жизнь усложняешь. Тут же всё просто. Общий Див,ему overflow:hidden; внутри два дива, один левый другой правый, да и всё, не вижу тут проблемы в упор

В том, что при увеличении ширины Общего Дива два внутренних не ресайзятся, т.к. у них УЖЕ задана фиксированная ширина (и я не могу исправить это, я могу лишь написать свой юзерстиль), а надо чтобы правый суб-див занимал всё свободное пространство, находясь справа от #left, а не под ним.

Последовательность в коде и последовательность визуальная - разные вещи. Все просто. Фиксированный блок размещаем в коде первым, даем ему float

Так я всё и делаю

а дальше блок без указания ширины (он сам растянется на всю ширину) с margin со стороны первого блока и равным ширине 1-го блока

ещё раз: я делаю RE-ВЁРСТКУ, т.е. пишу собственные юзерстили для готовых сайтов. Я - не владелец сайта, я не могу править его хтмл код и убрать оттуда строку width:370px, а т.к. функция width не поддерживает чего-то вроде "none" то и обнулить я ширину - не могу, могу лишь указать width:auto, но тогда 2-ой див уходит под первый

Edited November 16, 2009 by amz00m

amz00m · November 16, 2009

Решил проблему сам.

#right {display:table-cell !important; float: none!important; width:auto!important;}

Edited November 16, 2009 by amz00m

psywalker · November 16, 2009

Решил проблему сам.
#right {display:table-cell !important; float: none!important; width:auto!important;}

Плохо решил.

amz00m · November 16, 2009

Плохо решил.

согласен, это костыль, но предложи вариант лучше.

psywalker · November 16, 2009

согласен, это костыль, но предложи вариант лучше.

два минимум:

		div.left{ float: left; width: 300px;}
		div.right { overflow: hidden;}
<div class="left">Left</div>
<div class="right">Right</div>

И достаточно на первое время

Edited November 16, 2009 by psywalker

amz00m · November 16, 2009

два минимум:
		div.left{ float: left; width: 300px;}
		div.right { overflow: hidden;}
<div class="left">Left</div>
<div class="right">Right</div>
И достаточно на первое время

неверное решение. данный код не выполняет поставленную задачу. мой вариант, в отличие от вашего - работает.

div.right наследует фиксированный width=370px из css-стиля на сайте.

Edited November 16, 2009 by amz00m

psywalker · November 16, 2009

неверное решение. данный код не выполняет поставленную задачу. мой вариант, в отличие от вашего - работает.
div.right наследует фиксированный width=370px из css-стиля на сайте.

а почему он наследует? зачем? почему бы не убрать эту наследственность?

mishka · November 16, 2009

Даже незнаю что те подсказать....

table-cell неработает в ие6-7, если это не критично, то делай так.

И задачу сразу ставь конкретно. Я то незнал что хтмл уже есть и его нельзя менять.

Edited November 16, 2009 by mishka2

amz00m · November 16, 2009

а почему он наследует? зачем? почему бы не убрать эту наследственность?

потому что вы не читаете ответы на ваши сообщения, где я это уже объяснил.

psywalker · November 16, 2009

потому что вы не читаете ответы на ваши сообщения, где я это уже объяснил.

Аа, извиняюсь, да, не читал, потому что мышинально ответил, тогда согласен, но эти вещи не поддерживает ИЕ6-7, как ты их поборол?

Sign In

CSS re-вёрстка: сделать ширину=auto для 1 из элементов в диве, без размещения в столбец

Question

Link to comment

Share on other sites

32 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information