Heading BG image, floated DIV

**jilkab** · Sep 4, 2007 19:59

I am working on a page, and I have images inside of DIV's which I can float to the right or left. This works fine, and text wraps around it fine, but I am using a background image to give an icon to all of my headings.

When I have a heading next to a left-floated image, the text is properly wrapped and indented, but the image is over on the very left edge of the page, underneath the floated image.

What can I do to get this background image into the proper position? I am guessing that there is a simple solution to this problem that is probably resulting from a misunderstanding on my part of element positioning and sizing.

Internet Explorer 6, no doubt due to a buggy implementation, positions the image as I want it, but Firefox and Safari do not.

Relavant CSS:

Code CSS:

div.imgleft {
    float:left;
    font-style:italic;
    text-align:center;
    font-size:10px;
    margin:4px;
}
 
div.imgright {
    float:right;
    font-style:italic;
    text-align:center;
    font-size:10px;
    margin:4px;
}
 
h3 {
    font-weight:bold;
    font-size:14px;
    background:url(arrowhead.png) no-repeat;
    text-indent:36px;
    line-height:32px;
    height:32px;
}

HTML:

Code HTML4Strict:

<p>lots of text here</p>
<div class="imgleft"><img src="picture.png" width="100" height="100"></div>
<h3>Heading</h3>
<p>more lines of text here</p>

**all4nerds** · Sep 4, 2007 23:52

Hello

You can't ? because only text wraps, background colors/images, borders, will drop under the float
Positioning the background images, left right as wide as image + margins, probably presents a maintenance problem

Make the header always fit between with a overflow auto, not wrapping
Make use of how IE behaves, and it needs some more code to kill the 3 pixel jog of IE < 7

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" xml:lang="en" lang="en">
<head>
<title>12345 12345 12345 12345 12345</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<!-- saved from url=(0022)http://www.domain.com/ -->
	<style type="text/css">
	*{padding:0;margin:0;}
	
	.imgleft,.imgright{
	font-style:italic;
	text-align:center;
	font-size:10px;
	}
	
	.imgleft img,.imgright img{margin:4px;}
	
	.imgleft {float:left;}
	
	.imgright {float:right;}
	
	h3{
	overflow:auto;
	font-weight:bold;
	font-size:14px;
	background: url(http://www.google.nl/images/firefox/fox1.gif) no-repeat;
	text-indent:36px;
	line-height:32px;
	height:32px;
	}
	* html .imgleft{left:3px;position:relative;margin-left:-3px;}
	* html .imgright{left:-3px;position:relative;margin-right:-3px;}
	
	.x{text-align:right;}
	</style>
	<script type="text/javascript">

	</script>
</head>
<body>

<p>lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here </p>

<div class="imgleft"><img src="http://www.google.nl/images/firefox/fox1.gif" alt="" width="100" height="100" /></div>

<h3>Heading</h3>

<p>more lines of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here </p>

<div class="imgright"><img src="http://www.google.nl/images/firefox/fox1.gif" alt="" width="100" height="100" /></div>

<h3>Heading</h3>

<p class="x">more lines of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here </p>

</body>
</html>

wrap demo with borders background under float ( first on top )

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" xml:lang="en" lang="en">
<head>
<title>12345 12345 12345 12345 12345</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<style type="text/css">
	*{padding:0;margin:0;}
	
	.wra{width:768px;background:#ffffcc;overflow:hidden;}
	
	.l{float:left;width:200px;height:200px;border:1px solid #000000;}
	
	.x{border:1px solid #000000;background:#ccccff;}
	
	.y{overflow:auto;} * html .y{height:1&#37;;}
	* html .ll{float:left;}
	</style>
</head>
<body>

<div class="wra">
<div class="l"></div>
<p class="x">Test Text Test </p>
<p>
Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
</p>
</div>
<p>&nbsp;</p>
<div class="wra">
<div class="l"></div>
<p class="x y">Test Text Test </p>
<p>
Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
</p>
</div>
<p>&nbsp;</p>
<div class="wra">
<div class="l"></div>
<div class="ll">
<p class="x y">Test Text Test </p>
<p class="y">
Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
</p>
</div>
</div>

</body>
</html>

**jilkab** · Sep 5, 2007 05:24

Thanks a lot for the help.

Code CSS:

overflow:auto;

fixed the issue, and my page looks much better now!

User Tag List

Thread: Heading BG image, floated DIV

Thread Tools

Display

Heading BG image, floated DIV

Thanks

Bookmarks

Bookmarks

Posting Permissions