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,530
    Total Members
    3,128
    Most Online
    6eJlbIu
    Newest Member
    6eJlbIu
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.

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

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

    • Ну, как я понял, это для динамичных сайтов, и все товары должны быть в какой то базе данных?
      А как через javascript обратиться к базе данных?
       
    • начнем с того, что данные ваших товарных позиций должны быть структурированы, например если они хранятся в SQL, то в вашем случае это может выглядеть:

      table
      date_start | date_stop | type | color | capacity | carrying

      одна строка - одна позиция
      SQL запрос к данной таблице вернет массив объектов с данными свойствами из таблицы (table)
      Без каких либо условий - это будут все записи. Если вам нужен фильтр по какой-либо колонке/колонкам или сортировка, то для этого в SQL запрос добавляются условия которые передаются в скрипт через POST или GET запрос с помощью формы
      например:

      <form method="post">
      <input name="date_start">
      <input name="date_stop">
      ....
      type и color логично сделать через select чтобы выбирать из существующих возможных вариантов
      capacity и carrying возможно потребуется возможность указания диапазона (от и до)
      ....
      </form>

      все выше перечисленное только в рамках возможных вариантов которых можно еще придумать
      если мы например укажем date_start то в скрипте используя $_POST['date_start'] можно будет добавить условие в SQL запрос
      ... WHERE `table`.`date_start` = $_POST['date_start']
      в этом случае на странице вывода позиций будут присутствовать только с Дата начала аренды указанной в фильтре

      в целом данная система - это большой комплекс разных механизмов в котором очень много нюансов, но если задаться целью, то можно сделать простенький фильтр на сайте
       
    • Здравствуйте. До сегодняшнего дня, я только занимался версткой макетов, и не совсем понимаю как в принципе после верстки сайты оживают и начинают работать. 

      Вот например, я сверстал карточки товаров, и там есть сортировка, но понятия не имею как его делать.

      Там есть формы: 
      - Дата начала аренды
      - Дата конца аренды
      - Тип транспорта
      - Цвет
      - Вместимость
      - Грузоподъемность Буду очень благодарен тому кто распишет как все это работает, а то понять не могу, что-то для меня это совсем темное и туманное.... 
  • Popular Contributors