Learning html/css, having trouble with positioning text and or images within a border on a page exactly where i want them. I'm first trying to stack them underneath each other vertically, but i dont know how to move each box underneath, at the moment they are stacking horizontally until they go over the max width, what do i do? HTML:

 <div id="column1">
<p>blah blah blah</p>
 </div>

 <div id="column2">
<p>blah blah blah</p>
 </div>
 <div id="column3">
<p>blah blah blah</p>
 </div>

CSS:

p {
font-family: Tahoma;
font-size: 14px;
margin: 1px;
padding: 10px;
text-align: left;
background-color: white;
width: 800px;	
 }

#column1 {float: left; position: relative; width: 200px; padding: 3px; background: gray ; top: 10px;margin: 1px; }

#column2 {float: left; position: relative; width: 200px; padding: 3px; background: orange; top:50px;margin: 1px; }

#column3 {float: left; position: relative; width: 200px; padding: 3px; background: gray; top: 100px;margin: 1px; }