Не растягивается div по содержимому

solistcomru · April 28, 2012

Не могу понять почему div c классом Content, не хочет растягиваться по содержимому. Внутренние блоки, почему-то располагаются снаружи этого контейнера.

html


	<div class="header">
	</div>
	<div class="LineOne">
	</div>
	<div class="Content">
        Текст для проверки
		<div class="leftside">
		Текст для проверки
		</div>
		<div class="rightside">
		        <div class="Right">
			</div>
		</div>	

	</div>
	<div class="LineTwo">
	</div>
	<div class="footer">
		HOME | ABOUT US
	</div>

css


* {margin: 0;padding: 0;}
html, body {background: url(../img/background.jpg) repeat;}
.header {width: 735px; margin: 0 auto; width: 735px; height: 231px; background: #444e50 url(../img/insky.png) no-repeat;}
.LineOne {background: url(../img/line.png); width: 100%; height: 8px; z-index: 2; position: relative;}
.LineTwo {background: url(../img/line.png); width: 100%; height: 8px; z-index: 2; position: relative; top: -8px;}
.Right {width: 294px; height: 100px; position: relative; background: #55676b; float: right; top: 16px; }
.Content {margin: 0 auto; width: 735px; background: #61787d; position: relative; top: -8px; height: auto;}
.leftside {width: 425px; float: left; border: 1px solid black; }
.rightside {float: right; border: 1px solid black;}
.footer {width: 735px; margin: 0 auto;}

Edited April 28, 2012 by solistcomru

alexandr_v-vich · April 28, 2012

Внутренние блоки, почему-то располагаются снаружи этого контейнера.

Потому что вы применяете к ним свойство float, которое выбивает их из потока (ну условно). Во избежания проблем, в блоке Content в самый конец пихайте div со свойствами


width: 100%;
clear: both;

solistcomru · April 28, 2012

Спасибо, помогло.

Lagovas · June 27, 2012

Да бы не плодить лишних тем и что бы ответы хранились в одном месте, спрошу здесь, ибо та же проблема.

Содержимое является форма и div не хочет растягиваться по высоте. Что имеем. (убрал лишнее, оставил лишь структуру грубо говоря)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
 <head>
 <link rel="stylesheet" type="text/css" href="/static/css/main.css" /> 
 </head>
 <body>
 <div class="main-block">
  <div class="top-block">
   <img src="/static/images/logo2.png" class="logo-top"/>
   <div class="contacts">
    <p></p>
    <p></p>
   </div>
  </div>
    <div class="actions-horizontal">
     <ul class="actions-horizontal-list">
        <li><a href="/"></a></li>
        <li><a href="/"></a></li>
     </ul>
    </div>
    <br />
  <div class="center-content-block">

   <div class="reservation-form">
    <form action="/reservation/" method="post">
     <div style='display:none'><input type='hidden' name='csrfmiddlewaretoken' value='d4b5c16ef1a06db1127d3f82602e8fa0' /></div>
        <div class="field">
            <div class="label">
                <label for=""></label>
            </div>
                <div>
                    <input type="text" maxlength="100" />
                </div>
        </div>
        <div class="field">
            <div class="label">
                <label></label>:
            </div>
                <div>
                    <input type="text"/>
                </div>
        </div>
    <input type="submit" value="Submit" class="button"/>
    </form>
   </div><!--div reservation-form -->
    </div> <!-- center-content-block -->
    <div class="bottom-footer">
    </div>
  </div><!-- div main-block -->
 </body>
</html>

И вот такие вот стили (тоже убрал лишнее. Оставил отступы, поля, размеры и расположения).

html, body { 
margin:0 0 0 0; 
padding:0 0 0 0; 
min-height:100%; 
height:100%;
width:100%; 
position:absolute; 
}
/* main block home page */

 .main-block {
 top:5%; 
 position:relative;
 top:5%;
 width:80%; 
 min-height:95%;
 height:95%; 
 left:10%;
 border-radius:25px;
 }

.actions-horizontal {position:relative; left:5%; padding:5px; width:90%; height:6%; margin-top:10px;}
.actions-horizontal ul { list-type:none; list-style:none; margin:0px; padding:0px; }
.actions-horizontal ul li { margin-right:25px; margin-left:15px; float:left;  margin-top:5px;}

.center-content-block{ position:relative;
top:5%;
width:100%;
overflow:hidden;
overflow-x: hidden;
overflow-y: auto;
}

/* reserve_form.html*/
.field { 
margin:5px; 
color:black; 
position:relative;
}
.center-content-block .reservation-form{
height:100%;
position:relative;
left:40%;
width:150px;
}

.center-content-block .button {
position:relative;
left:25%;
}
 .contacts {float:right; width:35%;  margin-top:20px; position:absolute; top:2%; right:1%; font-size:150%; border-radius:15px;}
 .logo-top {width:450px; height:150px; left:1%;position:relative; top:4%;}
 .contacts p {margin:0 0 0 0; text-align:center;}

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

P.S. исправил чуток, перенес overflow в main-block, добавилась прокрутка, форму тоже прикрыл нормально фон, но не совсем что нужно. Как сделать без прокрутки, что бы страница удлинялась по высоте.

Гуглил, пробовал по разному, добавлял div со стилем clear:both или что то в этом роде, пробовал min-height, overflow, почему то не помогает, мб не туда это юзал, ибо новичек пока что. Кстати если есть нарекания по верстке или стилям, просьба их тоже высказывать, ибо только учусь.

Заранее благодарен за помощь.

P.S. Решил. Добавил в main-block min-height:95%;height:auto; и стало норм. Ток одна фигня проявилась, в опере не работает margin-bottom:5%; В ИЕ9 норм, в опере не хочет... Мб тут кто ответит или в другом топике спросить? Параметр задаю для main-block.

Edited June 27, 2012 by Lagovas

Sign In

Не растягивается div по содержимому

Question

solistcomru

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

alexandr_v-vich

Link to comment

Share on other sites

solistcomru

Link to comment

Share on other sites

Lagovas

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information