Align image and text div with out text wrapping

HTML & CSS
1

I have been pondering this problem for a while and was wondering if any of teh knowledgable peeps in here could help me out.

I have this code


<div class="news-list-item">
	<div class="new_details">
		<div class="newimg"><img width="100px" alt="Article Image" src="#"></div>		
		
		<div class="news-title">Test</div>
		<div class="news-cat-hostedby">
                        By Administrator , Tue 19 Oct 2010
                 </div>
		<div class="news-desc">
			<p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.				
			<a class="more" href="#">More</a>
			</p>
		</div>
	</div>
</div>

Of which I need to display like this:

The tricky thing is this. I need the text area to be fluid and to take up the entire area of the containing div so I cant just ut left margin on the text div.
I also cant have the text wrap around the bottom of the image. Its dynamic so I can’t use any inline margin hacks.

2

Hi,
What you are wanting to do is easy but it looks like you are saying that you can’t alter the html.

If you can alter the html, just move the image div out of the .new_details and set overflow:hidden on .new_details to stop the text from wrapping under the floated image.

<div class="news-list-item">
    [COLOR=DarkGreen]<div class="newimg">[/COLOR]<img width="100px" alt="Article Image" src="#">[COLOR=DarkGreen]</div>[/COLOR]
    [COLOR=Blue]<div class="new_details">   [/COLOR]             
        <div class="news-title">Test</div>
        <div class="news-cat-hostedby">
            By Administrator , Tue 19 Oct 2010
        </div>
        <div class="news-desc">
            <p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.                
            <a class="more" href="#">More</a>
            </p>
        </div>
    [COLOR=Blue]</div>[/COLOR]
</div>
3

What do you think of the following markup ? :slight_smile:

The image is put as the background image for the top level div and left padding is set on the same top level div to accommodate the width of the image, the title is a heading (I guessed a level 4 here, but you should put whatever fits), removed all unnecessary divs.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
  "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en"><head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Left padding</title>

  <style type="text/css">

    .news-list-item {
      background: transparent url(artclimg.png) no-repeat;
      padding-left:110px;
    }

  </style>

</head><body>

  <div class="news-list-item">      
      <h4>Test</h4>
      <p>By Administrator , Tue 19 Oct 2010</p>
      <p>
        One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.				
        <a class="more" href="#">More</a>
      </p>
  </div>

</body></html>
4

Thanks this worked perfect :smiley:

5

Excellent example of more tags and classes than neccessary… it’s also invalid to say “px” in a width attribute in the markup.

<div class="newsListItem">
	<img alt="Article Image" src="#" class="leadingPlate" />
	<div class="content">
		<h2>
			Test
			<small><span> - </span>By Administrator , Tue 19 Oct 2010</small>
		</h2>
		<p>
			One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.
		</p>
		<a class="more" href="#">More</a>
	<!-- .content --></div>
<!-- .newsListItem --></div>

then for CSS:


.newsListItem .leadingPlate {
	float:left;
	width:100px;
}

.newsListItem .content {
	margin-left:110px; /* width of plate PLUS desired margin */
}

Oh, and if you’re wondering about the h2/small – that’s all ‘heading’ so put it in the SHOCK heading tag. I’d then make “h2 small span” display:none since that’s present for CSS off users. Graceful degradation and so forth.

Rule #6, when you have semantic tags, you don’t need to keep wrapping div around each and every element. Also applies to one of the entire reasons CSS is separate from markup and WHY practicing separation of presentation from content is important – it keeps the people browsing with CSS disabled in mind – or those using media types OTHER than screen. You ARE using a media type on your LINK, right?

Of course since the classnames REEK of wordpress nonsense…