positioning text/image with a border

Question

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; }

Answer 1

If I've understood you correctly, I think your quickest solution would be to wrap all of the border items into a single div with float set to left. You can then place your elements inside this div with no float set. Paragraphs will by default have a new line at the end and images can be followed by a <br /> tag.

Edit:

I've seen the question has been updated so try this:

<div id="border"> <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> </div>

<style>

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

#border {float: left;}

#column1 {position: relative; padding: 3px; background: gray ; margin: 1px; }

#column2 {position: relative; padding: 3px; background: orange; margin: 1px; }

#column3 {position: relative; padding: 3px; background: gray; margin: 1px; }

</style>

Answer 2

try adding this to every box

clear: both;

Answer 3

You have everything floated to the left. Try this:

#column1 {width: 200px; ...}

#column2 {width: 200px; ... }

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

Sorry: I just realized that you want them vertical not horizontal. Remove the float altogether and that should cause the divs to stack vertically.

Answer 4

Remove float, position, and top from the CSS rules for #column1, #column2, and #column3. Divs (and paragraphs) are block-level elements and will stack vertically by default.

EDIT: Alright, I think I see what your problem is now... using the CSS you posted - instead of using background color to indicate a border, change the #column1, #column2, and #column3 divs to use border and remove the padding. Also, add clear: left:

#column1 {float: left; position: relative; width: 200px; border: 3px solid gray ; top: 10px;margin: 1px; clear:left; }

#column2 {float: left; position: relative; width: 200px; border: 3px solid orange; top:50px;margin: 1px; clear:left; }

#column3 {float: left; position: relative; width: 200px; border: 3px solid gray; top: 100px;margin: 1px; clear:left; }