I'm trying to create a simple tiled list with six smaller divs inside a main div, all set to float:left. However, this is causing issues with the auto height and it doesn't seem to work properly within the div. Can anyone help me fix my code or suggest a better approach?
CODE:
HTML:
<div class="main">
<div class="service-items">
<div class="service-item">WEB DESIGN</div>
<div class="service-item">SEO</div>
<div class="service-item-right">WEB GUIDANCE</div>
<div class="service-item">GRAPHIC DESIGN</div>
<div class="service-item">BROCHURE DESIGN</div>
<div class="service-item-right">CONTACT ME!</div>
</div>
</div>
CSS:
.main {
width:930px;
height:auto;
margin-right:auto;
margin-left:auto;
font-family: 'Roboto Condensed', sans-serif;
padding:10px;
}
.service-items {
width:930px;
height:auto;
}
.service-item {
width:200px;
height:90px;
padding-top:90px;
margin-right:15px;
text-align:center;
font-family: 'Roboto Condensed', sans-serif;
font-size:150%;
background-color:#69F;
display:block;
}