Помогите правильно вписать блоки

persssik · October 22, 2011

Приветствую. Помогите пожалуйста разобраться!

Дело в том что, если в ниже приведенном коде, убрать параметр "height" из блока "top", то сам блок куда то убегает (попробуйте для наглядности), хотя в него вписаны еще два блока. Если убрать параметр "float" в блоках, вписанных в блок "top" то все нормально, но обтекание мне очень нужно.

Вопрос: Как сделать так чтобы блок "top" выравнивался по высоте, пропорционально вписанному в него контенту? А если проще, как исправить вышеупомянутый косяк? Желательно средствами CSS, так как JS не знаю вообще.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Untitled Document</title>
</head>

<body>
<div  id="background" style="background:#6f116d; width:80%; margin:10%; margin-top:5%; height:80%;">
<p style="">Fuck Fuck</p>

<div id="top" style="background:#bec72c; width:70%; margin-left:3%; margin-bottom:10px; height:100px;">

<div id="b1" style="float:left; vertical-align:middle;">  
  <p>Fuck Fuck  </p>
  <p>Fuck Fuck</p>
  </div>
 <div  id="b2" style="float:left; margin-left:30px; vertical-align:middle;">
 <p>Fuck Fuck </p>
  </div>
</div>
</div>
</body>
</html>

zSpx · October 22, 2011

Он некуда не пропадает, он схлопывается, т.к элементам которые он содержит задан float и они выходят из основного потока, т.е. фактически, он пустой. Чтобы этого не происходило нужно применять клиринг, в данном случае задать overflow: hidden;

Подробнее можете почитать тут

Edited October 22, 2011 by zSpx

persssik · October 22, 2011

Он некуда не пропадает, он схлопывается, т.к элементам которые он содержит задан float и они выходят из основного потока, т.е. фактически, он пустой. Чтобы этого не происходило нужно применять клиринг, в данном случае задать overflow: hidden;
Подробнее можете почитать тут

Эврика!!! Большое спасибо. Вопрос закрыт.

Sign In

Помогите правильно вписать блоки

Question

persssik

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

zSpx

Link to comment

Share on other sites

persssik

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information