CSS layout – fix and fluid combined

I have been playing with the Dreamweaver layout sample: 2 column hybrid. The hybrid layout is quite a flexible layout as it would expand or contract based on the width of the browser window. Problem would arise if the browser window is too narrow and the layout will flow beyond what I want. I found out that setting the CSS min-width attribute of the #container class would solve the problem. Horizontal scrollbar will display if the browser window is too narrow.

I then added the max-width attribute to the #container as well to see what happen. The end result is very good. It would mean that page would expand up to the max-width. Beyond that the layout would fix the width. I consider this the best of both world, fix and fluild combined layout.

Tested with MS IE 8 and Goolge Chrome. Haven’t tested on other browsers.


~ by brianchau on July 5, 2009.

12 Responses to “CSS layout – fix and fluid combined”

  1. Hey Brian
    I’m glad to hear that min-width is working in IE now – I know it never used to.
    I caught your talk at the Adobe roadshow yesterday – thanks for that 🙂 Do you know of a live example that’s using the Dreamweaver drop down/pop out menus you mentioned? Is MacRob’s using it, or did they get theirs from somewhere else?

  2. Oh good. Do you know of an example anywhere that is using the Dreamweaver code? I’ve been playing with accessible pop outs on my own site so I’m just curious to see it in action 🙂

  3. Thanks for the sample page. There are a couple of accessibility issues there. One, if you disable JavaScript, you can’t get to the menus. The other is that if you’re using a keyboard you can’t get to anything except the first link. You might like to check out http://blakehaswell.com/lab/dropdown/deux/ – I’m using this one myself as it’s very accessible.

    • That is what graceful degradation mean. When the javascript is disabled, the page should still be functional even if advanced features (like rollover and second level links) may not be available. It therefore means people using browser with javascript disabled should still be able to access 2nd level pages via the link from the 1st level first.

  4. True, but wouldn’t it be better if you could still get to everything with JavaScript turned off?
    And with the keyboard turned off I can’t even get to Item 2, it just jumps straight from Item 1 to the next menu.

    • That is what the javscript is there for. For providing a better experience for brwoser with javscript enabled. Same argument goes with Flash. For browser without javascript or Flash, the user should still be able to access the information even if it means without better experience. Hence we have progressive enhancement or graceful degradation as a way to build web site that give the best experience based on what users have in their browser.

  5. Yes, all of that’s true. So, what about keyboard navigators? How can they get to the content in your menu? If you can improve your code, so your content available to everyone, why wouldn’t you?

    • With javascript enabled, keyboard navigation goes all the levels. With javascript disabled (security set to high on IE), you can still tab all the levels though the only visual feedback is on the browser status bar. Not the best experience for sure. Having said that though the screen reader would read the links so that would help for vision impared users.

  6. True, but not everyone’s impaired visually. Ah well, nice to see you’re trying in the right direction anyway. Dreamweaver has always been a favourite of mine.

  7. Huge to you thanks, very actual notice.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: