100% horizontal color band in CSS

Hi folks,

Being new to CSS formatting, I’ve been trying to figure out a way to make a multi-colored horizontal band which sticks to the top of a page. Take this page for example, instead of just having the orange colored horizontal top bar/band, I need a multi colored one (5-6 colors max).

I’ve coded a couple of styles like so:

.col1 {
width: 15%;
height: 44px;
background-color: blue;
}

.col2 {
width:25%;
height: 44px;
background-color: red;
}

However, getting it displayed properly is the difficult part. I’ve tried using:

<span class=“col1”></span>

As well as:

<div class=“col1”></div>

Span works in IE, but doesn’t SPAN properly to the entire page, while FireFox doesn’t even render it. DIV OTOH renders one element below another.

Anyone kind enough to shed some light on this?

Any help is greatly appreciated.

Thanks!

Use a table.

Hi,

Do you mean something like this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd](http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd)">
<html xmlns="[http://www.w3.org/1999/xhtml](http://www.w3.org/1999/xhtml)">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
html, body {margin:0;padding:0}
#outer {width:100%;height:50px;background:red}
#col1, #col2, #col3, #col4, #col5 {
 float:left;
 width:16.6%;
 background:#FFFFCC;
 height:50px;
}
#col2{background: #FFCCCC;}
#col3{background: #FF99CC;}
#col4{background: #FF66CC;}
#col5{background: #FF00CC;}
.clearer {
 height:1px;
 overflow:hidden;
 clear:both;
 margin-top:-1px;
}
</style>
</head>
<body>
<div id="outer"> 
  <div id="col1"></div>
  <div id="col2"></div>
  <div id="col3"></div>
  <div id="col4"></div>
  <div id="col5"></div>
  <div id="clearer"></div>
</div>
</body>
</html>


Paul

Paul: OMG. That’s exactly what I wanted!!! Thanks dude! And the clearer class is an added bonus as I need another sub header right underneath it :slight_smile: