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.
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.
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... :)
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... :)
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>
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?
>> but I want it to grow as much as possible when stretched?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Peter - I'm sorry, I should have refreshed the page...
There you go mrichmon :-)
There you go mrichmon :-)
no biggie :-) cheers!
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?
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
http://css-discuss.incutio.com/?page=ChildHack
ASKER
Cool. Thanks to both Peter and Sean. I will try these out later today when I have a chance.
ASKER
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.
Thanks to you both.
<div style = "width:100%;background-col
<div style = "width:500px;background-co
Content goes here
</div>
</div>
colors obviously just to show what is going on
Cheers,
dayton