Link to home
Start Free TrialLog in
Avatar of mrichmon
mrichmon

asked on

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.
Avatar of ecupd
ecupd
Flag of Australia image

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
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... :)
Avatar of seanpowell
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>
Sean You missed this:

>> but I want it to grow as much as possible when stretched?
ASKER CERTIFIED SOLUTION
Avatar of PeterCN
PeterCN

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Peter - I'm sorry, I should have refreshed the page...

There you go mrichmon :-)
Avatar of PeterCN
PeterCN

no biggie :-)  cheers!
Avatar of mrichmon

ASKER

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?
> 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
Cool.  Thanks to both Peter and Sean.  I will try these out later today when I have a chance.
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.