Float 2 divs in a parent div and arrange such divs one below another

Question

Hi,

I am creating a web page with 3 columns. The middle column is where all the content goes. The content I want to enter has to be in the format of left aligned image, followed by some text next to the image. And this flows throughout the column with different images and corresponding text. Since my layout is a div based layout, I have put a main div (page_content )for the column. Then the heading (h4) and below the heading I have entered another div. This div in turn contains individual divs that are nested with div (class photo) for image and div (class lat_art) for text. The HTML code and CSS code has been given below. My issue is that the first image and text comes up, but subsequent get lined up vertically below the first text i.e occupies only the 50% of the div and floats right, pushing its corresponding text below it in the same 50% space. Should I specify a height for individual divs, probably the image is bigger than the text. But if I do that won’t my code become static. I want it to be dynamic. Please help.

HTML Code

<div id="page_content"> 
<h4 class="center_cap">LATEST ARTISTS</h4> 
<!--Div for the content begins here--> 
<div> 
<!--Individual div begins here--> 
<div > 
<div class="photo"> 
<img src="Images/guitar.jpg" alt="guitar"/> 
</div> 
<div class="lat_art"> 
<span class="artist">ROCK ON</span> 
<p> 
Good news to all the fans of 'Rock On'. Concerts all around the world. 
</p> 
</div> 
</div> 
<!--Individual div ends here--> 

<!--Individual div begins here--> 
<div > 

<div class="photo"> 
<img src="Images/guitar.jpg" alt="guitar"/> 
</div> 

<div class="lat_art"> 
<span class="artist">ROCK ON</span> 
<p> 
Good news to all the fans of 'Rock On'. Concerts all around the world. 
</p> 
</div> 
</div> 
</div> 
<!--Div for the content ends here--> 
</div>

Code from external Stylesheet

.photo{ 
width:48%; 
float:left; 
padding-left:2px; 
} 
.lat_art{ 
width:50%; 
float:right; 
}

Answer 1

It is really hard to follow because you are describing very much every other word is 'div'. Anyhow you described that you have three columns but If I understood correctly it is just the middle one you are asking about.

You want this format:

• picture to the left
• Right of the picture you have a header
• Under the header you have a lot of text that wraps around the picture

Correct?

You problem is that you float, but you don't clear the float. This means that all content under it will be align according to the picture. What you need is to set clear:both after you don't want the content to wrap anymore.

I wroted a little example and tested it. CSS is inline to make the example short and simple.

<div>
<img src="pircture.png" style="float:left;height:400px;width:400px" />
<h4>My header</h4>
<p> A little content</p>
<div style="clear:both"></div>
</div>

Answer 2

You can probably save yourself a lot of time and aggrevation by using the YUI Grids CSS from Yahoo!

Answer 3

I'm not 100% sure that I understand the question. If you actually want what you are calling individual divs to have a picture on the left and text on the right, you can accomplish this by floating both the photo and the *lat_art* div left. If you actually want the text to be on the right and to flow under the picture if it is longer, do not float the 'lat_art' at all.

There is no need to specify a height on the individual divs, or to clear floats on them as they will fall one below the other by default (divs are blocks).

You are falling victim to divitis here as well - <span class="artist">ROCK ON</span> could likely be something more meaningful like <h5 class="artist">ROCK ON</h5> or a paragraph or something else styled accordingly. The img could just as easily be:

<img src="Images/guitar.jpg" alt="guitar" class="photo"/>

rather than:

<div class="photo"> 
<img src="Images/guitar.jpg" alt="guitar"/> 
</div>