PDA

View Full Version : Two DIVs colums and background image problem



agentm
Mar 15th, 2010, 06:02 PM
Hi,

Im banging my head against the wall with this simple senario:

I want two divs to form two colums for the header of my page.
The page must span over 85% browser width. The left DIV contains
a logo as background image. No problem so far.

The right DIV (#Header) must fill the rest of the browser with a background image that repeats. Then also inside this DIV I want another image that floats to the right.

I get the image to float...but there is a white space between the logo and image right. Somehow the CSS code wont let the background image repeat itself behind the image for the remainder of the DIV width.

Here is the code:



<body>
<div id="page-container">

<div id="logo"></div>

<div id="header">
<img src="images/index_03.jpg" width="444" height="115" title="" alt=""/>
</div>
</div> <!----- End of page-container --->
</body>



CSS



#logo {
float: left;
width: 237px;
height: 137px;
background-repeat: no-repeat;
background-image: url(images/logo.jpg);
}

#header {
display: block;
width: 100%;
background-repeat: repeat-x;
background-image: url(images/header.jpg);
}

#header img{
float: right;
}

agentm
Mar 15th, 2010, 06:11 PM
Solved the problem.... I needed to set the height for the background image.

Excavator
Mar 15th, 2010, 06:20 PM
Hello agentm,
If you're wanting the logo, background image and index_03.jpg in the header together, you are layed out a little wrong.
Have a look at this -
<!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">
html, body {background: #fc6;}
#page-container {
width: 85%;
margin: 30px auto;
padding: 20px 0 300px;
background: #ccc;
}
#header {
display: block;
width: 100%;
overflow: auto; /*to clear the float*/
background: #fff url(images/header.jpg) repeat-x;
}
#logo {
float: left;
width: 237px;
height: 137px;
background: url(images/logo.jpg);
}
#header img{float: right;}
</style>
</head>
<body>
<div id="page-container">
<div id="header">
<div id="logo"></div>
<img src="images/index_03.jpg" width="444" height="115" title="" alt=""/>
</div>
<!--end page-container--></div>
</body>
</html>