Align three divs horizonatally. Need Advice - html

Question

I'm having trouble making my work neater. I'm really trying to learn how to simplify my efforts. But I start first with putting everything on the screen and then div'n the elements out. After I've seen all my elements, I tackle the css.
.left {
position: relative;
margin-top: 50px;
margin-bottom: 10px;
float: left;
height: 400px;
width: 33%;
}
.middle {
position: relative;
margin: 50px 3px 10px 3.5px;
float: left;
height: 400px;
width: 33%;
}
.right {
position: relative;
margin-top: 50px;
margin-bottom: 10px;
float: right;
height: 400px;
width: 33%;
}
<div id="header">
<p id="logo">GRAPEFRUIT</p>
<li>Home</li>
<li>Download</li>
<p id="fund">KickStarter</p>
</div>
<div id="top">
<h1>Split Screen Messeging - Texting With Motion Images!</h1>
</div>
<div class="left" id="preview"></div>
<div class="middle" id="preview"></div>
<div class="right" id="preview"></div>
<div id="footer"></div>

Answer 1

Link to see it work on jsFiddle --
http://jsfiddle.net/a1ynzr7p/1/
<div id="header">
<p id="logo"> GRAPEFRUIT</p>
<li>Home</li>
<li>Download</li>
<p id="fund">KickStarter<p>
</div>
<div id="top">
<h1>Split Screen Messeging - Texting With Motion Images!</h1>
</div>
<div class="evenThree" id="preview">LEFT
</div>
<div class="evenThree" id="preview">MIDDLE
</div>
<div class="evenThree" id="preview">RIGHT
</div>
<div id="footer">
</div>
CSS
.evenThree{float:left; width:33%;}

Answer 2

Another solution would be to use display:flex; on the parenting container of those three items.
http://jsfiddle.net/kqxyqL0f/3/
.contentWrapper {
display:flex;
}
.column {
width:33%;
}
<div id="header">
<p id="logo">GRAPEFRUIT</p>
<li>Home</li>
<li>Download</li>
<p id="fund">KickStarter
<p>
</div>
<div id="top">
<h1>Split Screen Messeging - Texting With Motion Images!</h1>
</div>
<div class="contentWrapper">
<div class="column" id="preview">TESTING LEFT</div>
<div class="column" id="preview">TESTING MID</div>
<div class="column" id="preview">TESTING RIGHT</div>
</div>
<div id="footer"></div>

Answer 3

Are you trying to create three columns (aligning div's horizontally)? You can simply wrap each column (left, middle and right) with a class that applies: float:left and width:33%.
As seen here: jsfiddle
.col-3 {
float:left;
width:33%;
}
<div class="row">
<div class="col-3">Left</div>
<div class="col-3">Middle</div>
<div class="col-3">Right</div>
</div>
Also some tips to help your code:
ID's are non re-usable, don't repeat them throughout the code. Either change them to a class or change the ID to be unique.
Make sure all the <li> elements are wrapped in a <ul> or <ol> tag

Answer 4

You can also do these two things. See the boxes 1 - 3, they're using DIV with CSS display: table-cell. Easier to get the contents inside centered in the box. The DIV containing Boxes 4, 5, and 6 are using display: inline-block - they're more flexible with using margins between them, but, you'll have to do something special to make the text go center (wrap it in <span>).
Or you can learn Twitter-Bootstrap (look it up). You'll be far better off with it when applying layouting for websites especially when your requirements are to make it mobile friendly.
.container {display: table;margin-bottom:30px}
.set {
display:table-cell;
width: 200px;
height: 200px;
text-align:center;
vertical-align:middle;
padding:10px;
background-color:#9a9a9a;
border:1px solid #444;
}
.set2 {
display:inline-block;
width:140px;
height:90px;
text-align:center;
background-color:#A75b5b;
margin: auto 10px;
border:1px solid #444;
}
<div class="container">
<div class="set">Box 1</div>
<div class="set">Box 2</div>
<div class="set">Box 3</div>
</div>
<div class="set2">Box 4</div>
<div class="set2">Box 5</div>
<div class="set2">Box 6</div>