[SOLVED] Image breaks out of DIV

[Axcelcius]

I have a layout for a news post that I am working. The image in the body of the message takes up more height than the text and as a result the image overlays the div right under it. (I am aware that the image is missing in the example. But the concept is still valid.) Plus I have tested in Firefox, IE, and Safari. Any suggestions?

 

 

<div id="news_article_4" class="box">
    <div class="header">All Around</div>
    <div class="subheader">10:56PM Monday, January 14, 2008 | Posted by Jhon | </div>
    <div class="content"><a href="index.php?what=news&category=">
<img src="./uploads/images/original/" alt="" align="left" border="0" /></a>
Iasldfgjasjkvbhjabvjhb ks dfhsadh fkjsadkjlhksdhfkjashdkj faksdhf khfk hasjk jksjkfhdsa jkasjkdfa</div>
    <div class="subheader">Comments (0) | </div>
</div><br />

//Content Box Style

.box{
width: 100%;
position: relative;
}

.box .header{
background-color: #9CB9FD;
border: 1px solid #31519F;
padding: 2px;
font-weight: bold;
}

.box .subheader{
background-color: #F0F3FB;
border-bottom: 1px solid #31519F;
border-left: 1px solid #31519F;
border-right: 1px solid #31519F;
padding: 2px;
}

.box .content{
border-bottom: 1px solid #31519F;
border-left: 1px solid #31519F;
border-right: 1px solid #31519F;
padding: 2px;
height: 100%;
}

[phpQuestioner]

looks fine in my FF and IE to me, with no overlapping image; the only thing different that I did was give your img tag a width and a height value.

 

 

[soycharliente]

Try renaming your comments box to another class and adding a 'clear' definition for it.

Something like this (THIS IS NOT TESTED):

<div id="news_article_4" class="box">
<div class="header">All Around</div>
<div class="subheader">10:56PM Monday, January 14, 2008 | Posted by Jhon | </div>
<div class="content"><a href="index.php?what=news&category=">
	<img src="./uploads/images/original/" alt="" align="left" border="0" /></a>
	Iasldfgjasjkvbhjabvjhb ks dfhsadh fkjsadkjlhksdhfkjashdkj faksdhf khfk hasjk jksjkfhdsa jkasjkdfa
</div>
<div class="comments">Comments (0) | </div>
</div><br />

//Content Box Style

.box{
width: 100%;
position: relative;
border: 1px solid #31519F;
}
.box .header{
background-color: #9CB9FD;
padding: 2px;
font-weight: bold;
}
.box .subheader, .box .comments{
background-color: #F0F3FB;
border-top: 1px solid #31519F;
padding: 2px;
}
.box .comments{
clear: both;
}
.box .content{
border-top: 1px solid #31519F;
padding: 2px;
height: 100%;
}

 

I also cleaned up your CSS definitions a bit.

The border thing. I moved the definition into the box class. It now has a border around the entire div. Then just the comments, content, and subheader have a border-top definition.

 

The main thing I did was rename the comments box and add the 'clear: both;' style.

 

Also, if you're feeling frisky, use your CSS to do the style attributes you've got in your image tag.

A little 'align: left;' and 'border: none;' for an image definition. The only reason I say that is because you're using CSS so why have styles inline? Just my $0.02

[Axcelcius]

There is something else wrong then. Separate from the rest of the code the previous stuff works fine but with the complete page it does not. Here is the rendering in Firefox and IE (Safari displays the same as FF). Also the .box CSS does not render the border so I am required to add left and right borders where they should all ready be. Any clues?

 

@charset "utf-8";
html, body, div, span, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, code,
    del, dfn, em, q, dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td{
    font-weight:inherit;
    font-style:inherit;
    font-size:100.01%;
    font-family:inherit;
    vertical-align:baseline;
    outline:0;
}

body{
background-color: #F6F3EC;
background-image: url(./images/background.jpg);
background-repeat: repeat-y;
background-position: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #444444;      
    margin:0; padding:0; border:0;
}

a:link, a:active, a:visited{
color: #6b8AAB;
text-decoration: none;
}

a:hover{
color: #699945;
text-decoration: none;
}

.container{
margin:0 auto;
width: 920px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
}

/* Header Styles */
#top_bar{
background-color: #F0F3FB;
padding-top: 4px;
padding-right: 3px;
padding-bottom: 4px;
padding-left: 3px;
}

#header .container{
background-image: url(images/bg_header.jpg);
background-repeat: no-repeat;
border-top: 1px solid #31519F;
border-bottom: 1px solid #31519F;
height: 100px;
width: 900px;
padding-right: 10px;
padding-left: 10px;
vertical-align: middle;
}

/*Content Left Styles */
#content_left{
background-color: #DDDDDD;
border-right: 1px solid #BBBBBB;
border-left: 1px solid #BBBBBB;
color: #3A332D;
padding: 5px;
width: 200px;
}

