Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why would max-width not work on this?

Tags:

html

css

button

Using plain old CSS, why won't 'max-width' not work on the following:

button {
  text-align: center;
  max-width: 540px;
  height: auto;
  display: block;
  padding: 10px 0;
  margin: 0 auto;
  border: none;
}

The wrapper for this element:

#wrapper {
  max-width: 1024px;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
  padding: 0 50px;
  text-align: center;
}

EDIT

Code added to jsfiddle: http://jsfiddle.net/BXdrG/

like image 751
egr103 Avatar asked Feb 18 '13 14:02

egr103


People also ask

How does Max-Width work?

The max-width property defines the maximum width of an element. If the content is larger than the maximum width, it will automatically change the height of the element. If the content is smaller than the maximum width, the max-width property has no effect.

What should I set my max-width to?

1280px and 1920px are the two standard widths for web design. A 1280px website will look great on laptops and mobile devices but not so great on large monitors. To ensure your site looks just as good on big screens as it does on small screens, set your max site width to 1920px or more.

Does width override max-width?

max-width overrides width , but min-width overrides max-width .

How do I fix width in HTML?

To convert it to a fixed-width layout, simply add a fixed with to the #wrapper and set the margins to auto. Setting the margins to auto will cause the left and right margins to be equal no matter how wide the browser window is, which will cause your fixed-width layout to be positioned in the center of the browser.


3 Answers

For max-width to work correctly, your element first needs a certain width. Use 100% to achieve what you want. See here:

http://jsfiddle.net/QsHa9/

like image 107
Michael Giovanni Pumo Avatar answered Oct 19 '22 18:10

Michael Giovanni Pumo


Ah ok, I misunderstood its use. To get a fluid button that won't stretch to massive sizes I added the following:

width:100%;
max-width: 540px;

Thanks commenters!

like image 43
egr103 Avatar answered Oct 19 '22 18:10

egr103


button {
  text-align: center;
  max-width: 540px;
  height: auto;
  display: block;
  padding: 10px 0;
  margin: 0 auto;
  border: none;

  width:100%; /* you forgot this */
}
like image 31
Milche Patern Avatar answered Oct 19 '22 16:10

Milche Patern