Images breaking out of div

HTML & CSS
1

This may be a simple fix, but I’m stumped :slight_smile:

I have a basic DIV within which I need a photo and text paragraph. The DIV displays fine when there’s no image, but as soon as there is I get the following:

As you can see, its too big for the DIV, and so pushes outside it (this is the same for both Firefox and IE).

This is a relevant example bit of HTML:


  <div class="property"><a name="27"></a>
 <a href="filename.htm" title="title text here"><img src="/photos/photo.jpg" border="0" align="left" hspace="5"> Anchor text here</a><br />
A descriptive phrase that can run to 3 or 4 lines. A descriptive phrase that can run to 3 or 4 lines. A descriptive phrase that can run to 3 or 4 lines. A descriptive phrase that can run to 3 or 4 lines. <br />
  <a href="filename.htm">Read more...</a>
  </div>

And the CSS in question:

.property {
  	background-color: #DBE1EA;
  	padding: 8px;
  	margin-top: 5px;
  	margin-bottom: 10px;
  	border: thin solid #6699CC;
  	clear: left;
  }

Any ideas on a quick fix?

1 Like
2

set the height of the div to greater than the image

3

I don’t want to do that, as not all divs will contain images.

4

adding a height property to the image, ether in the CSS (.property img { height: ?px;}) or just in the HTML may help here.

5

Is your image floated? (I suspect it is) If so, have a look here.

6

No, it’s a run-of-the-mill img tag, with a left alignment :frowning:

7

OK. Can you give us a link?

8

Unfortunately, no - it’s an unfinished client site. But all the relevant code is (or should be) in my first post…

Thanks for taking the time to respond:)

9

Is this what you want?

img {
 border-style:none;
 margin: 0; padding: 0 5px 0 0;
 float: left;
}

.clear { clear: both };

.property {
      background-color: #DBE1EA;
      padding: 8px;
      margin-top: 5px;
      margin-bottom: 10px;
      border: thin solid #6699CC;
      clear: left;
  }

<div class="property"><a name="27"></a>
<a href="filename.htm" title="title text here">
<img src="/photos/photo.jpg">Anchor text here</a><br />
A descriptive phrase that can run to 3 or 4 lines. A descriptive phrase that can run to 3 or 4 lines. A descriptive phrase that can run to 3 or 4 lines. A descriptive phrase that can run to 3 or 4 lines. <br />
  <a href="filename.htm">Read more...</a><br class="clear" />
  </div>

You may or may not need the clearing <br> in the end.

Btw, don’t start classes, ids or names with number.

10

OK. Just an idea (as I can’t play with your page and try it myself) - have you tried adding ‘position:relative’ to that class?

11

Hi,

Joorigami and Bon Rouge were both right in there assumptions that the elemnt needs clearing. You said it isn’t floated but align=“left” when used on the image is the same as floating left and in old html (deprecated in xhtml1) you would normally add <br clear=“all” />

The ccs equivalent is as jorigami posted and as bon rouge linked to :slight_smile:

To make sure there is no extra space when clearing (as in <br style=“clear:both” /> you can use the following method.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd](http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd)">
<html xmlns="[http://www.w3.org/1999/xhtml](http://www.w3.org/1999/xhtml)">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style>
.property {
	  background-color: #DBE1EA;
	  padding: 8px;
	  margin-top: 5px;
	  margin-bottom: 10px;
	  border: thin solid #6699CC;
	  clear: left;
  } 
.clearer{
 height:1px;
 overflow:hidden;
 margin-top:-1px;
 clear:both;
}
</style>
</head>
<body>
<div class="property"><a name="27"></a>
<a href="filename.htm" title="title text here"><img src="/photos/photo.jpg" border="0" align="left" hspace="5"> Anchor text here</a><br />
A descriptive phrase that can run to 3 or 4 lines. A descriptive phrase that can run to 3 or 4 lines. A descriptive phrase that can run to 3 or 4 lines. A descriptive phrase that can run to 3 or 4 lines. <br />
  <a href="filename.htm">Read more...</a>
  <div class="clearer"></div>
  </div> 
</body>
</html>

Bon Rouge also shows alternative methods for mozilla but this time ie also needs the clear so you may as well stick with my version :slight_smile:

Paul

12

Thanks guys, really appreciate it!

Did it work? 99% :wink: Because there’s a right-side column, the first div stretch to match the height of the column (in Firefox), and the others were rendered fine. So, I changed the clear:both to clear:left, and now it renders in both Firefox and IE perfectly!

Thanks again; another nice little trick to put in my arsenal :slight_smile: