Image float problem

O-Dog · 20 Mar 2006 at 13:26

Hi, i have a funny with my html. I float two images, one left, one right. I then follow the images with a other_content div where i clear both sides to get rid of the float. I also have a 20px margin so the div should have a gap of this size from the pictures, however on my computer (both firefox and ie) the margin is not displayed. To further confuse the issue ie displays it correctly on this machine (this version of ie6 is an older build however)!! Any ideas as to what i am doing wrong? How can i get the gap to appear across all browsers?

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" >

<style type="text/css" media="screen">

* {
padding:0;
margin:0;
}

#container {
	position:relative;
	text-align:left;
	margin: 0 auto;
	width: 500px;	
	margin-top:20px;
	border: dashed 1px black;
}

#content
{
}

#other_content
{
clear: both;
margin-top:20px;
border: 1px solid blue;
}

#pic1
{
float: left;
}

#pic2
{
float: right;
}

</style>

<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<title>Untitled Document</title>
</head>

<body>
	<div id="container">
	  <div id="content">
	    <p>content here <img id="pic1" src="book_online.gif" alt="" width="102" height="45" /><img id="pic2" src="book_online.gif" alt="" width="102" height="45" /></p>
		</div>
		<div id="other_content"><p>here is another line!</p></div>
	</div>
</body>
</html>

the page can also be found here http://www.monsterserve.net/testing/imgtest/imagetest.html

Thanks in advance,

Chris

Image float problem

O-Dog

O-Dog