Solved

Maybe an obvious question about minimum width :o)

Posted on 2004-08-31
12
1,116 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
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
 
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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
Suggested Courses

621 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