Jump to content
  • 0

2 фиксированых блока в 1м резиновом

Garnet

Asked by Garnet,

 Share

Question

Garnet Explorer

Garnet

Posted
Posted

Доброго времени дня...я только начал верстать div(ами) и вот столкнулся с проблемой. Есть 2 колонки фиксированной ширины выравненные по центру, длинна колонок зависит от контента - задача сделать фон от бортов колонок до края экрана определённого цвета, ширина-резиновая, высота - по максимуму высоты центральных колонок, написал такой код:

<html>

<head>

<title>test</title>

<style type="text/css">

body {

padding:0px;

border:0px;

margin:0px

}

.rubber {

width:100%;

background-color:#F00;

height:auto

}

.wrapper {

width:780px;

margin:auto;

}

.half_wrapper {

width:390px;

background-color:#9FF;

float:left;

height:auto

}

</style>

</head>

<body>

<div class="rubber">

<div class="wrapper" style="height:auto;">

<div class="half_wrapper">

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit....</p>

</div>

<div class="half_wrapper">

<p>Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit...</p>

</div>

</div>

</div>

</body>

</html>

но свойство height:auto не срабатывает, и блок - до бортов экрана не имеет высоты, подскажите пожалуйста решение проблемы. Неужели обязательно писать скрипт?

Link to comment
Share on other sites

6 answers to this question

Recommended Posts

  • 0
Garnet Explorer

Garnet

Posted
  • Author
Posted

npofopr - можно одинаковой, главное чтобы резиновые по бокам были одинакового размера с максимальной центральной.

Searcher - это частное решение, но данный код лишь фрагмент сайта, на самом деле там с верху и с низу ещё есть блоки.

Link to comment
Share on other sites
  • 0
Searcher Explorer

Searcher

Posted
Posted

Кажется я понял в чем проблема. Основная проблема у вас в том, что не растягивается wrapper и не растягивает своего родителя rubber.

Тут все просто, не надо никаких скриптов. Сейчас объясню суть.

Свойство height имеет по умолчанию значение auto, так что нет смысла его указывать. Проблема в том, что блоки half_wrapper у вас плавающиее, т.е. свойство float имеет значение отличное от none. А плавающие блоки выводятся из потока, т.е. родитель wrapper их просто не видит, и в результате автоматическое значение его высоты становится равным 0.

Выход элементарный, но почему-то практически не описанный в литературе и в интернете. Достаточно установить родителю плавающих блоков значение overflow:hidden; и сразу он увидит свои плавающие блоки и автоматически будет растягиваться на высоту самого высокого из них.

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept