Вложенный float контейнер

anycall · April 11, 2011

Как сложно описать простую проблему)

Помогите пожалуйста понять, как разделить контейнеры в правой колонке "mainContent"?

Без разделителя выглядит так, с разделителем же <br clear="all">

естественно свойство применяется к левой колонке( и выглядит так

Заранее спасибо!

Searcher · April 11, 2011

А как должно то быть? Нарисуйте.

anycall · April 11, 2011

А как должно то быть? Нарисуйте.

В грубом исполнении так

psywalker · April 11, 2011

Правую колонку вообще сверстай по другому, помести всё содержимое в контейнер с overflow: hidden; я имею ввиду правую колонку, её содержимое, а там просто пусти потоком свои маленькие прямоугольные блоки внутри

anycall · April 11, 2011

Не понял фразу "пустить потоком"( У меня это Новости, с фото "обтекаемыми" текстом. Если имеется ввиду перечислить контейнеры (маленькие блоки) то и "обтекания" не будет.

psywalker · April 11, 2011

Не понял фразу "пустить потоком"( У меня это Новости, с фото "обтекаемыми" текстом. Если имеется ввиду перечислить контейнеры (маленькие блоки) то и "обтекания" не будет.

Вот свои тесты-блоки заключи просто в контейнеры например и повесь на них оверфлоу-хидден и сделай оступы сверху снизу

anycall · April 11, 2011

Вот свои тесты-блоки заключи просто в контейнеры например и повесь на них оверфлоу-хидден и сделай оступы сверху снизу

Если я опять же правильно понял, то не могу в данной ситуации вычислить отступы т.к. размеры блоков заведомо не известны. Т.е. хочется реализовать в правой колонке так, как если бы она была одна и код выглядел бы:

<div style="float:left;"><img src=""></div>Текст
<br clear="all">
<div style="float:left;"><img src=""></div>Текст
<br clear="all">
<div style="float:left;"><img src=""></div>Текст
<br clear="all">

Edited April 11, 2011 by anycall

SelenIT · April 11, 2011

хочется реализовать в правой колонке так, как если бы она была одна

Ну так и сделайте, чтоб она была одна :facepalmxd: . Один вариант уже подсказали — overflow:hidden, можно еще display:table-cell или (если аккуратно) задать ей самой float.

А вместо <br clear="all">, кстати, можно ставить clear:both самим плавающим дивам — эффект будет тот же.

anycall · April 11, 2011

Да я вот к сожалению не понимаю, при чем тут owerflow( С таблицей было бы конечно проще всего, но "не кошерно" на мой взгляд. Миллиард газетных вёрсток как пример для меня, но не могу понять как правильно сделать. Т.е. как максимально желанный вариант - 2 колонки, большая тянет за собой по вертикали меньшую и при этом в колонках иметь возможность выравнивания контейнеров относительно ее границ.

psywalker · April 11, 2011

=
А вместо <br clear="all">, кстати, можно ставить clear:both самим плавающим дивам — эффект будет тот же.

А я предожил, чтобы вообще обойтись без этой грязи, а просто заключить каждую новость в свой контейнер

anycall · April 11, 2011

А я предожил, чтобы вообще обойтись без этой грязи, а просто заключить каждую новость в свой контейнер

Вы гений! не понимаю как, но РАБОТАЕТ! Объясните же, если не сложно, что дает здесь сокрытие переполнения?


<style type="text/css"> 
<!-- 
body  {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: #666666;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #000000;
}

#wrapper{
width:500px;
margin-left:auto;
margin-right:auto;
}

#sidebar
{
float: left; 
width: 150px;
background: #EBEBEB;
}

#mainContent {
	width:350px;
 	margin: 0 0 0 150px;
	background-color:#CF6;
} 

.news{
overflow:hidden;	
}

--> 
</style>
</head>

<body>

<div id="wrapper">

  <div id="sidebar">
    <h3>sidebar Content</h3>
    <p>The background color on this div will only show for the length of the content. If you'd like a dividing line instead, place a border on the left side of the #mainContent div if the #mainContent div will always contain more content than the #sidebar1 div. </p>
    <p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque  eget, cursus et, fermentum ut, sapien. </p>
  </div>

  <div id="mainContent">

  <div class="news">
  	<div>
		<div style="float:left; background-color:tomato; height:100px;">тест<br />тест<br />тест</div>
    <p>Lorem ipsum dolor sit amet</p>
	</div>
  </div>

  <div class="news">
  	<div>
		<div style="float:left; background-color:tomato; height:100px;">тест<br />тест<br />тест</div>
    <p>Lorem ipsum dolor sit amet</p>
	</div>
  </div>

  <div class="news">
  	<div>
		<div style="float:left; background-color:tomato; height:100px;">тест<br />тест<br />тест</div>
    <p>Lorem ipsum dolor sit amet</p>
	</div>
  </div>       

</div>

</div>
</body>
</html>

SelenIT · April 11, 2011

я вот к сожалению не понимаю, при чем тут owerflow

Я сам долго не понимал :facepalmxd: . Ключевые слова для поиска — контекст форматирования.

как максимально желанный вариант - 2 колонки, большая тянет за собой по вертикали меньшую и при этом в колонках иметь возможность выравнивания контейнеров относительно ее границ

Ну так это по всем признакам таблица и есть . Если очень критична "кошерность" и есть возможность забить/"изящно деградировать" на IE6-7, можно юзать связку display:table/display:table-cell. Но и обычная таблица не так страшна, как ее малюют, W3C практически разрешил. Если же не хочется искать легких путей, то вот (комменты тоже важны!).

чтобы вообще обойтись без этой грязи, а просто заключить каждую новость в свой контейнер

Не факт, что там отдельные новости, и что у одной новости не может быть двух врезок . А общий упорядочивающий контейнер колонки, имхо, нужен при любом раскладе.

psywalker · April 11, 2011

<div class="news">
<div>
<div style="float:left; background-color:tomato; height:100px;">тест<br />тест<br />тест</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>

Не пойму, зачем нужен лишний див внутри?

anycall · April 11, 2011

Не пойму, зачем нужен лишний див внутри?

Для наглядности) как-то редко вижу чтобы инструкции добавлялись прямо к IMG, и казалось что лучше принимать за должное то, чего сам не понял. А то вопросов будет еще больше.

psywalker · April 11, 2011

Для наглядности) как-то редко вижу чтобы инструкции добавлялись прямо к IMG, и казалось что лучше принимать за должное то, чего сам не понял. А то вопросов будет еще больше.

