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?

Improve company productivity with a Business Account.Sign Up

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
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.