Maybe an obvious question about minimum width :o)

Is there a way in CSS to enforce a MINIMUM width only of a page?  As in I do not want the width to shrink past a certain point, but I want it to grow as much as possible when stretched?

I know I can simply add a spacer gif stretched at 1px hieght to my minimum width, but I was wondering if there is a CSS solution other than using a transparent gif.


Thanks.
LVL 35
mrichmonAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
PeterCNConnect With a Mentor Commented:
An expression would do it:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
      <title> IE "min-width" </title>
      <style type="text/css">
      
      #content {
            min-width:700px;
            width:expression(this.parentNode.offsetWidth<=700? 700:'auto');
      }

      </style>
</head>

<body>      
      <div id="content">            
            Lorem ipsum dolor sit amet lotsa content.
      </div>
</body>
</html>

Most browsers will use the min-width, and ignore the width property because only IE understands the expression, which is exactly what we want here ;-)
0
 
ecupdCommented:
try this for size:
<div style = "width:100%;background-color:#00ff00;">
     <div style = "width:500px;background-color:#ff0000;">

     Content goes here

     </div>
</div>

colors obviously just to show what is going on

Cheers,
dayton
0
 
neesterCommented:
there are CSS rules:

min-width
min-height

etc...

they only work in the most up-to-date webbrowsers...
ie - NOT IE!
:)

so that is the REAL answer - although it wont help you really.
best thing to do is have the spacer, you can use a DIV or a SPAN instead of the pixel, but its all the same in essesnce... :)
0
Take Control of Web Hosting For Your Clients

As a web developer or IT admin, successfully managing multiple client accounts can be challenging. In this webinar we will look at the tools provided by Media Temple and Plesk to make managing your clients’ hosting easier.

 
seanpowellCommented:
Hi mrichmon,

Actually min-width is fairly easy with IE:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<title></title>
<style type="text/css" media="screen">

body
{
      margin:0;
      padding:0;
      width: 700px;
}

html>body
{
      width: auto;
      min-width: 700px;
}

</style>
</head>

<body>

<div id="content">

      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy
      nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisi
      enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit loborti
      nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi. Duis autem do
      in hendrerit in vulputate velit esse molestie consequat, vel illum dolore euf
      eugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim quibl
      andit praesent luptatum zzril delenit au gue duis dolore te feugat nulla faci</p>

</div>

</body>
</html>
0
 
neesterCommented:
Sean You missed this:

>> but I want it to grow as much as possible when stretched?
0
 
seanpowellConnect With a Mentor Commented:
Sorry, I did:

You'll need this then:

body
{
      margin: 0;
      padding:0;
      width: expression((this.parentNode.clientWidth < 700)?700+"px":"auto");
}

html > body
{
      width: auto;
      min-width: 700px;
}
0
 
seanpowellCommented:
Peter - I'm sorry, I should have refreshed the page...

There you go mrichmon :-)
0
 
PeterCNCommented:
no biggie :-)  cheers!
0
 
mrichmonAuthor Commented:
I never knew that expressions within CSS were possible.  Learning new things all the time :o)

One quetion.

In your example Sean you have

html > body

I have never seen this notation before - can you explain what it means?
0
 
seanpowellCommented:
> is what's called a child selector. Since IE has no idea what it means, it simply disregards it, and thus allows us to feed the normal CSS min-width value to other browsers....
http://css-discuss.incutio.com/?page=ChildHack
0
 
mrichmonAuthor Commented:
Cool.  Thanks to both Peter and Sean.  I will try these out later today when I have a chance.
0
 
mrichmonAuthor Commented:
I gave more of the points to Peter since he came up with the solution first, and the rest to Sean since he included how to get it to work on the body with the IE hack.

Thanks to you both.
0
All Courses

From novice to tech pro — start learning today.