Sections with equal dynamic width

Windbrand · 03-07-2013, 02:10 PM

How do I set up a container of dynamic width, but each section in it has equal width so that they all resize at the same time with the container?

For example:

Code:

.container{
width:80%; /*of viewport*/
}
.section{
position:relative;
float:left;
width: 80%/6; <---- pseudo code
}

There are 6 equal sections. For example if the .container is 900px, then each .section would be 150px. If .container is 1200px, then each .section would be 200px.
Thanks.

sunfighter · 03-07-2013, 03:03 PM

You do get your hands slapped for position:relative; around here.

Code:

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style type="text/css">
.container{
width:80%;
height: 400px;
background-color: blue;
}
.section{
float:left;
width: 13%;
height: 350px;
background-color: green;
margin-right: 5px;

}
</style>
</head>

<body>
<div class="container">
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
</div>
</body>
</html>