DIV background color

HTML & CSS
1

Hey guys, I’m very new to CSS, so please excuse if my question is a bit elementary.

I’m busy with laying out a fictitious website, just for learning layout and positioning. What I want to do, is first lay out all my empty divs on the page, each one with a different colour, so I can clearly see what happens with the positioning.

Something like this:


The problem is, it seems I can’t give an empty div a background-color in my style sheet.

<div id="wrapper">
		<div id="container">
			<div id="navigation">
			</div>
			<div id="header">
			</div>
			<div id="content">
			</div>
			<div id="links">
			</div>
			<div id="footer">
			</div>
		</div>
	</div>

And my style sheet just this for every div:

#wrapper {
	background-color: red:
}

But it’s not working. Is is so that an empty div can’t have a background color? In previous layout exercises I’ve noticed that the parent div can’t have a background-color, but the divs inside it can.

What to do? What to do?

2

But it’s not working. Is is so that an empty div can’t have a background color? In previous layout exercises I’ve noticed that the parent div can’t have a background-color, but the divs inside it can.

That’s correct, if there is nothing in the div then there is no height, hence no BG color.

What to do? What to do?

Just set min-height: on the divs to hold them open or go a head and place some test text in them.

3

Thanks you, Rayzur!

I appreciate it! :slight_smile:

4

I just wrote the code to go with the image that you provided.

Do you want to see it or try it yourself first since you are doing it for practice? :slight_smile:

5

Let me have a quick peek :wink:

6

Okay, I didn’t want to spoil it for you without asking first.

Building practice pages is good to do, it will help you get a grasp on layout concepts.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test Page</title>

<style type="text/css">
body {
    margin:0;
    padding:0;
    font: 100%/1.3 arial,helvetica,sans-serif;
    background:#3F6A8A;
}
#wrap {
    width:900px;
    margin:0 auto;   
    /*temporary text styles below*/
    text-align:center;
    font-weight:bold;
    color:#FFF;
}
#nav {
    min-height:50px;
    background:#148CE2;
}
#header {
    min-height:200px;
    background:#A71D1D;
}
#main {
    width:100%;/*IE6 haslayout (contain floats)*/
    overflow:hidden;/*contain child floats in modern browsers*/
}
    #content {
        float:left;
        width:600px;
        min-height:200px;
        background:#FFCC00;
    }
    #links {
        float:left;
        width:300px;
        min-height:200px;
        background:#62C014;
    }
#footer {
    min-height:50px;
    background:#148CE2;
}
</style>

</head>
<body>

<div id="wrap">
    <div id="nav">Navigation</div> 
    <div id="header">Header</div>
    <div id="main">
        <div id="content">Main Content</div>
        <div id="links">Side Links</div> 
    </div>
    <div id="footer">Header</div>
</div>

</body>
</html>
7

Hi Rayzur

Thanks for the markup. I understand it - fortunately :slight_smile: - but as soon as I did it on my side, I ran into a problem.

I know setting the margin and padding to 0 in the body selector in my stylesheet takes away that thin gap at the top, which is a browser default, and I put it into my markup, but it’s not taking effect for some reason.

Have a look here:

http://www.ernabeetge.com/

Here’s my HTML:


<!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></title>
		<meta http-equiv="Content-Type"
			content="text/html; charset=utf-8"/>
		<link href="0001style.css" rel="stylesheet" type="text/css"/> 
	</head>

	<body>
	
		<div id="container">
			<div id="navigation">
			</div>
			<div id="header">
			</div>
			<div id="content">
			</div>
			<div id="links">
			</div>
			<div id="footer">
			</div>
		</div>

And here is my CSS:


body {
	margin; 0;
	padding: 0;
	background-color: #668ca6;
}

#container {
	width: 800px;
	height: 800px;
	background-color: #ffffff;
	margin: 0 auto;
	padding: 0;
}

Am I missing something somewhere?

Oh, and did I mention thank you for your effort with the markup!

8

Hi,
It looks like a simple error. You have a semi-colon after your margin property on the body selector, it should be a colon.


body {
    margin[SIZE=4][COLOR=Red];[/COLOR][/SIZE] 0;
    padding: 0;
    background-color: #668ca6;
}

You also have an incomplete closing of the body element in the html

</body

Should be:

</body>

9

Ah, sheesh! Now it’s working. I should really pay more attention.

Thanks Rayzur.