Резиновая верстка на флоатах
HTML
<div class="main">
<div class="block-main">
<div class="block">
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
</div>
</div>
<div class="block-main">
<div class="block">
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
</div>
</div>
<div class="block-main">
<div class="block">
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
</div>
</div>
</div>
CSS
* {
padding: 0;
margin: 0;
}
.main {
max-width:1000px;
min-width: 600px;
margin: 20px auto;
overflow:hidden;
background: #0000dd;
}
.block-main {
float:left;
width:33%;
}
.block {
background: #ecedee;
border: 2px solid: #999999;
padding: 20px;
margin: 20px;
}
JAVASCRIPT
/* class 'main' has its width.
class 'block-main' is a wrapper for content. It floats to left and takes 33% of 'main' width.
Because of it's float 'main' collapses. overflow:hidden corrects this.
*/
