Maximum and Minimum Width Solution for All Browsers
Jan 27, 2010 HTML/CSS, Tips and Tricks
min-width and max-width is very useful command of CSS, whereby you can specify a minimum width for any element. This can be particularly useful for specifying a minimum width for a page.
Unfortunately, this command IE doesn’t understand, so we’ll need to come up with a new way of making this functionality work in this browser.
First, insert a <div> under the <body> tag, as we can’t assign a minimum width to the <body>:
<body>
<div>
Next, we create our CSS commands, to create a minimum width of 600px:
#container
{
min-width: 600px;
width:expression(document.body.clientWidth < 600? “600px”: “auto”);
}
The first command is the regular minimum width command; the second is a short JavaScript command that only IE understands. Do note, though, that this command will cause your CSS document to become invalid; you may prefer to insert it into the head of each HTML document to get around this.
You might also want to combine this minimum width with a maximum width:
#container
{
min-width: 600px;
max-width: 1200px;
width:expression(document.body.clientWidth < 600? “600px” : document.body.clientWidth > 1200? “1200px” : “auto”);
}
Random Posts
Tags: CSS, CSS Hacks, CSS Tips n Tricks, DIV, HTML/CSS
January 31st, 2010 at 6:39 pm
Great post! Nice blog.
February 1st, 2010 at 7:45 am
[...] This post was mentioned on Twitter by Pinceladas da Web, gustavobarbosa. gustavobarbosa said: RT @pinceladasdaweb: Maximum and Minimum Width Solution for All Browsers: http://migre.me/idfX [...]
February 1st, 2010 at 10:13 am
Maximum and Minimum Width Solution for All Browsers | Ejaz Ahmad…
min-width and max-width is very useful command of CSS, whereby you can specify a minimum width for any element. This can be particularly useful for specifying a minimum width for a page. Unfortunately, this command IE doesn’t understand, so we’ll nee…
February 1st, 2010 at 11:09 am
Maximum and Minimum Width Solution for All Browsers | Ejaz Ahmad…
min-width and max-width is very useful command of CSS, whereby you can specify a minimum width for any element. This can be particularly useful for specifying a minimum width for a page. Unfortunately, this command IE doesn’t understand, so we’ll nee…
February 1st, 2010 at 11:10 am
Maximum and Minimum Width Solution for All Browsers | Ejaz Ahmad…
min-width and max-width is very useful command of CSS, whereby you can specify a minimum width for any element. This can be particularly useful for specifying a minimum width for a page….
February 1st, 2010 at 11:41 am
good one
February 1st, 2010 at 12:29 pm
Maximum and Minimum Width Solution for All Browsers…
Thank you for submitting this cool story – Trackback from Servefault.com…
February 1st, 2010 at 12:58 pm
Maximum and Minimum Width Solution for All Browsers | Ejaz Ahmad…
min-width and max-width is very useful command of CSS, whereby you can specify a minimum width for any element. This can be particularly useful for specifying a minimum width for a page….
February 1st, 2010 at 1:03 pm
Maximum and Minimum Width Solution for All Browsers | Ejaz Ahmad…
min-width and max-width is very useful command of CSS, whereby you can specify a minimum width for any element. This can be particularly useful for specifying a minimum width for a page. Unfortunately, this command IE doesn’t understand, so we’ll nee…
February 1st, 2010 at 8:38 pm
Social comments and analytics for this post…
This post was mentioned on Twitter by pinceladasdaweb: Maximum and Minimum Width Solution for All Browsers: http://migre.me/idfX...
February 2nd, 2010 at 2:15 am
This article has been shared on favSHARE.net. Go and vote it!
February 2nd, 2010 at 9:09 am
[...] Solución para máximos y mínimos tamaños de ancho para todos los navegadores. – Maximum and Minimum Width Solution for All Browsers | Ejaz Ahmad [...]
February 2nd, 2010 at 7:22 pm
Hello. I don’t read many blogs, but yours is of thefew I read.Have a awesome day!
February 2nd, 2010 at 11:53 pm
[...] Maximum and Minimum Width Solution for All Browsers [...]
February 3rd, 2010 at 12:57 am
[...] Maximum and Minimum Width Solution for All Browsers [...]
February 3rd, 2010 at 10:08 pm
I really like what you published here – it’s well-written. Thanks for posting this. I’ve been experimenting with WordPress lately. Do you utilize WordPress? Any tips for me? Click here if you’d like to check out my site. Have a great week!
February 11th, 2010 at 6:42 pm
Hello, firstly I want to tell you that I follow your blog. Great post, I fully agree with you. Have a good day maty.
February 16th, 2010 at 8:32 am
nice post. thanks.
May 2nd, 2010 at 10:36 pm
Pretty nice post. I just stumbled upon your blog and wanted to say that I have really enjoyed browsing your blog posts. In any case I’ll be subscribing to your feed and I hope you write again soon!