Div breaking through image

Forum Moderators: not2easy

Message Too Old, No Replies

Div breaking through image

div not allowing content to cover the rest of the image

mvaz

10:02 am on Mar 30, 2011 (gmt 0)

Dear all, I have a div with a border bottem and this div has an image and content that relates to it. However, if the content covers an area that is lesser than the image size, the bottom border instead of showing up after the entire image and content, is displayed in the middle of the image.

Any help in resolving this issue will be greatly appreciated.

Thanks

MV

birdbrain

10:43 am on Mar 30, 2011 (gmt 0)

Hi there mvaz,

as you have not supplied us with the relevant HTML and CSS
we can only make guesses for the solution to your problem. :(

Please help us to help you. ;)

birdbrain

mvaz

12:11 pm on Mar 30, 2011 (gmt 0)

Sorry, here is the css:
.col_lt {width:530px; float:left; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; color:#003300; } //This is the container for the left col where the said issue is.
.col_lt div {font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; color: #FF3300; margin:2px 10px 0 20px; } //This is the div that contains the text that is in question.
.img_lft {float:left; margin:2px 4px 2px 20px;} //This is the css for image positioning

Here's the html code:
<div class="col_lt">
<h1>Header Text here</h1>
<img src="../images/logo_top.gif" class="img_lft" />
<div>Iste quidem veteres inter ponetur honeste, qui vel mense brevi vel toto est iunior anno. Utor permisso, caudaeque pilos ut equinae paulatim vello unum, demo etiam unum, dum cadat elusus ratione ruentis acervi, qui redit in fastos et annis miraturque.</div>
</div>

birdbrain

12:36 pm on Mar 30, 2011 (gmt 0)

Hi there mvaz,

I can see no border-bottom in the CSS that you provided. :(

I used this code....


<!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=iso-8859-1"> 
<meta name="language" content="english">  
<meta http-equiv="Content-Style-Type" content="text/css"> 
 
<title>untitled document</title> 
 
<style type="text/css"> 
.col_lt { 
 width:530px;  
 float:left;  
 font-family:verdana,arial,helvetica,sans-serif;  
 font-size:11px;  
 color:#030;
 border-bottom:1px solid #000; 
 } //This is the container for the left col where the said issue is. 
.col_lt div { 
 font-family:verdana,arial,helvetica,sans-serif;  
 font-size:11px;  
 color: #f30;  
 margin:2px 10px 0 20px;  
 } //This is the div that contains the text that is in question. 
.img_lft { 
 float:left;  
 margin:2px 4px 2px 20px; 
 } //This is the css for image positioning  
</style> 
 
</head> 
<body> 
 
<div class="col_lt"> 
 
<h1>Header Text here</h1> 
 
<img src="../images/logo_top.gif" class="img_lft" alt="logo"> <!--added required alt --> 
 
<div> 
Iste quidem veteres inter ponetur honeste, qui vel mense brevi vel toto est iunior anno.  
Utor permisso, caudaeque pilos ut equinae paulatim vello unum, demo etiam unum,  
dum cadat elusus ratione ruentis acervi, qui redit in fastos et annis miraturque. 
</div> 
 
</div>  
 
</body> 
</html>

...and found that the border was under the text. ;)

Am I missing something?

birdbrain

mvaz

12:52 pm on Mar 30, 2011 (gmt 0)

Sorry again, I missed that bit of css whilst copying the code.

I will try this again and let you know how it shows.

Thanks a lot @birdbrain

mvaz

1:21 pm on Mar 30, 2011 (gmt 0)

That's working fine @birdbrain, I don't really know what happened previously. Thanks for reviewing the code.

birdbrain

1:30 pm on Mar 30, 2011 (gmt 0)

No problem, you're very welcome. ;)