Не нужно, убери его оттуда.

anycall · April 11, 2011

Я сам долго не понимал . Ключевые слова для поиска — контекст форматирования.
Ну так это по всем признакам таблица и есть . Если очень критична "кошерность" и есть возможность забить/"изящно деградировать" на IE6-7, можно юзать связку display:table/display:table-cell. Но и обычная таблица не так страшна, как ее малюют, W3C практически разрешил. Если же не хочется искать легких путей, то вот (комменты тоже важны!).
Не факт, что там отдельные новости, и что у одной новости не может быть двух врезок . А общий упорядочивающий контейнер колонки, имхо, нужен при любом раскладе.

Да уж, флудить не хочется, но Спасибо не сказать не могу, а в силу "молодости" плюсик поставить не дают(

psywalker · April 11, 2011

Да уж, флудить не хочется, но Спасибо не сказать не могу, а в силу "молодости" плюсик поставить не дают(

Могу за тебя ему поставить :facepalmxd:

anycall · April 11, 2011

Не нужно, убери его оттуда.

Понял, спасибо! И, знакомых верстальщиков нет, но давно мучит вопрос, правильно ли заведомо строчным элементам типа <p> переназначать свойство display как block или лучше оставить их как есть, а отступы и прочее делать в свойствах обрамляющего контейнера?

psywalker · April 11, 2011

Понял, спасибо! И, знакомых верстальщиков нет, но давно мучит вопрос, правильно ли заведомо строчным элементам типа <p> переназначать свойство display как block или лучше оставить их как есть, а отступы и прочее делать в свойствах обрамляющего контейнера?

лучше отступы приемущественно налаживать у обёртки, НО это в твоём случае. А случаи бывают разные.

anycall · April 11, 2011

лучше отступы приемущественно налаживать у обёртки, НО это в твоём случае. А случаи бывают разные.

Это да) Читаешь Alistapart, все так гладко и красиво, а смотришь на свою задачу и думаешь, господа полиграфисты-дизайнеры, здесь Вам не мышой таскать элементы) Хотя к моему изначальному посту это отношения не имеет.

А Селениту, если можно, специальный, Админский плюсик!)

psywalker · April 11, 2011

А Селениту, если можно, специальный, Админский плюсик!)

Не можно, а НУЖНО! :facepalmxd:

SelenIT · April 11, 2011

... заведомо строчным элементам типа <p> ...

Вообще-то <p> — заведомо блочный элемент, и имеет приличные дефолтные отступы сверху и снизу. Другое дело, что он допускает только строчное содержимое. И никакие стили этого не изменят.

Sign In

Вложенный float контейнер

Question

Link to comment

Share on other sites

21 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

Join the conversation

Обсуждения

Important Information