Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2064
  • Last Modified:

Minimum and maximum size (width) in CSS

Hi E's, all the projects I produce in the web has been made in css, but never with liquid size. Now I want produce a site with the measures as a percentage.
I want to know how I define for a width, a minimum size and a maximum size using css.
This is just because I want optimize my site for minimum of width-1024 and maximum 1920. In this way if customer have a resolution of 800*600, the browser don't destroy my design.

What is the best trick for the minimum and maximum size?

Regards, JC
0
Pedro Chagas
Asked:
Pedro Chagas
3 Solutions
 
numberkruncherCommented:
You can specify a minimum an maximum width for an element using the "min-width" and "max-width" styles:
#something {
   min-width: 10%;
   max-width: 90%;
}

Open in new window

0
 
numberkruncherCommented:
So for your particular example:

#something {
   min-width: 1024px;
   max-width: 1920px;
}

Open in new window

0
 
Pedro ChagasWebmasterAuthor Commented:
Hi, Thanks for the answers. Just one doubt, min a max-width work with IE6?

Regards, JC
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
numberkruncherCommented:
According to QuirksMode (http://www.quirksmode.org/)  min-width and max-width are not supported by IE6.

When you want to find out if a feature (be it CSS, JavaScript, HTML) is supported by different web browsers, QuirksMode (http://www.quirksmode.org/) is the site to visit. It lists computability comparisons for most features. I use this website all of the time, it is fantastic.
0
 
Pedro ChagasWebmasterAuthor Commented:
Hi, for the minimum size is good idea use a image with 1024 width? The image resolve the issue?
Regards, JC
0
 
Hube02Commented:
a reasonable work around for IE6.

As is stated, IE6 does not understand min/max width. But IE6 also does not understand the > child selector. Also, IE6 considers width to be min-width and will enlarge the width of an element. There is no fix for max-width.

to do this we create out wrapper div that we'll use to set up the widths of out page:

<body>
  <div id="wrapper">
    <!-- rest of html here -->
  </div>
</body>

for css:

/* set up default that will be used by IE6 */
#wrapper {
  width: 1024px;
}

/* now alter the width for browsers that understand the > child selector
     and min/max width */

body>#wrapper {
  width: auto;
  min-width: 1024px;
  max-width: 1920px;
}


/**************************

for more on the child selector: http://www.w3.org/TR/CSS2/selector.html#child-selectors
0
 
qwerty021600Commented:
Give

min-width: 1024px;
width: 1920px;
0
 
rafe_Commented:
As Hube02 said, IE6 does not recognise the min or max width and height attributes at all. However there is a better fix which does not require you to split up your properties into different statements, and is more intuitive to work with.

IE6 treats width and height as a min width and height respectively, and at the same time, it is the only browser which does not recognise the !important modifier, which is normally used to create a hierachy of css properties.

Hope that helps!
/* CSS FOLLOWS */
 
div.container {
 
 width: auto !important; /*non-IE browsers prefer this width property*/
 min-width: 1024px; /*IE ignores this completely*/
 width: 1024px; /*IE uses this property for width rather than the previous one because it ignores !important*/
 
 
}
 
 
/* CSS ENDS */
 
<!--HTML FOLLOWS-->
 
<body>
<div class="container">
 
</div>
</body>

Open in new window

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.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now