Mobile Friendly Website

CSSPLAY

Doing it with style

IE min width COMMENTS

Welcome to my Comments Pages

Please note. I get a few hundred emails a week from visitors asking for help, or posing questions on how to modify my demos to suit their application and I read them all. Unfortunately I only have a limited amount of time to spend answering these questions.

So if I do not reply, please do not be offended, and if I do reply then you are one of the lucky ones.

If you are asking for permission to use any of my demonstration then please email me with your request stu{at}cssplay.co.uk.

Post a comment


Current posts

Anonym:-
Nicely done Stu. how about a min-height now.
(11.05.2005, 17:58)

Stu:-
Should be possible in the same way, just use a bottom-border value. I will check it out.
(11.05.2005, 18:22)

Todd (todd@reidjazz.com):-
Stu: Mac IE 5.0.2 fails miserably...the yellow box doesn't resize AT ALL!!!!!
(11.05.2005, 20:22)

Stu:-
Todd, can you try it with the float:left; version?
(11.05.2005, 20:38)

Todd (todd@reidjazz.com):-
Stu: Mac IE 5.2 (that's what I meant in the above comment, not 5.0.2): there's about a 10 px segment of the box that remains full width while the rest resizes; however, it ignores min-width, resizing smaller than 400 px!! I will email you screen shots.
(12.05.2005, 13:48)

Stu:-
Oh well, it looks like a failure in IE5.2 on a Mac but IE on a PC is ok. Thanks Todd.
(12.05.2005, 15:39)

Whintersby:-
Fantastic Stu - keep up the good work!

I've added you to the stylegala public news section to get this recognised
(13.05.2005, 16:12)

Stu:-
Thanks Whintersby, I appreciate it.
(13.05.2005, 16:59)

Jeremy Flint:-
Awesome hack Stu. Can't wait to try it out. Just a note: The border color could be set to transparent in case you don;t want it showing up.
(13.05.2005, 20:43)

Stu:-
Thanks Jeremy, the only problem is that this is a hack for IE and IE doesn't understand transparent borders :(
(13.05.2005, 20:57)

Blo0d:-
sweet
(14.05.2005, 09:44)

perke:-
this really is discovery.....great
(16.05.2005, 21:39)

helper:-
A simpler solution can be found here:
http://webdevel.blogspot.com/2004/06/css-min-width-and-min-height-with.html
(19.05.2005, 12:02)

Stu:-
helper, CSS expressions were introduced in Internet Explorer 5.0 and it allows you to to assign a JavaScript expression to a CSS property. If javascript was turned off then it wouldn't work. This site uses ONLY css.
I will also be posting a standards compliant version shortly.
(19.05.2005, 13:57)

Brian:-
Can it work with a left sidebar with % width to the left of it?
(21.05.2005, 18:39)

Matt:-
Wonderful! I've never seen anyone accomplish this before!
(21.05.2005, 18:53)

Bobby:-
How come I can't edit the text in this section in Dreamweaver? Only a few char shows then next line, etc, etc, etc. AND, when I put my cursor into it to try and edit a word, the entire section is highlighted and I can't change a word?
(21.05.2005, 19:39)

Jo-an:-
.wrapper {
min-width: 700px;
max-width: 1400px;


}
This works in Firefox and this actually the code for the main wrapper div

how can I emulate this in IE using your solution? need for extra div
(22.05.2005, 21:50)

Stu:-
Jo-an, I am still searching for a max-width solution. This is proving a little more difficult.
If/when I find one I will post it here.
(23.05.2005, 10:54)

Mean Dean:-
From the WikiPedia : Bodge is British slang for a mistake of impressive magnitude, usually caused by carelessness. The term was created after the collapse of a bridge designed by an architect named Bodge. A Bodge Job can also mean a job which is completed quickly and carelessly, even if no mistakes are made. A successful Bodge is in fact creative engineering.

Sir, I think your fix is of the latter category, both creative and in my case, timely!

Thank you.
(28.05.2005, 10:34)

Stu:-
Bodge is indeed a British sland word as you say. There is one small failing with my method (hence 'bodge') - it is not possible to have a body background image show through the divs that make min-width possible. Again this is because of a failing in IE of not allowing transparent borders. Let's hope that IE7 fixes all of these problems, but even if it does we will still have to cater for IE5+ and IE6, ah well :(
(28.05.2005, 11:13)

jonnie_bighead:-
Stu, this is a really important discovery!

However, the code fails in Firefox/Mozilla if the outer wrapper is centered via the "margin:0 auto" statement. In this mode, F/M retains a left margin which shifts the page to the right. This margin never disappears, even when the viewport is sized down to the minimum. IE retains exactly the same margin on both sides of the page until the viewport crosses the minimum width. The difference is ruinous if one is working with artsy graphical borders.

Example is here:
http://ncpmiracle2.com/test_page/min_width.html

Hopefullly we can booger the code to keep the compliant browsers on the straight while beating IE into submission.

BTW...i am so impressed with your work here...I would offer you my first-born, if I had such a thing to offer.
(02.06.2005, 02:59)

jonnie_b:-
Stu, this is the same principle that made your 3-column layout work. Did that layout work in IE5.2/Mac? If so, what is the difference here?
(02.06.2005, 05:00)

jonnie_b:-
stu...please don't think that I intend to steal your fire...I just want to see a solution to this problem...sooner than later. Hopefully, my work here will stimulate a bit more feedback, especially from the Mac hacks. Here is the link for a centered Min-Width page which works consistently in both Mozilla and standards-mode IE.

http://ncpmiracle2.com/test_page/min_width_FM.html

The code is a bit cumbersome, but that is explained at the site. I hope we can solve the Mac side of it as that would constitute a huge step forward for real-world CSS design possibilities. At this point, we need to hear from the IE/Mac side.
(02.06.2005, 06:58)

jonnie_b:-
one more thing...where did "inline-block" come from...i had never seen that specification until I reviewed your site...has anybody done a treatise on this?
(02.06.2005, 07:03)

Stu:-
jonnie_b, this is a little odd. If you add margin:0 auto; to .width in my standards compliant version it works perfectly in FF/Mozilla. Unfortunately I do not have a Mac for testing so cannot comment on this browser. The inline-block is a CSS recommendation that so far has only been taken up by IE.
(02.06.2005, 08:16)

jonnie_b:-
stu, the problem is not apparent until you reduce the width...if you use 50%, i think you will see it immediately...like you, i thought it was all good-to-go until i did the same thing...the problem lies with how Mozilla applies margins outside the containing div.
(02.06.2005, 08:30)

Stu:-
jonnie_b, an easy solution would be to add min-width:50%; to the outer container for browsers that understand and then add * html to the other containers to target IE only.
(02.06.2005, 09:17)

jonnie_b:-
That is what i did in the example that i left on the ncp site. It works just fine except that it's kinda clunky, and i don't know whether it works for IE/5. The important question is whether we need additional hacks for IE/Mac...
(02.06.2005, 09:24)

Stu:-
It would work in IE5.01+ on a PC if you add text-align:center; to the body tag and then text-align:left to the container div.
Can any IE5 Mac owner test this?
http://www.stunicholls.myby.co.uk/boxes/width3.html
(02.06.2005, 21:22)

mrruben5:-
Couldn't padding be an solution to this? Instead of putting a right margin, have a left padding, and a relative negative margin on the inner container. Wouldn't that help?
(02.06.2005, 23:46)

mrruben5:-
More idea's: Couldn't you set these div's very low in the z indexes, and then use 1 more container with position absolute , all top, right, bottom and left set to zero, so you can specify an image background? What do youu think?
(02.06.2005, 23:52)

jonnie_b:-
It's the comment left here by an IE5.2/Mac person that bothers me the most. He said the method didn't work on that platform, but he was not specific in what he actually tried to do. I can't find that comment now as the scroll back feature is not working in this script. I am wondering if we shouldn't kick this up to a more active forum. Any suggestions?
(03.06.2005, 03:25)

Stu:-
mrruben5, although using padding instead of border will stop the collapse of the div at 400px it will not stop the collapse of the content, so that one is out. The position absolute version will not work as IE does not understand top, right, bottom and left = zero.
I tried all of these before using border values.
(03.06.2005, 11:24)

Stu:-
jonnie_b, I will fix the 'scroll back' but basically I think that IE5 Mac will not work with this method. Feel free to check out the forums though. Good luck.
(03.06.2005, 11:26)

Stu:-
Fixed scroll back.
(04.06.2005, 09:35)

Ron:-
Small typo Stu, padding:top:1em; in h2 on 2nd method
(05.06.2005, 04:51)

Ron:-
There is also no class 'norm' defined, which is used for <h3>
(05.06.2005, 05:08)

Stu:-
Both sorted, thanks Ron. That's what comes from 'copy'-'paste' without a final check.
(06.06.2005, 08:49)

Mean Dean:-
From the WikiPedia : Bodge is British slang for a mistake of impressive magnitude, usualhands dirtier I can see!
(28.05.2005, 10:34)

Bruno:-
I think this min-width emulation for IE/Win is really a great idea. If I'm not mistaken the role of inline-block, and float for 5.01, is to give "hasLayout" to the affected element. This can be obtained in other ways, for example with the Holly hack. Using this, I created a modified version which, at least according to my preferences, is slighly simpler. Moreover it seems to work in IE 5.2/Mac as well. http://www.brunildo.org/test/test/min-widthS.html (the only thing not working perfectly in IE/Mac is the centering at narrow widths, but the min-width works!) Thanks!
(17.06.2005, 21:08)

Stu:-
Bruno, very nice. You are correct in that the float is used to give hasLayout to the affected elements. Unfortunately I cannot test in Mac IE5 so could not take this any further. Thank you for your input and I hope that visitors will pick up on your alternative.
(17.06.2005, 21:57)

jonnie_b:-
this is wonderful..i believe this finally solves the min-width problem...congratulations everyone, this is a really great contribution
(21.06.2005, 04:29)

Stu:-
Bruno, do you mind if I put your Mac IE5 method up on this site?
(22.06.2005, 13:59)

Bruno:-
Stu, feel free to copy/paste/rewrite anything! What made Mac IE to work was simply the removal of unnecessary inline-block/float, the core idea is totally yours!
(22.06.2005, 21:17)

Peter:-
Nice method, however IE needs to be in Quirks mode in order for it to work :(
This is not always a desired mode...
(28.06.2005, 08:53)

Stu:-
Peter, there are several versions of this if you look at the information I have documented. Quirks mode is one method. There is also a standards compliant method, a centered method and now a method with transparent backgrounds. This should cover all IE requirements
(28.06.2005, 14:52)

David:-
You are a god-damn genious stu.

You don't know how long I have been wrestling with IE to give it min-widths. I've tried expressions, spacer gifs, javascript etc. The closest I came was with expressions but it has the tendancy to crash IE (no surprise there).

This solution now makes my 3 column resizable layout possible (http://www.martial-arts-info.com).

I've been a big fan of your site for a while but now I worship the very ground you walk on.
(29.06.2005, 04:23)

Stu:-
Thanks David, I'm glad you found a good use for this.
(29.06.2005, 07:39)

Øyvind:-
Why not use margin-right instead of border-right?
I know some ie's handles margins wierd, but that can be fixed by a band pass filter and a half margin.

Works using margin-right in ie6.
(12.07.2005, 23:32)

Stu:-
If you have a way using margins that's fine. But borders are probably easier to handle cross browser.
(13.07.2005, 08:02)

kost:-
If min-width is more than 960px, part of the block goes left out of the screen in IE6, Windows 2000.
(14.07.2005, 09:38)

Stu:-
kost, the transparent version does not have this problem (but requires an extra div).
(14.07.2005, 10:10)

Lightsol Phoenix:-
Wouldn't this sorta work better with padding instead of borders? If you're using a flat color, sure, borders work just as well, but what if you need the background to show through? Then I believe padding would work better, because the background shows on the padding (whereas it wouldn't if you used margin). In terms of cross-browser compatibility, padding and borders can be mostly interchanged, unlike borders and margins.
(15.08.2005, 05:24)

Stu:-
Lightsol Phoenix, I think that if you looked more closely into all the examples you would have seen that the final one did indeed use padding instead of borders to allow the background image to show through. This method does however require yet another outer div to stop the padding from collapsing.
(15.08.2005, 08:04)

Mark:-
The Mac IE5-Centered version does not seem to be working at the moment; I believe that link is broken.
(20.08.2005, 04:46)

Stu:-
Mark, not broken, just not valid xhtml1.1
I thought I had checked all the pages but this one got through. I guess you were using Firefox or Mozilla.
Because these pages are now served as application/xhtml+xml they MUST be valid or the browsers will not display them. This one was missing a closing </p>. If you were browsing with IE then it would not have been apparent.
(20.08.2005, 09:15)

Erwin Heiser:-
You're the man, Stu, as ever!
(01.09.2005, 12:57)

Shirl:-
This looks fine but if you do a print preview or print it doesn't work correctly. Otherwise, great!
(15.09.2005, 20:34)

Stu:-
Shirl, Print preview should be ok as long as you have background color printing to print the top and bottom borders which are backgrounds.
(01.10.2005, 19:14)

klopfdreh:-
Ive got the problem, that the content is 950px (the border of the container) + 99% content (the content width), may the right-margin:-950px setting is ignored ?
(31.10.2005, 07:40)

Jo-an:-
Are the borders required? Can onlyt a background-image be set instead
(04.11.2005, 05:51)

Stu:-
klopfdreh, there is a problem with the original version and large sizes around 950/960px however the transparent version does not have this problem (but requires an extra div).
(04.11.2005, 10:13)

Stu:-
Jo-an, a background image will not control the size of the div. and a foreground image will stop the div from shrinking but not stop the text from collapsing.
(04.11.2005, 10:14)

GaryBadger:-
Hi Stu, cutting edge once again! Using your stds compliant method I have fixed a page of mine, however now (in IE) other components don't display properly. At http://www.stormtrumpets.com/staging/4/templatehack.html the cell divs containing sample paragraphs look fine in FF but in IE the borders have dropped off. Strange behaviour - when I scroll some of the border re-appears. This only happens with the min-width CSS present and only in IE. Can you please help identify my problem? Many thanks!
(07.11.2005, 11:07)

GaryBadger:-
I tried Quirks mode method #2 also, and posted it at http://www.stormtrumpets.com/staging/4/templatehack2.html, but same problem in IE only. I don't understand how playing with the width attributes can affect the border of completely different divs. Your guidance would be most apprecaited, thanks Stu.
(08.11.2005, 10:34)

marien:-
this s***s!
(26.12.2005, 11:31)

Yury:-
thanks for your work, Stu! i have a problem with your standards compliant method, hope you can point me a way to solve it. i am trying to set min-width to 1000px, and it works fine, but for some reason my content is moved to the left for 40px or so and is partially hidden under the left side of browser window, just like my &lt;body&gt; have margin-left:-40px. this bug disappears with min-width lesser than 960px. i am confused, can you help me somehow, please?
(09.01.2006, 08:48)

Stu:-
Yury, this is a problem when widths go over 960px in standards compliant mode. But if you try the transparent version that works in mac ie as well then this solves the problem (it does need an extra div though).
(09.01.2006, 18:19)

digi:-
i've found it simpler this way to force min-width in IE.
just include invisible DIV like this:
<div class="forceIE"></div>
.forceIE{width:400px; background:transparent;}

if anyone fins a problem using this please post. thanks
(19.01.2006, 20:08)

Stu:-
digi, although this forces the div to be a minimum width the content of the div will continue to shrink.
(19.01.2006, 21:08)

Kari:-
These methods does not seem to work in IE 7. Do you know of a way to fix this yet? Thanks.
(11.02.2006, 21:22)

Stu:-
Kari, until IE7 official version it is not worth spending time correcting styles. It may be that IE7 will support min-width correctly and so the existing style could be moved into a conditional comment for lte IE6 only.
(11.02.2006, 21:47)

haq:-
this site really imperessed me very much ...very very useful for learner...
(22.02.2006, 15:59)

Maihem:-
As far as I can see, no-one has noted this yet, so here goes: if you want the box to have a percentual height, IE totally messes up.

Try adding:
html, body, .width, .minwidth, .container, .content { height: 100%; }

On (IE/Win 6 SP2), the box becomes about half as wide as it should be, although it looks fine on Moz/FF. I have tried everything I could think of, so I hope you will have some more luck :). Looking forward to any possible fixes.
(04.03.2006, 01:13)

Bruno:-
You saved my ass! I love you!
(31.03.2006, 20:42)

Anonym:-
You are a champion!
(10.04.2006, 03:28)

nickey:-
Hi Stu, impressive and very helpful solution. But as Maihem sais it goes crazy when using it with a percentual height of the layout. I'm trying to set height:100% of all the blocks, but the result is that the content along with the container class are cut to half of their width. how come the width depends on the height, I cant understand this behaviour. Could you think of a reason? 10x
(12.05.2006, 10:30)

Nick:-
About the 960px width limit... You can double this limit without using the transparent method, by using border-left/margin-left and border-right/margin-right. Just split the width up into each side equally or whatever you like.
(18.05.2006, 20:52)

Asen:-
Hi everyone, please don't look my english.
I find two method for min-width in IE.
First with table.
CSS code:
table {border: 1px solid black; height: 300px;
div {width: 200px; height: 1px; overflow: hidden;}
Html code:
<table cellpadding="0" cellspacing="0">
<tr>
<td valign="top"><div></div></td>
</table>
This table width 200px min-width;
With the div with position absolute.
CSS code:
.first {position: absolute; top: 10px; left: 10px; height: 500px; border: 2px solid black;}
.second {width: 400px; height: 1px; overflow: hidden;}
HTML code:
<div class="first"><div class="second"></div></div>
This div with 400px min-width.
Thats for my from Bulgaria.
(04.06.2006, 22:10)

Stu:-
Asen, the tables version is an easy answer that everyone knows about. The div answer doesn't work.
It looks like it works (and it was one of my first attempts) but when you fill the div with text and you resize the window the div will stop shrinking when it reaches 400px but the text will carry on shrinking until it reaches a point where it cannot shrink anymore. So min-width it isn't.
(04.06.2006, 23:40)

Asen:-
In my version with the div text not carry.Only carry with the tag <br>.
Look my code in my ols post and try this.
<div class="first"><div class="second"></div>Text is heir, write word and text.</div>
For table, all people don't like the table but sometime i need from table tag.Try one div in the middle off web page.
(05.06.2006, 11:07)

Stu:-
Asen, no it doesn't work. Although the div stops shrinking at the min-width the text will continue to shrink within the div. Try adding lots of text and see what happens.
(05.06.2006, 11:31)

Tim Armes:-
Hi,

Your hack doesn't seem to work using ems for the minimum size.

At normal text size everything is fine, but as soo as you change the text size the blocks are no longer aligned at the left.
(03.07.2006, 10:14)

Joe Kohlmann:-
Stu, you probably get this all the time, but that's one beautiful hack. Thanks for the intrepid research!
(11.07.2006, 15:12)

kairin:-
Thank You So Much, i felt so relieved after getting my page with the correct min width and yet expand to 100%

!!! thanks again~!

(let's hope it gets easier with ie 7)
(12.07.2006, 09:04)

moz:-
This works, its a shame about the extra divs but i've had to use it as i'm converting a table based layout to CSS and need to emulate the min-width else the layout breaks.
(12.07.2006, 13:58)

Suro:-
Hi,

i have tried your method of getting min-width ... but i am using a 2 column fluid layout . the way its designed -( the inner container floats inside a wrapper etc) when i minimize the width of the browser window the text although not shrinking - shifts to the bottom. can you help ?
(30.07.2006, 10:42)

Jesse:-
You cannot begin to imagine how much you saved my heiny. THANK YOU!
(07.09.2006, 21:22)

RSLancastr:-
Thanks for what you do, but a thought: from a newbie's standpoint, the example is too complex. There is much in there which it is difficult for a newb to know if it is necessary for the hack or not. A style sheet and HTML with NOTHING in them but what is needed to demonstrate the hack would be great.

For example, I am building a site and discovered the mi-width problem. I google and find this page. I look at the HTML, and there is a ton of stuff in there (the b1, b2, b3 for example) which I, in all my newbness, can't tell if they relate to the hack or not. Do I need to include these things or not?

As a result, I have been unable to make the hack work for me, and sadly, will have to live with the IE bug making my pages look bad.
(14.09.2006, 16:32)

Stu:-
RSLancastr, if you look at the opening page www.cssplay.co.uk/boxes/minwidth.html and click that little 'scroll' image in the sub menu beneath the CSSplay logo you will be taken to an article which takes you step by step through the style.
(14.09.2006, 16:54)

Daniel Eloff:-
Awesome work Stu. I was previously using the expression approach, but it's iffy, and causes IE to hang at 100% CPU from time to time. I'm busy integrating your technique now.

For all the people moaning about the background image not showing through, you should be able to work around it by putting a (modified probably) background image over it. That's easy enough. Try working around the min-width instead and you'll soon come round.

RSLancastr does have a point though. It's not obvious what you need to use the hack. The <b> elements are required. Or rather, you need some block element with a given width inside your area otherwise it will have a min-size that is off by a little. I don't know enough to explain it, but it will be slightly less and then jump by about 10-20px after you've re-sized it past a certain point. It seems to have to do with wrapping the words. I simply borrowed the .rule class to test with, it fixes the issue if you put it inside the box. I imagine an invisible div with width equal to your min-width would suffice.

-Dan
(28.09.2006, 00:54)

Stu:-
Daniel, if you look at my comment to RSLancastr you will see that I have a step by step tutorial online (and there is an alternative method that allows a transparent background).
(28.09.2006, 07:51)

Marshall:-
Dude, you rock!
(11.10.2006, 18:31)

Kinger:-
Thanks! I can't tell you how grateful I am. I was tearing my hair out for hours until I found this page!
(17.10.2006, 00:54)

Shaf:-
I just cannot make my main nav stay locked without wrapping in IE. I have looked into the min-width issue and I just cannot make it work. Please help me! :(
(17.10.2006, 19:34)

Latvian:-
This is great! Finally I have found min-height for IE. Thank you very much! By the way, this is a very useful and great site.
(22.10.2006, 14:46)

xavi:-
Hey Stu, I'm a big fan of your page and everytime I've got to improve something of my CSS codes I check your page.

This time, I had an issue reffering to this tutorial. Let me explain:

I've a web with two colo schemes, one with a benetton looklike and another with grey tones. In this second one I've got some unexplainable problems with the colors. Some div's inside the page didn't show their bg colors correctly, so in that case i had to add the property display: inline-block; to the page content div (between header and footer ones) and then it work fine at all.

Have you encountered this issue on your tests?
(26.10.2006, 23:37)

Ram:-
You have done a great job.
but it does not work when a doc type specification is there at the top of the page.

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
(01.11.2006, 09:42)

Stu:-
Ram, this particular version uses quirks mode but the other four examples use standards compliant mode.
(01.11.2006, 17:11)

Jen:-
Champion!! Works a treat :-) Have applied it to the top frame of a two frame structure, to ensure our two lines of menu do not disappear when the window is too small... Only trouble now is retrospectively applying the code to the 8,000 or so pages we have that sit in the bottom frame of the site... Any ideas on how to do this without hours and hours of precious time??
(09.02.2007, 02:32)

John:-
I am trying to use this min-width for IE6 and I am not able to get it to work. I am using #width{width:100%; min-width:850px;}. I am using it in a div tag that I placed just after the opening body tag and just before the closing body tag. Can you please advise on how I can get it to work? What am I doing wrong?
(12.03.2007, 00:02)

Tim:-
Stu-
This is a great site and I look to your examples often to problems I have with CSS, Thank you for your hard work. This code how ever doesn't play nice with Adobe Contribute, :-(. A good portion of the page is off the screen to the left in the editor.
(02.04.2007, 14:23)

Dave:-
Stu,
Thanks, this helped me. In my case I used method 1 and applied the border to the body tag (I needed to do this without adding a div and I already had a container div wraping all the content). So here's what I did:

* html body {border-right:850px solid #fff; }
* html #container {display: inline-block; position: relative; margin-right: -800px; padding-right: 0px; }

I needed 50px of white space at the right, which accounts for the difference between 850px border and 800 px negative margin.

thanks again.
Dave
(21.04.2007, 22:44)

Luke Visinoni:-
Does anybody know how to use this and apply a max-width as well?
(25.04.2007, 18:17)

Dr.Diesel:-
Thx a lot. I found the quirksmode first and I couldn't figure out, why it doesn't work. Than I googled again and found Standards compilant, which worked - to the hell with such pseudosoft like IE, I hate it. For FF I make 10min programming and than 2 hours for ..cking IE . Thx again, I was going to lose my mind ...
(16.06.2007, 15:22)

gcp:-
doesnt appear to work on macs version of ie (no longer supported by ms), one should note that on the example that this is Windows IE only!
(17.07.2007, 04:59)

Stu:-
gpc, I do mention that versions 4 and 5 will work on Mac IE as well as on PC.
(17.07.2007, 08:07)

Marcelo:-
great, but it doesnt work when if you need the min-width to be more than 960px
(11.08.2007, 05:51)

Stu:-
Marcelo, version 5 does.
(11.08.2007, 06:43)

isaac:-
Thank you! The information you posted has been very helpful. I adapted it to suit the particular needs of the site I'm working on. In case this is helpful to anyone else:

I have a site that needs a min-width set for the body element. Of course ie7 and firefox can do this just fine using the min-width property. For ie6, here's what i did (thanks to the info posted on this site)...

The html for the page is:
<html>
<body>
<div id="header">
content
</div>
<div id="content">
content
</div>
</body>
</html>

css for ie6 (in a separate "fix_ie6.css" style sheet, added with a conditional comment):

body {
border-right:790px solid #fff;
}

div#header {
margin-right: -790px;
}

div#content {
float:left;
position:relative;
margin-right:-790px;
}

And that seems to do it... mimics css of
body {min-width: 790px;}
at least in this particular situation. Your mileage may vary, depending on the particular html of your page.
(17.12.2007, 23:27)

Nikola Nikolov:-
This is great. I'm using similar method for my warper (min-with:1024px). There are some other floating divs and content. In IE7 and Mozilla everything is fine even when I make a smaller window the scrolls appear and nothing is mispositioned. The biggest problem was IE6. Once again the scrolls appear but the images and the flash content it not at the position. So here i found the answer. Thanks!!! I didn't use {width:100%;min-width:1024;} but {width:1024;min-width:100%;} and it works!!!
(11.03.2008, 16:18)

Maik:-
Hi Stu,

is the problem well-known, that IE6 moves the modell to the left outside the viewport, if the "min-width" behave more than 960 pixels?

Do you know, how that kind of mysterious bug can be fixed?

Best regards and thank You for Your answer.

Maik
(04.04.2008, 18:20)

Maik:-
Sorry Stu,

I didn't collapse and read yesterday all the comments about Your "min-width"-Workaround. *shamed*

Bruno Fassinos model www.brunildo.org/test/min-widthS.html has fixed the Bug ;)

Best regards
Maik
(05.04.2008, 20:26)

Jonathan:-
Great stuff, Stu ;)
(01.05.2008, 05:45)

abzockaa:-
Stu, You rock the CSS-HOUSE XD
(11.05.2008, 04:41)

Ramana Kumar:-
it is working great!, but what if we use content background other than #fff ? Iam using a background-image and repeating it in x-direction.
so now on top it white color border is comming,

can u plz suggest the solution!
thanks a lot
(14.08.2008, 11:50)

Ramana Kumar:-
Is there any workaround for IE7 ????????
plz help me! Iam cracking my head for the past 3 hrs :-(
(14.08.2008, 11:53)

Ralf Koch:-
Woah - you really made my day. Great stuff!
(03.04.2009, 00:48)

christian:-
if you get the max-width done like this you are the weltmeister
(06.05.2009, 09:58)

Trevor Saint:-
Hi Stu, having looked at your page happy to find the fix, I found that the page does not validate due to many reasons. Is it possible to get this working in a valid xhtml page.

As it is invalid it works in quirks mode, which is not ideal. Any clues?
(11.05.2009, 16:27)

Stu:-
There are several fixes for IE min width on the main page and some use standards compliant mode.
(11.05.2009, 16:40)

Martin:-
It works great.. but what if I want to center the text inside the second div?

as this div has no width (it adjusts to the text width) text-align: center; won't do anything. I can't use margin: auto; for the same reason.

any ideas?
(26.06.2009, 16:51)

Heimfrost:-
Thank you for your very good work.
I used it with success ;).
The only problem I had was the fact, that all my margins of my inner divs didn't work or willingly.
After a few cups of coffee, I found out, that I had to change out all margins with paddings and voila it worked.
Many good wishes and greetings from old Germany.
(29.01.2010, 10:56)

Heimfrost:-
Sorry, I forgot to say it also works with transparent min-height, I've tested in IE6.
U only have to change "margin-left" and "padding-left" with "margin-top" and "padding-top".
Only an advice, you have found out yourself, surely.
(29.01.2010, 13:35)

the_mahabarata:-
Doesn't word with a table :
<style type="text/css">
.sides { width: 200px; height: 30px; margin: 10px; border:1px solid #000; }
</style>
<table><tr><td><div class="sides"></td><td width="100%"><div class="container"><div class="holder"><div class="content"></td><td><div class="sidetop"></td></tr></table>

1st and 2d "td" are OK, but the 3d moves on the 2d !!
(18.03.2010, 13:51)

Anonym:-
Your curved corners are amazing!
(18.04.2011, 18:06)



Post

Your comment:

Your Name:

Stu's First Name - 3 letters (required)

Thanks to Alex for this script.

Please enter your comments for this site page.
Please note that all posts are moderated.

Posting rules

HTML is turned off
Maximum word length is 80 characters.
Messages limited to 1200 characters.
Web links should not include 'http://'

Support CSSPLAY

Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.


CUSTOM SEARCH

Facebook Twitter rss feed Facebook Fan Page