Here is the code I am using to create a simple 3-column layout (http://jsfiddle.net/7aC3U/)
This is the HTML code:
<div class="wrapper">
<div class="col col-1-3">
<div class="module">
<p>Col 1</p></div>
</div>
<div class="col col-1-3">
<div class="module">
<p>Col 2</p></div>
</div>
<div class="col col-1-3">
<div class="module">
<p>Col 3</p></div>
</div>
</div>And this is the CSS code:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
.wrapper {
background: red;
margin: 0 auto;
width: 90%;
overflow: hidden;
padding-left: 20px; }
.col {
float: left;
padding-right: 20px; }
.col-1-3 {
width: 33.33%; }
.module {
background: white;}
I'm facing an issue where the wrapper-div (red) has unwanted padding on the top and bottom, but I can't seem to identify where it's coming from. Any help would be greatly appreciated!