Over the last few weeks we’ve seen how to develop both fixed width and fluid layouts with html and css. Each has its pros as well as its cons. Hybrid layouts are attempts to gain the pros of one type of layout while minimizing some of the cons.
Today I want to present 2 hybrid layouts. The first is a modified fixed width layout that gives the appearance of being fluid and the second is a modified fluid layout that attempts to rein in the longer lines of text.
These aren’t the only 2 hybrid layouts, but hopefully they point the way toward techniques you can use to create your own hybrid layouts.
As always if you simply want the code here are the demos
- Fixed content and fluid background
- 2 column fluid layout with max-width
- 3 column fluid layout with max-width
Fixed Width Content, Fluid Background
The trick to this layout is to use container divs around each row of content within our layout.
This allows us to use the inner div for fixing the width and centering what’s within while allowing the the outer div to stretch from edge to edge in the browser.
By setting backgrounds on the outer div we give the appearance that the layout is fluid, while we maintain control over the content itself. In a sense we create a layout within the layout. This inner layout is fixed, while the outer layout is fluid.
The HTML
The html below is similar to the fixed width layouts we’ve previously discussed.
{code type=html}
Header content here
Main content
Footer:
{/code}
The difference is that in the fixed-width layouts we wrapped everything with a single container div. Here we’re wrapping each row of content with a container.
Both header and footer are wrapped with a container div and since the content and sidebar are meant to be displayed next to each other (on a single row in the layout) a single container is used around both.
You might note that while #header and #footer are inner divs, #page is apparently an outer div. We’ll actually use the body as the outer div for #page instead of adding an additional #page-container div.
These multiple container divs are the key to this layout.
The CSS
If you’ve been following along with this series of posts on css layouts most of this css should also be familiar, though there are some new things which we’ll talk about below.
{code type=css}
#header-container, #footer-container {background: #777;}
#page, #header, #footer {
width:960px;
margin:0 auto;
}
#content {
float:left;
width:620px;
}
#sidebar {
float:left;
width:340px;
}
#footer-container {
clear:both;
}
{/code}
#content and #sidebar are exactly the same as in the fixed width layouts we’ve seen before. Here I’ve cleared #footer-container instead of #footer, but that’s not really new. The new stuff is the css at the top.
Previously we had a single container div that fixed the width and centered the content. Here we have three, #page, #header, and #footer. Note that we’re fixing and centering the inner divs. Remember #page is the inner div with body being its container.
By default #header-container and #footer-container have a width that’s 100% of the body, which is what we want. All we really need to do is set backgrounds on each.
Since our footer and header divs have no background applied to them the background of their containers will show through. Similarly we can set a background on the body. I didn’t set it here since I want the body and the #page row to be white, which they will be by default.
As long as we don’t set a backgrounds on the divs holding the content the background of their containers will show through giving the appearance of fluidity.
Additional Thoughts
While this layout does create a more fluid feel to a fixed width layout, the downside is the extra html used for all the container divs and that the fluid feel is something of an illusion as most of the design is still fixed.
Still it’s a nice compromise between fixed and fluid layouts.
Note: Soh Tanaka has a slightly different method for achieving this same layout. The basic idea is the same, but Soh uses two classes, one fluid and one fixed. To control the layout you apply the appropriate class to the appropriate div.
I’d encourage you to read his post on achieving liquid background with fixed content.
The minor downside to his method is it leaves behind non-semantic class names in your html, which you may or may not be comfortable doing.
Rearranging Columns
Rearranging columns is exactly the same as it was for the fixed width and fluid layouts. Depending on how many columns and how you have things set up in your html it’s simply a matter of changing float directions for most cases.
For the cases when floats alone won’t do we need to use a small bit of relative and absolute positioning to achieve the desired column order.
Since we’ve been over it before I won’t cover the details here and instead point you to the 3 column fixed width layout post where the details are discussed.
Fluid Layout With Max Width Content
The second hybrid layout we’ll look at starts with a fluid layout and uses max-width values to keep the lines of text from growing too long for comfortable reading.
The HTML
The html is exactly the same we used when developing fully fluid layouts.
{code type=html}
Header
Content
{/code}
There’s really nothing new in the html.
The CSS
The css should also look familiar. It’s the same we used when developing fluid layouts with one addition.
{code type=html}
#content {
float:left;
width:67%;
}
#sidebar {
float:left;
width:33%;
}
#footer {
clear:both;
}
#content p, #sidebar p {max-width: 75%}
{/code}
The addition is the last line above where we’ve set all paragraphs inside the content and the sidebar to have a max-width of 75% of its parent container.
The amount is somewhat arbitrary. I chose 75% since it works well with the demo and the resolution of my laptop. What you use in practice would depend on your particular layout and audience.
You aren’t limited to setting max-width on paragraphs, however, since we’re mainly setting it to prevent lines of text from growing too long, paragraphs are probably the best place.
As headers and footers usually hold different kinds of content I didn’t set max-width inside either of them here. You might depending on the specifics of your design. The key is setting a max-width wherever content can grow to wide.
Additional Thoughts
In setting max-widths on our fluid layout we’re combating one of the prime downsides of fully fluid layouts, that of text lines growing too long. I set the max-width in % here, but on larger monitors this could still lead to overly long line lengths.
For this reason it might make more sense to use px instead of %. Of course using absolute measurements moves us away from fluid design.
Another point to note is that by setting a max-width on the content we create a greater amount of internal whitespace in the design. The larger the browser the more space will be present between blocks of content.
In the demo I gave additional padding to the content and sidebar to help balance out the additional space in the design, though it’s hardly a perfect solution.
Overall using max-width is a nice way to achieve a fluid layout while still retaining a measure of control over the layout of the content.
Summary
Both fixed width and fully fluid css layouts have their pros and cons. Hybrid layouts are an attempt to rein in some of the cons while keeping the pros.
A layout where the content is fixed and the background is fluid attempts to make fixed width layouts appear more fluid than they really are. They maintain control over the layout of the content, while adding fluidity to the background.
A fluid layout with max-width selectively applied attempts to rein in the possibility of longer lines of text while still allowing the overall design to be fluid and resize itself when the browser window is resized.
These aren’t the only hybrid layout solutions, but they are among the more common. Hopefully the techniques shown here will help you develop your own hybrid layouts when needed.
Download a free sample from my book, Design Fundamentals.
May I comment to say that is a revolutionary idea? You’re so brilliant man. HTML5 will have to readjust itself now. Haha.
Thanks, though I’m not sure anything in this post is revolutionary. 🙂
Thanks very helpful post to design my new website
🙂
Sorry, but your design doesn’t work. If the contant of one column grows it destroy the design.
Just test it your self. Minimise the browser window width.
This will work only on not dynamic web pages.
You need to be a little more specific about what doesn’t work and for which layout.
In the demos I’ve added some css just for the presentation, but that css is something you’d remove if using this code for a project. The css specific to the demo is also clearly marked in the source.
The only thing I maybe see breaking when you minimize the browser width is that the column heights are no longer equal, but this code isn’t specifically for creating equal height columns. That post is coming next week.
If you can be specific about what problems you’re seeing I’ll take a look at the code. It’s always possible I missed something or left a typo of some kind in the code. But I do need to know which layout and what you mean by destroying the design in order to know what to look for.
typo: “rein” in not “reign” in. It’s an equestrian metaphor.
Thanks for the howto!
Thanks. All fixed. I wish I could claim it was a typo, but until now I had always thought “reign in” was correct. It makes more sense as an equestrian metaphor now that you pointed it out.
Appreciate the catch and thanks for teaching me something new.
Thanks. Its really help me in my website.
Sohtanaka site doesnt work for me.However the tutorial itself is great!
Thanks Igor. I’m glad you liked the tutorial
Soh’s site was hit with an attack where the attacker was able to get the domain transferred to himself and away from Soh. It happened to a half dozen or so design sites. Most of the others have been able to get their domains back, but I guess Soh hasn’t been able yet. Hopefully he will soon.
Chris Coyier of CSS Tricks has a couple of posts about it. His was one of the sites hit. It looks like Soh’s site is the only one that still hasn’t gotten his domain back.
Here are the two posts from Chris
This Site’s Domain is Stolen
This Site’s Domain is Now Safe
You save me, thank you
This is a huge help to clarify me for what is hybrid layout and why to choose it. and those two methods in this article can be used in some of my projects. Thanks a lot!
But I just notice one but very annoying cons of the No.1 method: if I zoom in the browser, then the header and footer div’s background just be cutted off, you can see that happen if you move the horizonal scroll bar. I wonder, sir, is there any way to solve this?
Glad I could help, Hao. I see what you mean though about the examples. I think it’s more than just method #1 too. I can see issues with all of them. Strange. I could have sworn these demos were all working when I first write this post. I’ll have to take a deeper look and see if I can figure out what’s wrong.
It’s possible some code I wrote no longer works as it previously did. It’s also possible, the errors come from using absolute measurements for parts of the layout. I’m guessing it’s the absolute measurements throwing the layout off.
I’m making a note to myself to revisit this and similar posts and maybe do a rewrite or create a new series showing some code that definitely works. Thanks for pointing this out to me.
hi Bradley, It’s very nice of you to pay the patience to re-examine your example.
today I tried a few code doodle myself, and find that yeah, you are right, the absolute measurements is the problem. But as I see it, the absolute measurements is only the problem that *reveal* the cut off thing but not the *cause* of it. what i mean is the absolute measurements only give you a scroolbar and hand you the chance to see that somthing been cutted off…
I searched a little and understand that the 100% is for the window, the viewport, but not the body, so, its background been cutted off maybe the nature thing to do for browser.
only wish you can find some work around to this.
Have you been able to figure out the problem? If not, feel free to post a link or send one to me via email. If I can see the page, I might be able to help with a solution.
Once a container element has a width, whether in px or % or whatever, all children can set a width relative to the container using %. Does that make sense?