terug naar de vorige pagina


CSS: p{
padding: 0;
margin: 0 0 10px;
}

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix{
zoom: 1;
}

.container{
border: 1px solid green;
background: url(kolommen_meeschalen/kolommen.gif) no-repeat top left;
margin: 20px 0;
}

.inner-container{
border: 1px solid red;
}

.box{
border: 1px solid;
width: 225px;
float: left;
display: inline;
margin: 10px 20px 0 7px;
padding: 10px;
}
HTML: <div class="container">

<div class="inner-container clearfix">

<div class="box">
<p>Content voor box 1</p>
<p>Content voor box 1</p>
<p>Content voor box 1</p>
<p>Content voor box 1</p>
<p>Content voor box 1</p>
</div>

<div class="box">
<p>Content voor box 2</p>
<p>Content voor box 2</p>
<p>Content voor box 2</p>
<p>Content voor box 2</p>
<p>Content voor box 2</p>
<p>Content voor box 2</p>
<p>Content voor box 2</p>
<p>Content voor box 2</p>
<p>Content voor box 2</p>
<p>Content voor box 2</p>
<p>Content voor box 2</p>
<p>Content voor box 2</p>
<p>Content voor box 2</p>
<p>Content voor box 2</p>
</div>

</div>

</div>

RESULTAAT:

Content voor box 1

Content voor box 1

Content voor box 1

Content voor box 1

Content voor box 1

Content voor box 2

Content voor box 2

Content voor box 2

Content voor box 2

Content voor box 2

Content voor box 2

Content voor box 2

Content voor box 2

Content voor box 2

Content voor box 2

Content voor box 2

Content voor box 2

Content voor box 2

Content voor box 2


terug naar de vorige pagina