Normal Flow, Floats, Relative Positioning Questions

**PowerBit** · May 19, 2009, 10:13

Hi there guys and gals!

Well I have a layout where I want to place transparent elements over the top of a back ground image. So my logo and header image would be placed over a background div.

I have started to play with it a little and I floated two divs and they are now out of normal flow and the back ground image is not showing through.

I have provided my code. Would some one be willing to suggest an approach?

Thanks for your input!

CSS

HTML Code:

/* stylesheet-1 Document */

body {
 background: #fff; 
 font:76% arial, verdana, helvetica, sans-serif;
}

* { margin:0; padding:0;
}

#wrapper {width:1006px; margin:0 auto;
}

#logo {background: #000 url(logo.jpg) top left no-repeat; width:250px; height:120px;
float:left;
}
#banner {background: #000 url(header.png) top left no-repeat; width:756px; height:120px;
float:left;
}

/* ------- Section Pages ------- */

#environment {background: #000 url(bg-pink.jpg) no-repeat; width:1006px; height:750px;
}

HTML

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>
<title>New Man Test</title>
<meta name="keywords" content="" />
<meta name="description" content=""  />
<meta name="title" content="" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="includes/stylesheet-1.css" />
</head>
<body>
<div id="wrapper">
   <div id="environment">
      
	  <div id="logo"></div>
      <div id="banner"></div>

   </div>
</div>

</body>
</html>

**PowerBit** · May 19, 2009, 10:15

So the two elements floated left are no longer in the containing block of the #environment. Would I relatively position these to place them over the #environment background image?

User Tag List

Thread: Normal Flow, Floats, Relative Positioning Questions

Thread Tools

Display

Normal Flow, Floats, Relative Positioning Questions

Bookmarks

Bookmarks

Posting Permissions