Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why doesn't max-width override min-width?

Tags:

css

I'm trying to create a responsive layout in which two boxes sit next to each other if the screen size allows it, and have them below each other if it doesn't. If the boxes are below each other, I'd like them to be centred to their parent. I've set up a jsfiddle to demonstrate the problem:

http://jsfiddle.net/leongersen/KsU23/

width: 50%; min-width: 350px; max-width: 100%; 

Try resizing the 'result' pane to below 350px. The elements will overlap their parent.

My question:

Why isn't the specified max-width honoured, even though it comes after the min-width?

like image 228
Lg102 Avatar asked Apr 17 '13 15:04

Lg102


People also ask

Does Max-Width override min-width?

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

Can I use width and max-width at the same time?

If you set a fixed width and a max-width , this means the following: If the width goes above max-width , keep it at max-width . If the width is below max-width , keep it on width . It will never go over the max-width , that doesn't mean it can't stay under, the max keyword obviously indicates a limit and not a rule.

Can we set min-width and max-width for an element at the same time?

And min-width specify lower bound for width. So the width of the element will vary from min-width to ... (it will depend on other style). So if you specify min-width and max-width , you will set up a lower and upper bound and if both are equal it will be the same as simply specifing a width .

How do you overwrite max-width?

The max-width property is always override by the min-width property in your declaration regardless of whether the first element of your declaration is before or after the width property.


2 Answers

Because of the CSS standards:

The following algorithm describes how the two properties influence the used value of the 'width' property:

  1. The tentative used width is calculated (without 'min-width' and 'max-width') following the rules under "Calculating widths and margins" above.
  2. If the tentative used width is greater than 'max-width', the rules above are applied again, but this time using the computed value of 'max-width' as the computed value for 'width'.
  3. If the resulting width is smaller than 'min-width', the rules above are applied again, but this time using the value of 'min-width' as the computed value for 'width'.

As such min-width always 'wins'. Within a specific CSS rule there's no precedence anyway, all values are applied atomically. Precedence only occurs when different rules all apply to the same element, and even then it is based on specificity first before file order is considered.

like image 132
Niels Keurentjes Avatar answered Oct 21 '22 11:10

Niels Keurentjes


I know, I'm late ... But one exact solution could be this:

p {     display: inline-block;     font-size: 15px;     text-align: left;     width: 50%;     border: 1px solid blue;     min-width: 350px; } @media (max-width: 700px) {   p {     width:100%;     display:block;   } } 
like image 39
Roland Gautier Avatar answered Oct 21 '22 12:10

Roland Gautier