Images Going Outside DIV

HTML & CSS
1

Hey people.

I have recently added a News feature to my website and the headlines contain a picture within a DIV. Atleast, that’s how it’s supposed to be when I coded it.

Metal Gear Solid - Walkthroughs

As you can see (especially the picture at the bottom), the images are going outside the DIV’s I put them in. I did solve it somewhat (forgot what I did), but I didn’t like it for it involved making the whole div bigger and left the posts with fewer news with more empty space.

I’m sure it has something to do with “Clear” and “Float”. I don’t know where to put them. Here’s my code (sorry if my code is sloppy):

CSS


}

.newsfeed {
	width: 717px;
	background-color: #111111;
	position: relative;
	padding-top: 7px;
	padding-bottom: 3px;
	padding-right: 5px;
	padding-left: 5px;
}

.newsbrief {
	width: 717px;
	background-color: #333333;
	position: relative;
	padding: 5px;

}

.newsbrief img {
	float: left; 
	margin: 5px;

}

HTML


 <h1>News</h1>
        
          <div class="newsfeed">
      
      <h3><a href="newsarticle.php?record=14">Snake Eater 3DS - This Winter</a></h3>
      <p id="pnews"><em>Posted on: June 9, 2011</em></p>
      </div>
     
      <div class="newsbrief">

   
         <p id="pnews"><img src="http://desmond.imageshack.us/Himg819/scaled.php?server=819&filename=3dsp.jpg&res=gal" align="left" hspace="5" />      </p>
      <p>Metal Gear Solid 3: Snake Eater, will be released to the portable Nintendo 3DS this winter recognized as Snake Eater 3DS.</p>
      
      <p><a href="news.php"><img src="../Images/Buttons/readmore.jpg" width="99" height="25" alt="Read More" /></a></p>
      		 <p>&nbsp;</p>
             
      </div>
      
      <p>&nbsp;</p>

Before anyone tells me to just make the height bigger, stop. Just… no. I’m not doing it.

Thanks :slight_smile:

2

add a DIV elemnt to the <div class=“newsbrief”> with te CSS property:
clear: left
or clear: both

3

Just use a float clearing mechanism.

e.g.


.newsbrief{overflow:hidden}

Don’t use empty paragraphs just to make space. use margin or padding on existing elements instead.