PDA

View Full Version : Height and background problems with divs



BarrMan
Jul 9th, 2009, 07:29 AM
Hey, I'm having a few problems with coding my css layout.
I would like to have a background image to the entire site which works fine, then I would like to have the header of the page with another background image, that works fine too. Now the problem is that after the header with the image and the navigation bar (NavBar) the white background color doesn't apply and it changes to viewing the remains of the entire site's background image.

I've found out what's causing the problem, when I give to #News div the property float, it suddenly starts but when I remove it, the white background color continues properly.

Here's the code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Current Art - <?=$username?>'s HomePage</title>
<link rel="stylesheet" type="text/css" href="../style.css" />
</head>
<body>
<div id="Container">
<div id="Header">
</div>
<ul id="NavBar">
<li><a href="test.php">Home</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div id="Content">
<div id="News">
<h3>News & Events</h3>
This is the news page. News will be viewed in this very box.
</div>
</div>
</div>
</html>

Here's the css:

*
{
margin:0;
padding:0;
}
body
{
margin:0;
padding:0;
background-color:#FFFFFF;
background-image: url(imgs/bg.jpg);
background-attachment: fixed;
background-repeat: repeat-x;
}
div#Container
{
width:800px;
height:100%;
margin:auto;
background-image:url(imgs/mainbg.jpg);
background-repeat:repeat-y;
background-color:white;
clear:both;
}
ul
{
list-style-type:none;
}
div#Header
{
clear:both;
height:210px;
background-image:url(phpThumb/phpThumb.php?src=../imgs/logo-jaffa.jpg&w=481&h=210);
width:481px;
}
ul#NavBar
{
width:800px;
height:50px;
}
ul#NavBar li
{
display:block;
float:left;
line-height:47px;
margin-left:160px;
}
div#Content
{
width:800px;
clear:both;
background-color:Lime;
height:auto;
}
div#News
{
float:left;
margin-top:10px;
border:1px solid black;
width:200px;
height:300px;
}


Any help appreciated.

abduraooft
Jul 9th, 2009, 10:12 AM
Could you post a link to your page? It's hard to understand the issue without those images involved.

BarrMan
Jul 9th, 2009, 10:23 AM
Yes, of course, I forgot to do that. Here's the example page:
http://imri-tech.net/currentart/users.php

abduraooft
Jul 9th, 2009, 10:34 AM
Add
html, body {
height:100%;
} in to your CSS and then clear your floats (http://www.positioniseverything.net/easyclearing.html) (another link in CF sticky => http://www.codingforums.com/showthread.php?p=617640#post617640).

BarrMan
Jul 9th, 2009, 11:25 AM
Thanks. It fixed the #Container background-image but the #Content div still isn't Lime. How can I fix that?

Thanks!

abduraooft
Jul 9th, 2009, 11:32 AM
Please update your online version.

BarrMan
Jul 9th, 2009, 12:24 PM
Please update your online version.

Updated.

abduraooft
Jul 9th, 2009, 12:39 PM
Just add overflow:auto; to your div#Content which is another trick used for clearing floats (http://www.quirksmode.org/css/clearing.html). (Your float is on #News, so the clearing required just after that. I guess, you haven't followed those links carefully :))

PS: You have some unnecessary css properties. Actually you only need something like following

div#Container {/*style.css (line 25)*/
background-color:white;
background-image:url(imgs/mainbg.jpg);
background-repeat:repeat-y;
margin:auto;
min-height:100%;
width:800px;
}
body, html {/*style.css (line 6)*/
height:100%;
}