Solved

Maybe an obvious question about minimum width :o)

Posted on 2004-08-31
12
1,076 Views
Last Modified: 2008-02-20
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.
0
Comment
Question by:mrichmon
  • 4
  • 3
  • 2
  • +2
12 Comments
 
LVL 2

Expert Comment

by:ecupd
ID: 11949187
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
 
LVL 11

Expert Comment

by:neester
ID: 11950644
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
 
LVL 31

Expert Comment

by:seanpowell
ID: 11950659
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
 
LVL 11

Expert Comment

by:neester
ID: 11950708
Sean You missed this:

>> but I want it to grow as much as possible when stretched?
0
 
LVL 4

Accepted Solution

by:
PeterCN earned 300 total points
ID: 11950763
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
 
LVL 31

Assisted Solution

by:seanpowell
seanpowell earned 200 total points
ID: 11950785
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
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
LVL 31

Expert Comment

by:seanpowell
ID: 11950852
Peter - I'm sorry, I should have refreshed the page...

There you go mrichmon :-)
0
 
LVL 4

Expert Comment

by:PeterCN
ID: 11951662
no biggie :-)  cheers!
0
 
LVL 35

Author Comment

by:mrichmon
ID: 11954604
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
 
LVL 31

Expert Comment

by:seanpowell
ID: 11954829
> 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
 
LVL 35

Author Comment

by:mrichmon
ID: 11954863
Cool.  Thanks to both Peter and Sean.  I will try these out later today when I have a chance.
0
 
LVL 35

Author Comment

by:mrichmon
ID: 11960147
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

Featured Post

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
jquery, html5 UI 1 48
How to represnt 52 selections 1 33
Hover Gone 16 30
Install bootstrap locally using Angular CLI 2 20
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…

706 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now