471,870 Members | 1,354 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,870 software developers and data experts.

CSS background color not working properly

Good afternoon

i am a newbe.. I have tried to create a small site with the following code:
<!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">

<meta content="en-us" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<style type="text/css">
#page {
background-color: #FFFFFF;
margin-right: auto;
margin-left: auto;
border: 2px solid #008000;
font-family: Gabriola, "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
width: 97%;
max-width: 1200px;
#banner {
background-color: #3366FF;
width: 100%;
height: 150px;
#body {
width: 100%;
height: auto;
margin-top: 10px;
#leftnavpanel {
float: left;
width: 20%;
background-color: #008000;
margin-top: 2px;
margin-right: 1px;
margin-bottom: 2px;
padding-left: 10px;
#content {
width: 78%;
height: auto;
float: right;
border: thin solid #00FF00;
background-image: none;

<body style="background-color: #8B8878">
<div id="page">
<div id="banner"></div>
<div id="body">
<div id="leftnavpanel">asdasd<br />
asd<br />
<div id="content">asdasd<br />
asd<br />
However, the problem that I am facing is because the color white [ffffff] that was given in upper element -div page - is not working properly. the lowers divs are not getting the color white as background, in stead they are getting the defaut body tag color. and more over expression web is displaying this perfectly in work area, but when comes to IE and Mozilla preview it is failing.

Could you please help me.
Attached Files
File Type: zip previews.zip (36.0 KB, 158 views)
Nov 6 '09 #1
10 11349
8,658 Expert Mod 8TB
I guess itís because itís floated (and the parent element does not stretch wide enough)Ö
Nov 6 '09 #2
Thank you for the reply Dormilich, however, I want the last div to float right else this div would come down the berfore one. We can solve this by using table, however, i prefer not to use table, could you/anyone please advice on a solution.

Thank you very much.
Nov 6 '09 #3
8,658 Expert Mod 8TB
why donít you define the colour manually?
Nov 6 '09 #4
You meen the background color of the last div. I can do that, however, the gap between the last div and the its before div is about 2% which would result in displaying the page color instead of the color I want.

Thanks for the reply and looking forward :)
Nov 6 '09 #5
7,435 Expert 4TB
Background color is working properly here. This property cannot be inherited by child divs.
Nov 6 '09 #6
8,658 Expert Mod 8TB
what about closing that gap in the CSS?
Nov 6 '09 #7
Thank you for the reply guys, however, as Dormilich said, I could use CSS to cover gaps, this would not ba a perfect solution; if I want to create a single marging at the bottom of both these divs, it would not coincide properly because the left nav div would be lot more smaller than the content div.

Thank you Dormilich and drhowarddrfine for the replies and look forward to hear :)
Nov 6 '09 #8
8,658 Expert Mod 8TB
you define a 2% gap between the floats
Nov 6 '09 #9
Hi Dormilich,

Thank you for all the replies. however, in defining sizes, I did not use px, I used %, this means, the 2 would be correct, however, if I now or later define a border for the div, then the 2% would vary and the last div would be dispositioned to downward.

Thank you once again.
Nov 6 '09 #10
Hi Dormilich,

Thank you for explaining what Float is in the above replies. I now came to know what float is. So,, no i have a simple solution.

Just define a div at the end of all divs, this way even if other divs float, the parent div would know till where the last div is and the backgriound color would spread out.

Thank you every one for your support..........
Nov 6 '09 #11

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

3 posts views Thread by Felix Natter | last post: by
14 posts views Thread by Schraalhans Keukenmeester | last post: by
3 posts views Thread by =?Utf-8?B?aXdkdTE1?= | last post: by
18 posts views Thread by LayneMitch | last post: by
reply views Thread by NeoPa | last post: by
reply views Thread by YellowAndGreen | last post: by
reply views Thread by aboka | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.