Solved

Maybe an obvious question about minimum width :o)

Posted on 2004-08-31
12
1,089 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
PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

 
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

NAS Cloud Backup Strategies

This article explains backup scenarios when using network storage. We review the so-called “3-2-1 strategy” and summarize the methods you can use to send NAS data to the cloud

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Objects on Same Line 2 30
How to make footer stick to bottom 9 29
DataTables + iCheck + pagination Issue 2 23
Center div containing a script 6 16
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
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 tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

773 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