SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Zealot
    Join Date
    Apr 2011
    Location
    San Diego
    Posts
    111
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Images Going Outside DIV

    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
    HTML Code:
    }
    
    .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
    HTML Code:
     <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

  2. #2
    SitePoint Zealot Gar onn's Avatar
    Join Date
    Feb 2011
    Location
    Belgium
    Posts
    130
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    add a DIV elemnt to the <div class="newsbrief"> with te CSS property:
    clear: left
    or clear: both

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,338
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Just use a float clearing mechanism.

    e.g.
    Code:
    .newsbrief{overflow:hidden}
    Don't use empty paragraphs just to make space. use margin or padding on existing elements instead.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •