Помогите правильно расположить див блоки
Привет, помогите с css - не удаеться блоки расположить так как мне нужно :( получаеться вот такой венегрет:
<style type="text/css" media="screen">
* { padding: 0; margin: 0; vertical-align: top; }
body{ font: 18px "proxima-nova", Helvetica, Arial, sans-serif; }
a { color: #069; }
a:hover { color: #28b; }
#Wrapper
{
border: 2px solid red;
padding: 1px;
}
#Block1
{
border: 2px solid green;
padding: 1px;
background: #B5E3FF;
}
#Block2
{
position: relative;
border: 2px solid blue;
padding: 1px;
background: #BFF08E;
}
#Part1
{
float: left;
width: 200px;
border: 1px solid brown;
padding: 1px;
background: #FFACAA;
}
#Part2
{
float: left;
width: 70px;
border: 1px solid blue;
padding: 1px;
}
#Part3
{
float: left;
width: 70px;
border: 1px solid brown;
padding: 1px;
}
#Part4
{
float: left;
width: 70px;
border: 1px solid red;
padding: 1px;
}
#Part4:after
{
clear: both;
display: table;
}
#zone1
{
width: 68px;
border: 1px solid green;
padding: 1px;
}
#zone2
{
width: 68px;
border: 1px solid green;
padding: 1px;
}
</style>
<body bgcolor="#E6E6FA" scroll="no">
<div id="Wrapper">
<div id="Block1">
p
<div id="Part1">
Q1<br />
Q2<br />
Q3<br />
</div>
<div id="Part2">
48%<br />
52%<br />
56%<br />
</div>
<div id="Part3">
+<br />
o<br />
-<br />
</div>
<div id="Part4">
<div id="zone1">
55%
</div>
<div id="zone2">
Good
</div>
</div>
</div>
<div id="Block2">
<strong>Chart</strong>
</div>
</div>
</body>
мне хочеться сделать что бы:
"Блок" шли друг под другом - их высота была резиновой (ширина ограничена шириной "Врапер"а)
"Парт"ы были также резиновые по высоте причем высоту задает остальным первая, а в последней 4, "зоны" прилипали к верху но друг под другом и ее ширина была бы резиновой (то есть до края "Блок1"), а "Врапер" был бы резиновый, что то косячю с позиционированим, если не буква Р то "Блок1" почемуто схлопываеться а мне нужно чтоб он вмещал "парты" - подскажите как такое сделать? |