Getting the background color of container in all div's

**naqui** · 07-01-2010 01:04 AM

Below is code of a webpage.

HTML Code:

<html>
<head>
<title> Simple web page using division tags</title>
<style type="text/css">
<!--
body {
	background-color:#36F;
	
}
h1 {
	font-family: cambria;
	font-size: 22px;
}
p {
	font-family: calibri;
	font-size: 16;
}
ul {
	margin-left : 0px;
	padding-left : 0px;
}
li {
	text-align: center;
	list-style-type: none;
	padding :20px;
	margin : 0px;
}
li:hover {
	background-color: black;
	font-color: yellow;
}

#wrapper {
	width:960px;
	background-color: white;
	margin: auto;
	height: inherit;
}

#header {
	text-align : center;
	padding-top : 20px;
	width : 960px;
	height : 150px;
	background-color: pink;
}

#leftsb {
	float : left;
	width : 200px;
	background-color: grey;
	color: white;	
}

#rightsb {
	float : left;
	width : 300px;
	background-color: grey;
	color: white;
}
#content {
	float: left;
	width : 460px;
	background-color: inherit;
}	
-->
</style>


</head>
<body>
<div id="wrapper">

<div id="header">
	<h1>XYZ group of Industries</h1>
</div>

<div id="leftsb">
	<ul>

		
<li> Home </li>
		<li> Services </li>
		<li> About </li>
		<li> Contact </li>
		<li> Blog </li>
	
</ul>
</div>

<div id="content"> 
	<p> CSS stands for Cascading style sheets. CSS is used to style any web page. We can design webpages in the way we want it to show up in the browser.
	CSS is very easy to learn. Most of the designing work on web is done using css. CSS3 is the latest version of CSS which is in the developmet process right
	now. We may start using it by next year.
	</p>
</div>

<div id="rightsb">
<ul>
<li> Recent Posts </li>
<li> Most Popular </li>
<li> Archive </li>
<li> Tutorials </li>
<li> Articles </li>
</ul>
</div>

</div>
</body>
</html>

I have put all the div tags in a div with id=wrapper.

But when I load the page in any web browser I cannot see the background color of the wrapper div in all the divs.

How can I make the background color of all the divs by default to be that of wrapper div.

**tirna** · 07-01-2010 01:26 AM

I would use

Code:

 
background-color: inherit;

**naqui** · 07-01-2010 01:45 AM

I have given inherit value to background-color property of the #content div and I have also given some margins to the divs but background-color: white of the #wrapper div does not appear in the gaps of the div. Still the background color of the body appears.

Any solution for this.

HTML Code:

<html>
<head>
<title> Simple web page using division tags</title>
<style type="text/css">
<!--
body {
	background-color:#36F;
	
}
h1 {
	font-family: cambria;
	font-size: 22px;
}
p {
	font-family: calibri;
	font-size: 16;
}
ul {
	margin-left : 0px;
	padding-left : 0px;
}
li {
	text-align: center;
	list-style-type: none;
	padding :20px;
	margin : 0px;
}
li:hover {
	background-color: black;
	font-color: yellow;
}

#wrapper {
	width:960px;
	background-color: white;
	margin: auto;
	height: inherit;
}

#header {
	margin-bottom: 20px;
	text-align : center;
	padding-top : 20px;
	width : 960px;
	height : 150px;
	background-color: pink;
}

#leftsb {
	float : left;
	width : 200px;
	background-color: grey;
	color: white;	
}

#rightsb {
	float : left;
	width : 300px;
	background-color: grey;
	color: white;
}
#content {
	float: left;
	width : 420px;
	margin: 0 20px 0 20px;
	background-color: inherit;
}	
-->
</style>


</head>
<body>
<div id="wrapper">

<div id="header">
	<h1>XYZ group of Industries</h1>
</div>

<div id="leftsb">
	<ul>

		
<li> Home </li>
		<li> Services </li>
		<li> About </li>
		<li> Contact </li>
		<li> Blog </li>
	
</ul>
</div>

<div id="content"> 
	<p> CSS stands for Cascading style sheets. CSS is used to style any web page. We can design webpages in the way we want it to show up in the browser.
	CSS is very easy to learn. Most of the designing work on web is done using css. CSS3 is the latest version of CSS which is in the developmet process right
	now. We may start using it by next year.
	</p>
</div>

<div id="rightsb">
<ul>
<li> Recent Posts </li>
<li> Most Popular </li>
<li> Archive </li>
<li> Tutorials </li>
<li> Articles </li>
</ul>
</div>

</div>
</body>
</html>

**tirna** · 07-01-2010 02:05 AM

you asked in your first post

How can I make the background color of all the divs by default to be that of wrapper div.

If you give all the child divs in #wrapper the style background-color: inherit; then all the child divs should have the bg color of their parent div (wrapper).

Now since wrapper is 960px wide, if the <body> is wider than that, then the <body> bg color will appear around wrapper.

Thread: Getting the background color of container in all div's

Thread Tools

Display

Getting the background color of container in all div's

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions