min-width and max-width

**twirp** · April 24th, 2007, 6:10 PM

...
I'm having an issue with firefox and opera.
I can't use position absolute because it's in another div that's position absoluted...
So I'm trying to use floats and min-width and max-width to control the size (it messes up when I do width:100%; )
So here's the code:

Code:

<html>
<head>
<style type="text/css">
<!--
#menu{
	float: left;
	width: 150px;
	border: 5px solid #00FF00;
}

#content{
	float: left;
	min-width: 300px;
	max-width: 600px;
	border: 5px solid #0000FF;
}
-->
</style>
</head>
<body>
<div id="menu">
Text
</div>

<div id="content">
Text
</div>
</html>

If you use internet exploder, it works fine like I want it to and when you resize it, it gets smaller and larger and whatnot.
But when you use firefox or opera, when you make it smaller, the "content" jumps below the menu.

Example:
http://lost-whisper.info/test.html
Notice how the blue box jumps beneath the green box...

**cowboy** · April 24th, 2007, 7:10 PM

Min and max width are not recognized by IE.

With "menu" set at 150 px and "content" min-width set at 300 px, any resizing less than 450 px (+ border width), content will attempt a wrap.

Put both in another div (#container) and set it's min-width to 450 px (+overhead) and the browser should scroll horizontal.

**twirp** · April 24th, 2007, 9:34 PM

Quote:

Originally Posted by cowboy

Min and max width are not recognized by IE.

With "menu" set at 150 px and "content" min-width set at 300 px, any resizing less than 450 px (+ border width), content will attempt a wrap.

Put both in another div (#container) and set it's min-width to 450 px (+overhead) and the browser should scroll horizontal.

Sorry, I don't quite understand what you're saying...

H · April 24th, 2007, 9:40 PM

I know for a fact IE6 and below don't support min/max-width, but I thought IE7 does...

Anyways, if you want to hack in support for min/max-width (i don't recommend it), you can actually use some IE specific scripting within the CSS file. I can't remember exactly how it looks, but it basically accesses JavaScript to get calculations and perform math.

I fail to see why you can't have something as set position absolute within something something set as position absolute. I can't recall any rule against it.

**cowboy** · April 24th, 2007, 11:45 PM

Quote:

Originally Posted by twirp

Sorry, I don't quite understand what you're saying...

Code:

<html>
<head>
<style type="text/css">
<!--
#container {
    min-width: 460px;
}
 
#menu{
    float: left;
    width: 150px;
    border: 5px solid #00FF00;
}
 
#content{
    float: left;
    display: inline;
    min-width: 300px;
    max-width: 600px;
    border: 5px solid #0000FF;
}
-->
</style>
</head>
<body>
<div id="container">
<div id="menu">
Text
</div> <!-- end menu -->
 
<div id="content">
Text
</div> <!-- end content -->
</div> <!-- end container -->
</html>

mgk · April 25th, 2007, 4:32 AM

the above example has the same behaviour :-(

reddshack · April 25th, 2007, 7:06 AM

Because the menu and content divs are floating, the right one will always drop below whenever the browser width is less than the 2 divs widths. To fix it just put a container around the two of them that specifies a width equal or greater than the 2 divs widths inside.

To avoid cross-browser problems just avoid 'min' and 'max' altogether and only use a fixed/static width property. So essientially it's like cowboy said, however, remove the min and max and you'll be fine.

I tested and it works for me FF2 and IE6.

Code:

<html>
<head>
<style type="text/css">
<!--
#container {
    width: 600px;
}
 
#menu{
    float: left;
    width: 150px;
    border: 5px solid #00FF00;
}
 
#content{
    float: left;
    display: inline;
    width: 400px;
    border: 5px solid #0000FF;
}
-->
</style>
</head>
<body>
<div id="container">
<div id="menu">
Text
</div> <!-- end menu -->
 
<div id="content">
Text
</div> <!-- end content -->
</div> <!-- end container -->
</html>

**twirp** · April 25th, 2007, 3:21 PM

Quote:

Originally Posted by reddshack

Because the menu and content divs are floating, the right one will always drop below whenever the browser width is less than the 2 divs widths. To fix it just put a container around the two of them that specifies a width equal or greater than the 2 divs widths inside.

To avoid cross-browser problems just avoid 'min' and 'max' altogether and only use a fixed/static width property. So essientially it's like cowboy said, however, remove the min and max and you'll be fine.

I tested and it works for me FF2 and IE6.

Code:

<html>
<head>
<style type="text/css">
<!--
#container {
    width: 600px;
}
 
#menu{
    float: left;
    width: 150px;
    border: 5px solid #00FF00;
}
 
