Member Avatar for spookies

Hi All

Need some help with a positioning/alignment problem - divs not vertically aligning with body background image in IE:

http://www.flatsinbraunton.co.uk/ce/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Colin Essery Carpets</title>
<style type="text/css">

html {
	font-family:Helvetica,Arial,sans-serif;
}
body {
	font-family:Helvetica,Arial,sans-serif;
	text-align: center;
	background-image:url(images/bg-body.jpg);
	background-repeat:repeat-x;
}

#container {
   position: relative;
 	margin-left: auto;
 	margin-right: auto;
 	width: 800px;
 	text-align: left;
   }


#logo {
	position:absolute;
	left:0px;
	top:78px;
	width:327px;
	height:102px;

}
#headstrap {
	position:absolute;
	left:327px;
	top:78px;
	width:473px;
	height:102px;
}

img {
	border-style: none;
}


</style>
</head>
<body>
<div id="container">
	<div id="logo">
    	<a href="index.php"><img src="images/logo-main.gif" alt="Colin Essery Carpets - North Devon" width="328" height="102" /></a>
	</div>
	<div id="headstrap">
    	<img src="images/head-strapline.gif" alt="Colin Essery Carpets - North Devon" width="473" height="102" />
	</div>
</div><!--END CONTAINER DIV -->
</body>
</html>

Any help welcome

thanks

Rich

  • 3 Contributors
  • 2 Replies
  • 150 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by floatingDivs
Member Avatar for MindSter

Works perfectly in IE8 btw.

Member Avatar for floatingDivs

Figured out the problem. You didn't clear your floats.
Between #headstrap and #navbar (after #headstrap <div> ends and before #navbar <div> starts), place a new div such as this: <div style="clear:both;"></div> to "clear" your floated divs. After that, it should work 100% correctly.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.