Div not showing background color

**gottijay2000** · 04-07-2015, 08:00 PM

i'm very new to css and i'm still trying to get a hang of things work. what i'm trying to do should be simple, but i don't understand why its not working.

i have a banner div from my code below which i set to have a background color of yellow just so i know its there . i just can't seem to figure out why the div is not displaying. Can anyone please help!!!

thanks

HTML Code:

body {
	font-family: arial, sans-serif;
	background-image: url("dark-canvas.gif"); 
	padding: 0;
	margin: 0;
	/* max-width: 100%; */
}


#header {
	position: fixed;
	width: 100%;
	background-color: black;
	height: 70px;
	z-index: 10;
	/*overflow: auto; */
}

#icons {
	float: right;
	padding-right: 10px;
	}

#banner {

	background-color: yellow;
	height: 50px;
	
}

HTML Code:

<html>

<HEAD>
		
		<title>My test script</title>
		<link href="./bukotest.css" rel="stylesheet" type="text/css">

		
</HEAD>

<BODY>
<!-- <div id="main"> -->



	<div id="header">
		<div>
			<img src="twitter-icon.png">
		</div>
		<div>
			<img src="twitter-icon.png">
		</div>
		<div>
			<img src="twitter-icon.png">
		</div>
		<div id="icons">
			<img src="twitter-icon.png">
		</div>

	</div> <! end of header ->

	<div id="banner">
		<img src="twitter-icon.png">
	</div>

	


</BODY>


</html>

**Beverleyh** · 04-07-2015, 08:28 PM

It's hiding behind your black header

The reason for this is that the header has a fixed position, which pulls it out of the normal flow of the document. On its own - right at the top of the markup in the body section - it doesn't make much difference, but as soon as other elements are added, the behaviour becomes more obvious. The next element in your markup - yellow banner - acts like it isn't there, and sits in the flow of the web page, which for it is right at the top of the document. The header has a greater height so it covers it (remove the header's background colours and you'll see the yellow banner peeping through.)

So now you need to decide where to display the yellow banner. If you want it to take up normal flow but have it show under the banner, give it a relative position and place it 70px from the top;

Code:

#banner {
	background-color: yellow;
	height: 50px;
	position: relative; 
	top: 70px;	
}

This may or may not be what you want to achieve but I hope it helps explain some of the behaviour and starts you out with learning how positioning works

More info http://www.barelyfitz.com/screencast...s/positioning/