How to create a header for a fluid layout
Published on March 23rd 2009.
Fluid layouts are all in because they don't discriminate against resolutions, and will adjust their width dependant on the browser, browsing medium of your choice (desktop machine, mobile phone, refrigerator!), size of your window, resolution etc. They're much more flexible than fixed with layouts.
You may have found that designing a super-savvy header for a fluid layout can be a bit troublesome. A lot of fluid layout sites I see have either a very basic header that is repeated, or text on a solid background. This is fine for some people, but not really for me, because I like designing intricate headers that are ideally visualised as having a fixed width. Using percentages and therefore, not knowing how wide to make my header was a huge hindrance, as I wanted to put a lot into it, but didn't want to have to resort to a repeating background. I also didn't want to stick to simple a design that lacked my usual "graphicky" feel.
Another approach I considered was to make the header long – say 14000px – and have it fade out at the end. So most people would see a nice full header, and then people with large resolutions would get a subtle fade-out. However, I didn't like the idea that my header could be chopped off at a point I wouldn’t be able to control, and could potentially look silly.
The solution?
The solution is to split your header up into different parts and position these within a container. You can see below how I applied this logic to a header I created of the lovely Leighton Meester:
Where to chop?
As you can see, my example is very simple, with a plain blue background. If you are planning on using intricate backgrounds, it helps to locate the areas that can be seamlessly separated from the rest of the graphic. If you don't want to do this, the alternative is to use PNGs or GIFs.
Onto the code
You then apply each of your parts as a background image to a div, or span (or any tag that you require) and then position them as necessary. How you position them depends on your preferences. Some people prefer to float elements, and avoid position:absolute. Others are fans of position:absolute and have no qualms about using it. That said, if you use floats, then when the window is resized too small it will result in the floated elements being stacked on top of each other. But you can overcome this buy setting an overflow:hidden onto your containing div. This way, at least your header will degrade gracefully for smaller viewports.
Example
CSS Example:
#header {
width:100%;
height:200px;
background-color:#636be0;
}
.partOne {
width:434px;
height:200px;
display:block;
float:left;
background:url(../images/examples/leighton-part1.jpg);
}
.partTwo {
width:254px;
height:200px;
display:block;
float:right;
background:url(../images/examples/leighton-part2.jpg);
}
HTML Example:
<div id="header">
<a href="/" title="Click here to go to the fansite of Leighton Meester" class="partOne"></a>
<span class="partTwo"></span>
</div>
Click here to see a working example.
Conclusion
As you can see, you don't need to skimp on the design flare when it comes to creating headers for a fluid width layout. Just change how you go about coding your headers!
