Высота слоя

pbeloysov · March 15, 2008

<style>
.boxtext{
 position: relative;
 margin: 0px 4% 0 4%;
 border: 1px solid #989DB1;
 background-color: White;
}

.boxtext .left{
 position: relative;
 float: left;
 width: 70%;
}

.boxtext .right{
 position: relative;
 margin-left: 70%;
}

</style>

<div class="boxtext">
 <div class="left">текст</div>
 <div class="right">текст</div>
</div>

Высота слоя boxtext увеличивается за счет дополнения информации только в слой right. Как сделать так, чтобы высота слоя выравнивалась по любому внутриннему слою?

homm · March 15, 2008

Высота слоя boxtext увеличивается за счет дополнения информации только в слой right. Как сделать так, чтобы высота слоя выравнивалась по любому внутриннему слою?

Это называется таблица

И кстати, наверное не любому а большему из них. Любому ? то как сейчас, чем правый не любой

Mihail Dobkin · March 15, 2008

height: auto

?

pbeloysov · March 15, 2008

Высота выравнивается не по любому слою и не по большему, а именно по правому (right).

Параметр heigth: auto - ничего не дает.

pbeloysov · March 16, 2008

Знает ли кто-нибудь решение этой поблемы или она нерешаема и можно использовать только таблицы?

Vitesse · March 17, 2008

а так?

<style>
.boxtext{
 position: relative;
 margin: 0px 4% 0 4%;
 border: 1px solid #989DB1;
 background-color: White;
}

.boxtext .left{
 position: relative;
 float: left;
 width: 70%;
}

.boxtext .right{
 position: relative;
 margin-left: 70%;
}
.clear {
 clear:both;
 height:0;
 font-size:0;
}

</style>

<div class="boxtext">
 <div class="left">текст</div>
 <div class="right">текст</div>
 <div class="clear"></div>
</div>

Azadi · March 17, 2008

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
* { 
 margin:0;
 padding:0;
}
BODY {
 padding:0 4% 0 4%; 
}
.boxtext {
 background-color:#ccc;
 display:table;
 width:100%;
}
.boxtext .left{
 width: 70%;
 height:100%;
 background:#3333CC;
 display:table-cell;
 //display:inline;
 //zoom:1;
 //vertical-align:top;
}
.boxtext .right{
 width:30%;
 background:#009900;
 display:table-cell;
 //display:inline;
 //zoom:1;
 //vertical-align:top;
}
</style>
</head>
<body>
<div class="boxtext">
 <div class="left"><p>текст</p><p>текст</p><p>текст</p><p>текст</p><p>текст</p><p>текст</p><p>текст</p><p>текст</p><p>текст</p><p>текст</p><p>текст</p><p>текст</p><p>текст</p><p>текст</p><p>текст</p><p>текст</p><p>текст</p><p>текст</p><p>текст</p><p>текст</p><p>текст</p><p>текст</p><p>текст</p><p>текст</p><p>текст</p><p>текст</p><p>текст</p></div>
 <div class="right">текст</div>
</div>
</body>
</html>

Данная конструкция прекрасно работает в совместимых со стандартами браузерах. В IE же ведет себя как в примере выше. В принципе, можно при помощи парочки скриптов заставить макет отображаться одинаково и в FF, и в Opera, и в IE. Но мне кажется, что вам это нафиг не надо Действительно проще таблицей.

homm · March 17, 2008

Кажется я понял, что нужно.

<style>
.boxtext{
 position: relative;
 margin: 0px 4% 0 4%;
 border: 1px solid #989DB1;
 background-color: green;
}

.boxtext .left{
 position: relative;
 float: left;
 width: 70%;
}

.boxtext .right{
 position: relative;
 margin-left: 70%;
 width: 30%;
}

.boxtext .clear {
 clear: both;}

</style>

<div class="boxtext">
 <div class="left">текст
текст
текст
текст
текст
текст
текст</div>
 <div class="right">текст</div>
 <div class="clear"></div>
</div>

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

Vitesse · March 17, 2008

Кажется я понял, что нужно.
...

а я не тоже самое сделал?

homm · March 17, 2008

а я не тоже самое сделал?

Видимо тоже самое

Sign In

Высота слоя

Question

pbeloysov

Link to comment

Share on other sites

9 answers to this question

Recommended Posts

homm

Link to comment

Share on other sites

Mihail Dobkin

Link to comment

Share on other sites

pbeloysov

Link to comment

Share on other sites

pbeloysov

Link to comment

Share on other sites

Vitesse

Link to comment

Share on other sites

Azadi

Link to comment

Share on other sites

homm

Link to comment

Share on other sites

Vitesse

Link to comment

Share on other sites

homm

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information