How do I align a paragraph next to a floated image?

Discussion in 'Web Design and Development' started by macaddict23, Mar 12, 2009.

  1. macaddict23 macrumors 6502

    macaddict23

    Joined:
    Jun 20, 2006
    Location:
    MacVille, USA
    #1
    [​IMG]

    I want the bold headline above to align to the top of the image.

    HTML Code:
    HTML:
    <div class="entry-home"><img src="image.gif"/>
    <p><b>Sample Headline</b><br />
    Re feumsan henit lum voloreet volobor irilit wisse dolorem zzriuscilis alisim estis eliquat. Ut vent eliquam vel ipit in ute consed dolorer cidunt accum irilis nulland rerilla facilit augiam eriureros  augiam eriureros eu feugue volorem dunt veliqui.</p>
    </div>
    CSS Code:
    HTML:
    
    .entry-home {
    	float: left;
    	width: 600px;}
    
    .entry-home img {
    	float: left;
    	margin-right: 14px;}
    
    .entry-home p {
    	padding-left: 150px;}
     
  2. memco macrumors 6502

    Joined:
    May 1, 2008
    #2
    I suggest altering your code just a bit to make the heading use a heading tag (<h1>-<h6>). It'd look something like this:

    HTML:
    <div class="entry-home">
    <h1>Sample Headline</h1>
    <img src="image.gif"/>
    <p>Re feumsan henit lum voloreet volobor irilit wisse dolorem zzriuscilis alisim estis eliquat. Ut vent eliquam vel ipit in ute consed dolorer cidunt accum irilis nulland rerilla facilit augiam eriureros  augiam eriureros eu feugue volorem dunt veliqui.</p>
    </div>
    
    The h tags are block level so everything after it will be on a separate line. The image is still floated left, and the paragraph wraps around it. You may need to adjust the margins or padding on whatever h element you use to get it to align with whatever styles are applied to the image.
     

Share This Page