2 Methods For Developing Hybrid CSS Layouts

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

Layout with fixed content and fluid background

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}

Main content

15 comments

  1. 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.

    • 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 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

  2. 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.

  3. 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?

Leave a Reply

Your email address will not be published. Required fields are marked *