Sign in to follow this  
solistcomru

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

Recommended Posts

Не могу понять почему 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 by solistcomru

Share this post


Link to post
Share on other sites
Внутренние блоки, почему-то располагаются снаружи этого контейнера.

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


width: 100%;
clear: both;

Share this post


Link to post
Share on other sites

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

Содержимое является форма и 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 by Lagovas

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Member Statistics

    46,434
    Total Members
    3,128
    Most Online
    Sterben
    Newest Member
    Sterben
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Спрашивают сейчас

  • Пишут сейчас

    • Если свойства нет в спецификации, то откуда его возьмет браузер? Даже если в каком то одном из браузеров введут это свойство то смысла его использовать все-равно не будет, так как в остальных оно работать не будет 🙂   Тогда бардак творился, DHTML, разные объектные модели и все дела. У netscape действительно была такая фича. Хотя не факт что она работала. Вот тут https://www.uv.es/jordi/v3/html/dynhtml/dynamic.pdf можно увидеть что float:center; присутствует в коде, но следом написано что элементы можно выровнять с помощью float слева или справа, или с помощью js по центру. Также в книге указаны допустимые значения для float - left, right, none. Так что это скорее всего была запланированная возможность, которая не получила реализации.
    • Если бы с html и css, все браузеры строго соответствовали спецификациям) Да статье около десятка лет, а то и более. Вот я тоже склоняюсь к тому, что это ошибка. но эта лекция была написана даже с учётом ещё живого на тот момент netscape navigator. Может быть он позволял интерпретировать такую конструкцию. В описании автор указывает, что так блок становится обтекаемым с двух сторон.
    • Может с clear путаете? Или в статье спутали. Наверно, древняя?
      http://htmlbook.ru/css/clear
  • Popular Contributors