Divs causing problems. Image and paragraph issue.

**wizardswitch** · Aug 27, 2007 03:14

Hello,

I'm having some trouble with a CSS layout I'm designing. The top section of my layout has an image on the left with a paragraph on the right. It works fine on Firefox and IE7, but not on IE6.

The problems arise due to another div below #topcontent (see below) that seems to want to wrap up to the available spaces (especially on IE6), etc.
I want to the image/paragraph area to interact correctly with any divs below it.

I *know* there must be a better way of doing this because I'm having to set a height for it to work on Firefox/IE7 and whilst it looks OK, the height causes problems of its own when rezising text (as the resized text spills over the height - which is fixed in this case).

For some reason I seem to be using the image as a background image, set at the correct width/height. I hope I've explained myself OK I can see how this might be complicated to understand when you're not sat here!

Here is XHTML/CSS:
--------------------

<div id="topcontent">

<div id="imageontheleft">
</div>

<div id="textontheright">
<p>A paragraph of text goes here.</p>
</div>

</div>

----

#topcontent {
width: 100%;
margin: 10px 0 0 0;
}

#imageontheleft {
width: 280px;
height: 150px;
float: left;
background-image: url(image.gif);
background-repeat: no-repeat;
margin: 0 7px 0 15px;
}

#textontheright {
width: 450px;
height: 150px;
float: right;
}

**Centauri** · Aug 27, 2007 07:52

How about doing away with the floated divs completely, and just styling the paragraph itself - html:

Code:

<p class="item">A paragraph of text goes here</p>

and css:

Code:

.item {
	padding-left: 290px;
	display: block;
	min-height: 150px;
	background-image: url(image.gif);
	background-repeat: no-repeat;
	background-position: left center;
}
* html .item {
	height: 150px;
}

This sets a minimum height on the paragraph (with a hack to make it work in IE6) and a left padding to make room for the image as a background to the left of the text.

**tenfingers** · Aug 27, 2007 12:57

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#topcontent {
	border:1px solid #ccc;;
}
#topcontent p {margin:0}
#topcontent img {
	float:left;
	width:280px;
	margin:0 7px 0 15px;
}
.clearfix:after { 
	content:"."; 
	display:block; 
	height:0;
	clear:both; 
	visibility:hidden; 
}  
.clearfix { 
	display:inline-block; 
} 
</style>

<!--[if lt IE 7]> 
<style type="text/css"> 
/* \ */ 
* html .clearfix {height: 1&#37;;} 
.clearfix {display: block;} 
/* / */ 
</style> 
<![endif]-->
</head>

<body>
<div id="topcontent">
<p class="clearfix"><img src="image.gif" width="280" height="150" title="" alt="" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque ornare metus. Duis at felis. Vestibulum nibh. Phasellus dictum tortor in mi placerat scelerisque. Donec blandit turpis ac quam. Nullam nisi. Maecenas odio odio, dignissim eget, tincidunt sollicitudin, commodo ac, odio. Cras pharetra, ante ac dignissim porta, mauris ante vestibulum sem, vel euismod leo dui eu sapien. Maecenas turpis nunc, sollicitudin vel, placerat ac, pulvinar sed, urna. Nunc a dui. Phasellus in magna at odio luctus aliquet.</p>
</div>
</body>
</html>

See How To Clear Floats Without Structural Markup

Since you're using CSS backgrounds in your example, Centauri has shown a method that will give the appearance of a floated image, i.e.,

HTML Code:

#topcontent {
background:transparent url(image.gif) no-repeat 1% 50%;
padding:0 0 0 302px;
}

However, there will be a left margin 302px all the way down to the bottom of the div. Also, with a floated image, height is not an issue, since the image is 150px, and as a contained (and cleared) float, will expand the div to include the full height. Using the CSS background, height will be a factor.

User Tag List

Thread: Divs causing problems. Image and paragraph issue.

Thread Tools

Display

Divs causing problems. Image and paragraph issue.

Bookmarks

Bookmarks

Posting Permissions