#content{
    float: left;
    display: inline;
    width: 400px;
    border: 5px solid #0000FF;
}
-->
</style>
</head>
<body>
<div id="container">
<div id="menu">
Text
</div> <!-- end menu -->
 
<div id="content">
Text
</div> <!-- end content -->
</div> <!-- end container -->
</html>

The problem is different browser resolutions...
I have a widescreen and a 1024x728, but my fried has a 800x600, so I'm trying to be considerate on all browsers...

reddshack · April 25th, 2007, 3:23 PM

So you want the width to always fill the screen to the fullest regardless of how big or small the resolution?

April 24th, 2007, 6:10 PM	#1 (permalink)
twirp DemonicAngel Super #1 Joined in Aug 2004 Lives in Wherever The World Takes Me Hosted on Pass76 1,827 posts Gave thanks: 26 Thanked 35 times	min-width and max-width ... I'm having an issue with firefox and opera. I can't use position absolute because it's in another div that's position absoluted... So I'm trying to use floats and min-width and max-width to control the size (it messes up when I do width:100%; ) So here's the code: Code: <html> <head> <style type="text/css"> <!-- #menu{ float: left; width: 150px; border: 5px solid #00FF00; } #content{ float: left; min-width: 300px; max-width: 600px; border: 5px solid #0000FF; } --> </style> </head> <body> <div id="menu"> Text </div> <div id="content"> Text </div> </html> If you use internet exploder, it works fine like I want it to and when you resize it, it gets smaller and larger and whatnot. But when you use firefox or opera, when you make it smaller, the "content" jumps below the menu. Example: http://lost-whisper.info/test.html Notice how the blue box jumps beneath the green box... __________________ You wear Vans so high school kids will think that you can skate. He wears Vans because he can skate. TwiRp wears Vans because they were on sale. Pass76 wants Vans.

April 24th, 2007, 7:10 PM	#2 (permalink)
cowboy Surpass Fan Excelling Contributor Joined in Nov 2005 Lives in Colorado Hosted on DEDI 934 posts Gave thanks: 2 Thanked 94 times	Min and max width are not recognized by IE. With "menu" set at 150 px and "content" min-width set at 300 px, any resizing less than 450 px (+ border width), content will attempt a wrap. Put both in another div (#container) and set it's min-width to 450 px (+overhead) and the browser should scroll horizontal. __________________ Where would you be if you were at the highest court in the land (US)?

April 25th, 2007, 4:32 AM	#6 (permalink)
mgk Registered User Excelling Contributor Joined in Mar 2007 Lives in Wales Hosted on dime999 610 posts Gave thanks: 47 Thanked 46 times	the above example has the same behaviour :-( __________________ Markus

April 25th, 2007, 7:06 AM	#7 (permalink)
reddshack Registered User Seasoned Poster Joined in Apr 2005 Lives in Provo.UT Hosted on sh111 56 posts Gave thanks: 3 Thanked 5 times	Because the menu and content divs are floating, the right one will always drop below whenever the browser width is less than the 2 divs widths. To fix it just put a container around the two of them that specifies a width equal or greater than the 2 divs widths inside. To avoid cross-browser problems just avoid 'min' and 'max' altogether and only use a fixed/static width property. So essientially it's like cowboy said, however, remove the min and max and you'll be fine. I tested and it works for me FF2 and IE6. Code: <html> <head> <style type="text/css"> <!-- #container { width: 600px; } #menu{ float: left; width: 150px; border: 5px solid #00FF00; } #content{ float: left; display: inline; width: 400px; border: 5px solid #0000FF; } --> </style> </head> <body> <div id="container"> <div id="menu"> Text </div> <!-- end menu --> <div id="content"> Text </div> <!-- end content --> </div> <!-- end container --> </html> __________________ sh111 reddshack.com

April 25th, 2007, 3:23 PM	#9 (permalink)
reddshack Registered User Seasoned Poster Joined in Apr 2005 Lives in Provo.UT Hosted on sh111 56 posts Gave thanks: 3 Thanked 5 times	So you want the width to always fill the screen to the fullest regardless of how big or small the resolution? __________________ sh111 reddshack.com Last edited by reddshack; April 25th, 2007 at 3:25 PM.

April 24th, 2007, 9:40 PM	#4 (permalink)
H after g, before i Resident. Joined in Jul 2004 Lives in N,BC,CA 8,058 posts Gave thanks: 48 Thanked 129 times	I know for a fact IE6 and below don't support min/max-width, but I thought IE7 does... Anyways, if you want to hack in support for min/max-width (i don't recommend it), you can actually use some IE specific scripting within the CSS file. I can't remember exactly how it looks, but it basically accesses JavaScript to get calculations and perform math. I fail to see why you can't have something as set position absolute within something something set as position absolute. I can't recall any rule against it.

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Rate This Thread
Rate This Thread: