Home/ Questions/Q 6366529
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T00:25:59+00:00

Generally for most of the DIV based layouts, I code the page (the outer

  • 0

Generally for most of the DIV based layouts, I code the page (the outer skeleton) in the following way;

<body>
<div class="wrapper">
    <div class="minwidth">
        <div class="layout">
            <div class="container">
                <div class="content">
                                          //Some content....
                </div>
            </div>
        </div>
    </div>
</div>
</body>

Below is the CSS that I use;

html,body{padding:0;margin:0;background:url(../images/bodybg.gif) #ececed left top repeat-x;color:#3b3b3b;font:normal 85% verdana}
.wrapper{width:99.8%;min-width:959px;margin:0 auto}
* html .minwidth{padding-left:959px}
* html .minwidth,* html .layout,* html .container,* html .content{height:1px}
* html .container{margin-left:-959px;position:relative}
.content{padding:0;margin:0 16px}

Now I must admit that since I am more into UI development (and less into layout designing), I do not exactly understand “WHY” some of these divs are actually used. My guess is, some of these divs are used as kind of HACK for older IE’s lack of min-width support.

So my questions are;

  1. Please let me know if the layout code above is standard and is
    required for cross-browser compatibility (assuming a certain min-width
    requirement as well)
  2. Do you think that so many divs were required only for min-width
    support in older IE and do the latest IE (like IE8/9) have full
    support for min-width?
  3. I now want to design a fluid layout i.e. one which should work
    seamlessly across multiple platforms (desktop/tablets like iPad and to
    certain extent mobile devices)
  4. Please suggest any other skeletal structure to ensure a fluid
    layout that would adjust well according to the screen resolution
    (desktop/tablet,etc)
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    1.

    Well, ive never seen this way of achieving min-width with older browsers.

    2.

    No, This is definitely not necessary.

    If you’re only interested in min-width this should do it for ie6.

    http://www.cssplay.co.uk/boxes/width.html

    Here’s a way to achieve min-width and max-width.

    http://cameronmoll.com/archives/000892.html

    Edit:

    So to make this work crossbrowser including ie6 you could do like this example above except for just min-width.. for the sake of the simplest html and css this would be the way to go.

    Only downside being that if visitor doesnt have JS on.. then this does nothing.
    If a person is smart enough to disable JS and he still uses ie6 then I think thats the users problem..

    http://jsfiddle.net/sr7WJ/ – Its crucial to have some extra in the first width value ( the one with the javascript ) i personally trust about 30 more than what it is… but they say 2 more is enough.
    You mighthave need to hack this out for ie6 or use conditional comments in some cases.

    3. / 4.

    http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts

    http://www.maxdesign.com.au/articles/liquid/

    • 0