is there any way to set a minimum width on a div with a % width?
i have a banner at the top of a layout i have and if the screen width is small enough the graphic hangs over the side
the whole thing is centered, and it looks funny when it hangs over the one side
Yes, just use min-width 
div.something
{
min-width:50%;
}
i guess that was simple
thanks, i didn’t look far enough into the list
You’re welcome lol :). At least you searched which was a good effort on your part :tup:
FYI:
I usually set min-width in pixels:
body {
width:100%;
min-width:600px;
max-width: 1200px;
}
If there’s a problem doing it like this, I hope someone tells me, because I have several sites using this right now…! (I do understand that IE has a [URL=“http://www.webcredible.co.uk/user-friendly-resources/css/internet-explorer.shtml”]problem with min-width, [URL=“http://www.howtocreate.co.uk/ie8.html”]even in IE8. I don’t give a damn about pre-IE6 browsers, but we’re still forced to deal with 6 and above, and as far as I know, there isn’t a one-size-fits-all, easy-to-implement fix for the various IEs. If someone does know of such a solution, post it!)
Min-width for IE8 is rare that you will run into that bug since you generally don’t put it on columns to avoid drops, IE6 just doesn’t suipport it, and there is indeed a 1 size fits all (either expression) or the extra markup (Quiz 3) which does work flawlessly in all browsers
Ryan, I owe you a whole sack of cookies. I’ve cut/pasted Paul’s solution to the IE min-width dealie, and I’m going to spend some time tomorrow performing minor surgery on some sites to bring them into the fold.
Max, did you use the JS version or the border trick?
Also Ryan gets cake because he’s passed 10,000 posts
It would be better to use padding instead of border because in IE6 it has a lmit on the border value, where as padding does not (and it does the same thing :))
So I get a cake and a lot of cookies. Guys trying to pork me up for something ;)?
[ot]Now, the cake and cookies are for two different things. I’d take them all if it were me.
[/ot]
Nice tip about the padding.
We were in Rotterdam yesterday so we popped into the mac shop just to giggle… and there was this thing I swear it was 27" or something and my web site just looked like one of those little centered 800px blog strips!
I use this bit of JS to make IE happy:
min-width:600px;
max-width: 1200px;
width: expression(document.body.clientWidth < 602? "600px" : document.body.clientWidth > 1202? "1200px" : "auto");
IE6 has a limit on border values?
Fear the porkery, gentlemen. Once it starts, it is hard to stop.
Yes, the limit IE6 will allow on a border v alue is 960px. After that you will need a second nested <div>to put some of the border on, and then of course a negative margin to drag it back over
Expressions are very slow (actually thousands of times slower) and should be avoided. Luckily there is a fix (from Steve Souders) that allows the expression to run once and then js takes over.
I’ve integrated it into this demo so just view source
BTW when you use expressions it’s good practice to also cater for quirks mode (i.e. check compatMode) or the browser may crash badly.
BTW when you use expressions it’s good practice to also cater for quirks mode (i.e. check compatMode) or the browser may crash badly.
I be confuzled. Don’t we control if the browser is in Quirks Mode? I mean, we don’t write CSS for quirks mode. We should write expressions for it?
The problem is that css will rarely crash the browser but the min-width expressions will crash it very often if it’s not correct.
Remember also that some free hosts stick a load of code above the doctype and trigger quirks mode in error also.
Hi Paul
I have always heard that expressions were resource hogs and I have been reading up on the subject lately.
I was looking around for a pure js script to replace a min-max width expression for IE6. I don’t know how to write js so I was looking for a pre-built script that I could adjust as needed. I found this min-width script at Robert Nyman’s blog.
Stop using poor performance CSS expressions
I was hoping to find something like that script he posted that would take care of both min & max widths.
( I was trying to avoid anything that is dependent on a jQuery library )
Expressions are very slow
Now from my understanding a pure js solution would be slower than expressions. Exressions are constantly running and monitoring the events which make them faster but makes them resource hogs at the same time. Is that not right?
Or rather than saying “they are slow” did you mean “they are resource hogs”.
It looks like you have just what I was looking for in your demo. 
So is that just an expression with an event handler tied in to it?
Javascript isn’t my area either but my understanding is that expressions slow the whole page down to a crawl so although they may be ready to react quicker the effect is in fact slower.
You only have to look at the fixed header and footer routines to see the page jumping wildly (although some of that jitter can be cured with an image on the html element) but they are always slower than a dedicated script.
Or rather than saying “they are slow” did you mean “they are resource hogs”.
Yes both as the net effect is to slow everything down
For a resize script you only want it to work when the window is resized and not when the mouse is just moving across the screen.
Steve Souders has some expression counters here when you can see the effect for real.
It looks like you have just what I was looking for in your demo.
So is that just an expression with an event handler tied in to it?
That’s the main reason I book Steve Souders book to get that routine It simply evaluates the expression to a fixed pixel size so that it only runs once when the page is first drawn. From then on the Javascript takes over only when the window is resized.
This is the original example which I adapted to my layout. It probably doesn’t make best use of the routine as I am only setting then min and max width of a few elements. Feel free to borrow and improve as I just play around with this stuff
Ray, I came across Nyman’s site some time ago, and promptly lost track of it in my forest of bookmarks. Thanks for bringing it up again. I’m going to give both his and Paul’s fixes a spin and see how they work. You’re right in noting that Nyman’s script only handles max-width issues.
Edit: Paul, your 3-col site uses a #wrapper to set min- and max-widths, and that’s what you hang your minmax JS from. In a structure without a #wrapper element or anything analogous, would it be kosher to hang the JS from the body tag if that’s where all the width and other elements are located?
In another thread, Paul listed some bugs in IE (or at least IE6) when the body was the one having set widths (in CSS)… so if those body bugs could be translated to JS than that might be a problem.
I’m also spinning my head into a loop trying to figure out how IE would change the width of the body… based on the width of the body (isn’t that what IE checks for viewport? body.clientWidth?).