Block Colour Header

[Joe.Morgan]

Ok im made a 10px header which is fluid and sits at the top of my site (im working on the new blue22 site btw)

and bascially i want it to look something like this but without using images and keeping it fluid

This isn't how i want it to look excatly but its the general idea. the text on the right will be and image and will just float as far right as the screen will let it.

anyidea how i can make this colourful banner i css making it fluid?

[Toon]

Make the back of you div black then insert the image float left and the other aligned right which will float left when the window is shrunk.

[Joe.Morgan]

www.blue22.co.uk/bluenew/index.html

i tried doing it with footer and created a seperate footer.css

html, body {
margin: 0;
padding: 0;
}

#header {
background: blue;
height: 10px;
}

#footer {
background-color: #CCCCCC;
clear: both;
height: 20px;
}

#page-container {
width: 800px;
margin-right: auto;
margin-left: auto;
}

#navigation {
background: red;
height: 50px;
}

#banner {
background: orange;
height: 115px;
background-image: url(../images/banner.jpg);
background-repeat: no-repeat;
}

#news {
background-color: #9dd4e0;
background-position: 0 0;
clear: both;
float: left;
width: 30%;
height: 280px;
}

#clients {
background: purple;
width: 40%;
float: left;
height: 280px;
}

#services {
background-color: #dbff66;
width: 30%;
float: left;
height: 280px;
}

#contact {
background-color: #f09;
clear: both;
float: left;
width: 30%;
height: 160px;
}

#photo {
background-color: #f90;
width: 40%;
float: left;
height: 160px;
}

#links {
background: purple;
float: left;
width: 30%;
height: 160px;
}

But it obviously didn't work.

Also how would one push the footer right the bottom of the page no matter what happens to the other content and always stay on top?

[Laura Lynne]

Do you mean a fixed footer like this...

Fixed Footer Using CSS

[Joe.Morgan]

ah awesome.. thanks laura!