#block_box_left .header{
background-color: #F0F3FB;
height: 17px;
border: 1px solid #BBBBBB;
margin: 0px;
font-size: 10px;
font-weight: bold;
color: #5F8BBC;
text-decoration: none;
line-height: 16px;
text-align: center;
}

#block_box_left .content{
background-color: #FFFFFF;
margin-top: 0px;
margin-bottom: 5px;
border-top: solid 0px #BBBBBB;
border-bottom: solid 1px #BBBBBB;
border-left: solid 1px #BBBBBB;
border-right: solid 1px #BBBBBB;
padding: 5px;
}

#block_box_left ul{
display:  block;
text-align: left;
padding: 0px;
list-style-type: none;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-top: 0px;
}

#block_box_left .category{
text-indent: 0px;
text-align: center;
}

#block_box_left li{
height: 15px;
border: 1px solid #BBBBBB;
background-color: #FFFFFF;
margin-top: 2px;
font-size: 10px;
text-indent: 18px;
line-height: 14px;
text-decoration: none;
font-weight: bold;
}

#block_box_left li a:link,
#block_box_left li a:active,
#block_box_left li a:visited{
background-image: url(./images/nav_left_off.gif);
background-repeat: no-repeat;
background-position: left center;
display: block;
color: #6b8AAB;
text-decoration: none;
font-weight: bold;
}

#block_box_left li a:hover{
display: block;
background-color: #F0F3FB;
background-image: url(./images/nav_left_on.gif);
background-repeat: no-repeat;
background-position: left center;
text-decoration: none;
color: #699945;
font-weight: bold;
}

/* Content Center Styles */
#content_center_10{
padding: 5px;
vertical-align: top;
margin: 0px;
width: 700px
}

#content_center_01{
padding: 5px;
vertical-align: top;
margin: 0px;
width: 700px
}

/* Footer Styles */
#footer{
background-color: #FBD5CC;
border-top: 1px solid #31519F;
clear: both;
}

#footer .top_bar{
background-color: #9CB9FD;
border-top: 1px solid #FFFFFF;
clear: both;
padding: 3px;
text-align: center;
font-weight: bold;
}

#copyright{
background-color: #F0F3FB;
text-align: center;
padding-top: 3px;
position: absolute;
}

.block_left{
padding: 3px;
float: left;
text-align: left;
width: 400px;
}

.block_center{
border-right: 1px dotted #31519F;
border-left: 1px dotted #31519F;
float: left;
text-align: center;
padding: 3px;
width: 345px;
}

.block_right{
padding: 3px;
float: left;
text-align: right;
width: 155px;
}

//Content Box Style

.box{
width: 100%;
position: relative;
border: 1px solid #31519F;
}

.box .header{
background-color: #9CB9FD;
border: 1px solid #31519F;
padding: 2px;
font-weight: bold;
}

.box .subheader, .box .comments{
background-color: #F0F3FB;
border-bottom: 1px solid #31519F;
border-left: 1px solid #31519F;
border-right: 1px solid #31519F;
padding: 2px;
}

.box .comments{
clear: both;
}

.box .content{
border-bottom: 1px solid #31519F;
border-left: 1px solid #31519F;
border-right: 1px solid #31519F;
padding: 2px;
height: 100%;
}

 

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml' lang='en' xml:lang='en'><head>
<title>My Site | Taking Control of the Web - Homepage</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv='CONTENT-LANGUAGE' content='english-us' />
<link rel='StyleSheet' href='./themes/default/style.css' type='text/css' />
</head><body>

<div id="page" class="container">
<div id="header">
    	<div id="top_bar" style="clear: both;">
        	<b>Welcome to My Site | Enjoy Your Stay!</b>
        </div>
        <div class="container">
        <img src="./uploads/images/original/" alt="Taking Control of the Web" title="Taking Control of the Web" border="0" />
        </div>
    </div>
<table cellpadding="0" cellspacing="0" border="0">
	<tr>

<td id="content_left">
    	
<div id="block_box_left">
    <div class="header">Navigation</div>

    <div class="content">
<ul><li class="category">General</li><li><a href='index.php?what=news'>News / Updates</a></li>
<li><a href='index.php?what=archives'>News Archives</a></li>
</ul>
</div>
</div>
        <div> </div>
    </td>
		<td id="content_center_10" >

1200611565
<div id="news_article_2" class="box">
<div class="header">News Story Post #2</div>
    <div class="subheader">5:43PM Thursday, January 17, 2008 | Posted by  | </div>
    <div class="content"><a href="index.php?what=news&category=1">
