I am attempting to create a 3-column layout where each column has a fluid width of 33% and height of 50%. However, when I add padding to the columns, it causes the last div to move to the next line. How can I resolve this issue?
Example HTML:
<div id="nav">
<div class="block" id="left">
<h1>blah blah</h1>
</div>
<div class="block" id="middle">
<h1>blah blah</h1>
</div>
<div class="block" id="right">
<h1>blah blah</h1>
</div>
</div>
Corresponding CSS:
#nav {
??
}
.block {
padding:20px;
width:33%;
height:50%;
position:relative;
float:left;
}