Div under another div doesnt line up correctly

[Sillysoft]

I am trying to have a div show an image on the left then text to the right of that image. So I float to divs next to each other, one to hold the image and one to hold the text. I then want the same exact setup underneathe it. The problem is the first div's work but when I add the second div underneathe the image in the second div shows directly under the text from the first div on the right then the text from the second div is pushed below the second image thats under the text and shows on the left. What am I doing wrong? Below is the code and here is the image showing how it looks:

#main_content
{
 padding:20px;
 padding-top:10px;
}
#main_content #main_image
{
 float:left;
 width:200px;
}
#main_content #main_text
{
 float:left;
 width:320px;
 font-size:11px;
 font-family:verdana;
 color:#000;
 line-height:16px;
}

And here is how I implement it on the page:

 <div id="main_image"><img border="0" src="images/reilly_hall.gif" height="130" width="190" style="border:1px #000 solid;"></div>
 <div id="main_text"><p><strong>Test title</strong></p>
 <p>Test text</p>
 </div>
 <div id="main_image"><img border="0" src="images/natatorium_field.gif" height="130" width="190" style="border:1px #000 solid;"></div>
 <div id="main_text"><p><strong>Test title</strong></p>
 <p>test text</p>
 </div>

[Alex]

Sillysoft,

I believe all you need to do is float the image to the left and add a paragraph after it. The text should then default to the right of the left-floated image. Or, did I miss something?

Alex

[Sillysoft]

Sillysoft,

I believe all you need to do is float the image to the left and add a paragraph after it. The text should then default to the right of the left-floated image. Or, did I miss something?

Alex

Ok after changing default text I now have the same issue as before. Here is the new div layout that Im using and the image of how it looks now:

 <div id="main_image"><img border="0" src="images/reilly_hall.gif" height="130" width="190" style="border:1px #000 solid;"></div>
 <p><strong>test title</strong></p>
 <p>test text</p>
 <div id="main_image"><img border="0" src="images/natatorium_field.gif" height="130" width="190" style="border:1px #000 solid;"></div>
 <p><strong>test title</strong></p>
 <p>test text</p>

[Sillysoft]

I was sort of able to get it working in both IE and FF by adding each div inside another div and float it. But I dont know if that is a proper way of doing it:

 <div style="float:left;width:520px;">
 <div id="main_image"><img border="0" src="images/reilly_hall.gif" height="130" width="190" style="border:1px #000 solid;"></div>
 <p><strong>test title</strong>
 <p>test text</p>
 </p>
 </div>
 <div style="float:left;width:520px;">
 <div id="main_image"><img border="0" src="images/natatorium_field.gif" height="130" width="190" style="border:1px #000 solid;"></div>
 <p><strong>test title</strong>
 <p>test text</p>
 </p>
 </div>

The problem with this is in IE there is a space between the first div and the second div but in FF they are directly on top of one another with no spacing.

[Sillysoft]

Still having issues with this, any suggestions?

[Aken]

I think a better HTML structure would help you a lot. I'd recommend either wrapping each image and text combination in a single div, or using an unordered list.

Also a quick note, you're using the same ID twice. An ID is unique, and can only be used once. For multiple items with the same styling, use classes. Also, avoid inline styles where possible - it will help prevent any future change headaches.

Here's an easy example using the aforementioned div method:

<div class="img">
    <img src="images/reilly_hall.gif" height="130" width="190" alt="" />
    <h2>Test Title</h2>
    <p>Test text.</p>
</div>
<div class="img">
    <img src="images/natatorium_field.gif" height="130" width="190" alt="" />
    <h2>Test Title</h2>
    <p>Test text.</p>
</div>

div.img {
    clear: both;
}
 
div.img img {
    float: left;
    margin-right: 10px;
    border: 1px solid #000;
}

[Sillysoft]

I think a better HTML structure would help you a lot. I'd recommend either wrapping each image and text combination in a single div, or using an unordered list.

Also a quick note, you're using the same ID twice. An ID is unique, and can only be used once. For multiple items with the same styling, use classes. Also, avoid inline styles where possible - it will help prevent any future change headaches.

Here's an easy example using the aforementioned div method:

<div class="img">
<img src="images/reilly_hall.gif" height="130" width="190" alt="" />
<h2>Test Title</h2>
<p>Test text.</p>
</div>
<div class="img">
<img src="images/natatorium_field.gif" height="130" width="190" alt="" />
<h2>Test Title</h2>
<p>Test text.</p>
</div>

div.img {
clear: both;
}
 
div.img img {
float: left;
margin-right: 10px;
border: 1px solid #000;
}

Crud, cant believe I didnt catch that. I still have a long road ahead of me. Thank you all for your input. One last question, when I use the CSS above and apply it to the page it puts the divs on top of each other like it should but in IE there is a space between the divs but in FF there is not space between the divs. Any idea why?

[Centauri]

Depends on which version of IE you are talking about. In decent browsers, the .img div in the code above will not actually surround the floated image, and the clear on subsequent divs is clearing the float hanging out the bottom of the div above it. A more consistent method would be to force the divs to actually surround the contents, and this can be done via the overflow for decent browsers, and tripping HasLayout via a width for IE6 :

div.img {
overflow: hidden;
width: 100%;
}

[Aken]

Depends on which version of IE you are talking about. In decent browsers, the .img div in the code above will not actually surround the floated image, and the clear on subsequent divs is clearing the float hanging out the bottom of the div above it. A more consistent method would be to force the divs to actually surround the contents, and this can be done via the overflow for decent browsers, and tripping HasLayout via a width for IE6 :

div.img {
overflow: hidden;
width: 100%;
}

Good catch. Myself, if I was in your situation where the image was a set size each time, I would define a height for each div. Either method is fine.

[Aken]

Here's a good SitePoint article explaining HasLayout, when you are likely to run into it, and how to fix: http://reference.sitepoint.com/css/haslayout

[Sillysoft]

Thanks again for the feedback, I will give it a try and see what happens. Another quick question, what is the proper way of making a space between the top and bottom div? Do you put another div inbetween and give it a height?

[RyanReese]

I personally set margins but you had best read up on collapsing margins as it is a tricky subject.

I wrote a peice on it myself

[Paul O'B]

You would use margins on the elements to push them further away. You shoold never need to add empty elements just to make space.

Just apply a margin-bottom to the element on top and it will push the other element away.