<img src="./uploads/images/original/site_news.gif" alt="Site News" align="left" border="0" /></a>
Eos cu consul timeam oportere, omnium sanctus verterem ut eos. Te mel regione labitur theophrastus, an vim nihil ancillae, ut duo idque propriae. Ad possim erroribus voluptaria eum, ut vim dicit suavitate assentior. Sit exerci tempor ne, an altera perpetua explicari eum. Ad vim vocent accumsan.<br />
<br />
Ex vis lucilius convenire, quidam saperet duo te, ex qui scripta feugiat. Percipit definiebas ne mei. Sed vero eirmod cu, cu facilis officiis has, ea eos dicat altera. Quod lobortis no sit. Menandri volutpat et pri, omnium doctus ea cum.<br />
<br />

Et solum delenit vim. An equidem suavitate tincidunt vel, at altera fastidii mei. Te per scripserit repudiandae, voluptaria comprehensam usu ne. Vel inani atomorum ne, ut mel dicam urbanitas. Harum paulo mei te, postea invidunt disputando at sit, ea cibo quas mei. Aliquyam takimata ex sit. In mundi probatus mea.<br />
<br />
An soleat copiosae vix, ius et etiam aeque graece. Id vel tota etiam inimicus, ex per timeam atomorum. Eos id error sadipscing. Paulo tritani ne nec, est hinc dicta animal ea, zzril graece conclusionemque eam ne. Utinam prompta deserunt et sed, dicat suscipit suavitate duo an.<br />
<br />
Eos id altera inciderint, propriae sententiae argumentum per ad. Has in nulla petentium, eum semper referrentur cu. Usu ne quod detracto, autem impedit deseruisse no has, eam commodo pertinax scripserit no. Ferri choro feugiat at vim, cum an essent eligendi nominati.<br />
<br />
Ex eam quem iuvaret maluisset. Hinc invenire concludaturque ius id. Qui no sapientem persequeris, justo nonummy pri te. Vis ex audire pericula temporibus, ludus choro liberavisse an duo. Causae mentitum vis ad, ex nec mentitum patrioque iracundia, eum clita sanctus cu. Simul patrioque cu ius, tota verear ut eos, denique officiis sit cu.<br />
<br />
Lucilius sapientem his cu, mea eruditi detraxit principes no. Aliquip labitur epicurei id est, choro facilisi nec in. In sumo sapientem vix, eu nam utinam lobortis. In mel vidit impedit, graeco partiendo ius ei. Affert ridens gloriatur no sea, pri an audire tritani alienum. Per ea dissentias scribentur.<br />
<br />
Diceret delectus ius ad, facer voluptaria his ad, pro no denique consequat. Mel adhuc repudiandae te, an aliquyam deterruisset vel. Ex tale saepe vis, ei nec offendit repudiare. Vide nemore mandamus sit ut, sed no iisque accommodare, vide legendos nam eu. Mei soleat patrioque efficiantur ei, vim no sonet utinam, cu rebum facilis consulatu est.<br />

<br />
Eu perpetua voluptatibus mel. Ut ius falli congue pertinacia, nam vituperatoribus appareat putent in. Vix diceret philosophia et. Vis tantas concludaturque ei, no saperet corpora sed. Has congue delicata persequeris ne, ut ipsum velit inciderint sea. Te melius detracto similique pri, mei eius dolore patrioque ad.<br />
<br />
Qui no scripta voluptatum, et paulo adipisci mei, assum verear impedit ei vel. Vis ad veritus instructior concludaturque. Cum ut ferri definiebas interesset. Mel wisi prompta accumsan ne. Qui reque sapientem similique at, modo aeque lobortis ad duo. Nusquam accusamus vix ut, nam ea alterum partiendo.<br />
      </div>
    <div class="comments">Comments (0) | </div>
</div><br />
<div id="news_article_1" class="box">
<div class="header">News Story Post #1</div>
    <div class="subheader">5:38PM Thursday, January 17, 2008 | Posted by  | </div>

    <div class="content"><a href="index.php?what=news&category=1">
<img src="./uploads/images/original/site_news.gif" alt="Site News" align="left" border="0" /></a>
Eos cu consul timeam oportere, omnium sanctus verterem ut eos. Te mel regione labitur theophrastus, an vim nihil ancillae, ut duo idque propriae.</div>
    <div class="comments">Comments (0) | </div>
</div><br />
		</td>

        </tr>
</table>

<div id="footer">
<div class="top_bar">
    	
    </div>
    <div id="copyright">
    	<span class="block_left">
        <b>© 2004-2008 . All Rights Reserved.</b><br />
        </span>
        <span class="block_center">
        All logos and trademarks are property of their respective owners. All posts are property of their poster. All other content © 2008 by My Site.
        </span>
        <div class="block_right">
        
        </div>

</div>
</div>
</div>
</body></html>

[Axcelcius]

Found the problem. Needed to change CSS from:

 

//Content Box Style

.box{
width: 100%;
position: relative;
border: 1px solid #31519F;
}

 

To:

 

/*Content Box Style*/

.box{
width: 100%;
position: relative;
border: 1px solid #31519F;
}