не могу разобраться с div

dummy · September 9, 2011

Подскажите,где я не прав - есть div(main),в котором находятся еще 2 div,и все хорошо,пока вставляешь текст во второй блок,тогда второй блок просто выезжает за границы основного блока.Вот пример:

html


<body>
<main>
<main_content></main_content>
<second_content></second_content>
</main>
</body>

css

main {
	border: 3px solid #000000;
	width: 960px;
   min-height:600px;
   margin: 0px auto;
	display: block;
   }
main_content{
	background-color: #00FF00;
	width: 650px;
   min-height:600px;
   float:left;
	}
second_content{
	background-color:  #8B0000;
	width: 300px;
   min-height:600px;
   float:right;
   }

понимаю,что вопрос элементарный,но самостоятельно найти ошибку не могу

rus · September 9, 2011

вот скрин, покажите что вы имели ввиду?

Bonzash · September 9, 2011

Подскажите,где я не прав - есть div(main),в котором находятся еще 2 div,и все хорошо,пока вставляешь текст во второй блок,тогда второй блок просто выезжает за границы основного блока.Вот пример:
html
<body>
<main>
<main_content></main_content>
<second_content></second_content>
</main>
</body>
css
main {
	border: 3px solid #000000;
	width: 960px;
   min-height:600px;
   margin: 0px auto;
	display: block;
   }
main_content{
	background-color: #00FF00;
	width: 650px;
   min-height:600px;
   float:left;
	}
second_content{
	background-color:  #8B0000;
	width: 300px;
   min-height:600px;
   float:right;
   }
понимаю,что вопрос элементарный,но самостоятельно найти ошибку не могу

overflow: hidden; родителю.

Edited September 9, 2011 by Bonzash

irinablue · September 9, 2011

http://jsfiddle.net/gBALe/

dummy · September 9, 2011

...покажите что вы имели ввиду?

когда текста мало,то все нормально,все предсказуемо!

но,когда вставляю "рыбу" и большую,то зеленая область выходит за черную рамку вниз

overflow: hidden; родителю.

получилось,спасибо!

не могу плюсовать вам,почему?

http://jsfiddle.net/gBALe/

огромное спасибо,уже в закладках! :yahoo:

Edited September 9, 2011 by dummy

Fear1 · September 9, 2011

наверное нужно 30 постов

rus · September 9, 2011

наверное нужно 30 постов

верно, так и есть.

Bonzash · September 9, 2011

Маленькие Вы еще) пойму надо, чтобы было 20 + сообщений)

Edited September 9, 2011 by Bonzash

dummy · September 9, 2011

думаю,что у меня получится набрать и больше постов,вопросов как у дурака фантиков :boast:

dummy · September 9, 2011

вот смотрите,когда я добавил второй main_content,то second_content начал вести себя не так как задумано,а задумано все просто:

есть главный блок(main)в котором можно вставлять другие блоки,например - пост в блоке main_content,а в second_content - новости и другое,то есть на странице будет много блоков,основной контент - main_content,дополнительный(ссылки,новости,архив и т.д.)в second_content.

вот что получилось,при попытке вставить 2 раза блок main_content:

http://jsfiddle.net/gBALe/2/

Bonzash · September 9, 2011

Вставьте main_content после second_content.

dummy · September 9, 2011

то есть,вначале обязательно должно идти main,после second и в таком порядке и писать в html?


<div class="main_content"></div>
<div class="second_content"></div>
<div class="main_content"></div>
<div class="second_content"></div>

тогда получается,что эти два блока выравниваются относительно друг-друга: second выравнивается относительно main и получаются большие отступы между сэкондами

Edited September 9, 2011 by dummy

Bonzash · September 9, 2011

http://htmlbook.ru/css/float

dummy · September 9, 2011

http://htmlbook.ru/css/float

не пойму,а к чему тут обтекание float?

как можно другим способом,кроме float, задать позиции блокам,чтобы в блоке main, блок main_content был слево,и следующий main_content под ним,а блоки second_content,были справа и соответственно друг под другом. :dash:

...............

вот,кажется разобрался как сделать:

http://jsfiddle.net/dummy/gBALe/20/

подскажите - верной дорогой идет товарищ?

Edited September 9, 2011 by dummy

Sign In

не могу разобраться с div

Question

Link to comment

Share on other sites

13 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

Join the conversation

Обсуждения

Important Information