hasLayout.net

Share |

Min-Width Workaround

Affected Versions

This bug affects: IE6

Symptoms

min-width property is not supported

Date of the Tutorial

Sat Jul 18 14:30:22 2009

Description

I'll admit, I am not a fan of "fluid", "stretching", whatever layouts for the reasons I shall not discuss here... however, there is sometimes a need for (forgotten by some) min-width property, but IE decided not to support it. Let's glance at the demo:

Demo

Due to the nature of the bug, the demo is available on a separate page.

HTML Code:
<div id="content">
    Foo Bar Baz
</div>
CSS Code:
#content {
    width: 50%;
    min-width: 500px;
    background: #aaa;
    border: 1px solid #000;
}

When looking at the demo, start resizing your browser. The #content <div> is resizing to half of the width of the browser until it hits 500px in width; it stays at that width as we resize the brower into a smaller width.... not the case in IE

Solutions

Below are solutions for the above bug ordered by the solution type.

Solution (Clean Markup Solution) - with Side Effects

Date of the Solution

Sat Jul 18 14:39:16 2009

Fixed Versions

all of the affected

Description

This solution is a rather bold statement and requires one to edit the markup, let's take a look at the fixed demo first:

Due to the nature of the bug, the demo is shown on a separate page.

HTML Code:
<div id="content">
    <div id="width"></div>
    Foo Bar Baz
</div>
CSS Code:
#content {
    width: 50%;
    min-width: 500px;
    background: #aaa;
    border: 1px solid #000;
}
#width {
    width: 500px;
    height: 0;
    overflow: hidden;
}

So what did we do here... we stuck a <div> inside our <div> with min-width and set width on it to the same value as min-width on its parent. Simple as pie, the extra inner <div> prevents our otter <div> from going below the width of our inner <div>... simple and effective.

Side Effects

The side effect of this solution is that if the outter div (#content) would to have overflow set to anything but visible the fix would not work.

Solution (JavaScript Solution)

Date of the Solution

Sat Jul 18 16:40:14 2009

Fixed Versions

all of the affected

Description

I was planning to add an expression() code for this solution(), but it seems that most of the available stuff online is broken in one way or another. Since expression() is just JavaScript anyway, I suggest you use the minmax.js script. I've taken the liberty of storing a local copy of that script on this site, in case their page/site goes away. Let's see our fixed demo:

Due to the nature of the bug, the fixed demo is availabe on a separate page.

HTML Code:
<script type="text/javascript" src="/minmax.js"></script>

<div id="content">
    Foo Bar Baz
</div>
CSS Code:
#content {
    width: 50%;
    min-width: 500px;
    background: #aaa;
    border: 1px solid #000;
}

Everything works automagically. Note that if you're testing out the fixed demo page, sometimes the div goes smaller than min-width until you release the mouse button...

Comments

Create new comment

  • Zoffix Znet

    Tue Nov 16 07:57:13 2010

    Ah, I see where the problem is now.
    Thanks for telling us. I guess the plain solution isn't fully workable.

  • Zoffix Znet

    Tue Nov 16 07:24:14 2010

    Hey,

    Could you elaborate on what exactly is not the expected behavior?

    I've tried adding more text and it seems to work exactly the same as in any other browser...

  • ebguy

    Tue Nov 16 03:05:39 2010

    Your css/internal div does not work as min-width. Try putting more text and you'll see that it's not the expected behaviour on IE6 browser.

    try a longer string like...
    Foo Bar Baz Foo Bar Baz Foo Bar Baz Foo Bar Baz Foo Bar Baz Foo Bar Baz Foo Bar Baz Foo Bar Baz Foo Bar Baz Foo Bar Baz Foo Bar Baz Foo Bar Baz Foo Bar Baz Foo Bar Baz Foo Bar Baz Foo Bar Baz Foo Bar Baz

If you found materials on this site useful, please consider donating a few bucks to the author. Thank you.

Alternatively, purchase my book:

Support Wikipedia