height:auto overrides all height styles

Question

I have a responsive page with two sections. All elements in right section should be responsive so I used :

#rightSection * {max-width:100%;height:auto}

however any further height styles are being ignored as you see in the code snippet.

I don't want to use !important because I have many inline styles with html codes so I prefer not forcing the styles through CSS. Is there any other way to set heights after height:auto?

    #rightSection * {max-width:100%;height:auto}


    .mydiv {
     width:534px;
     height:37px;
     box-sizing:border-box;
    }

<div id="rightSection">
  <div class="mydiv" style="background:#ff0000"></div>
</div>

That Red div is invisible because the height is igonred!

Yes, make your `.mydiv` selector more specific. Perhaps `#rightSection .mydiv`? — BenM, Jan 16 '17 at 17:09
That's why you **never use `id`selectors in CSS**. Just don't do it - it has **no** advantages and **alot of drawbacks**. Remember: ***Never***! — connexo, Jan 16 '17 at 17:19
As soon as you've memorized that, go learn about CSS specificity. — connexo, Jan 16 '17 at 17:26

score 2 · Accepted Answer · edited May 23 '17 at 12:08

2

According to your code whatever is happening is fine CSS means Cascading Style sheet that means the last rule applies and that to whichever is more specific. So in your case the first rule has higher specifity than the second rule so height:auto is being applied.

Refer link for more details on Specificity.

So in you code you can make the second role morre specific by different ways which you will come to know from the above link. Below is one such example.

 #rightSection * {max-width:100%;height:auto}


    #rightSection div {
     width:534px;
     height:37px;
     box-sizing:border-box;
    }

<div id="rightSection">
  <div class="mydiv" style="background:#ff0000"></div>
</div>

That Red div is invisible because the height is igonred!

Edit: As pointed out by @connexo i would suggest not use Id selectors refer this for more details on why.

You can use css classes instead as classes help to make your code more general for example

.outerDiv * {max-width:100%;height:auto}


    .outerDiv .mydiv{
     width:534px;
     height:37px;
     box-sizing:border-box;
    }

<div class="outerDiv">
  <div class="mydiv" style="background:#ff0000"></div>
</div>

That Red div is visible now  as the rule is more specific.

Hope it helps :)

edited May 23 '17 at 12:08

Community

1
1

answered Jan 16 '17 at 17:27

Manish

4,692
3
29
41

This, while solving the immediate problem, is making things worse, by advising carrying on with using `id` selectors in CSS (which you should absolutely only do if you know totally exactly 110% ***why*** you are using an `id`. And no, 'it's on the element' is not a valid and aceptable explanation!). – connexo Jan 16 '17 at 17:29
as i have mentioned that this is one possible solution. There can be many more that depends which one the question owner prefers and the html layout. – Manish Jan 16 '17 at 17:30
That is a technically working solution for the problem that was caused by the disease you suggest to keep alive using your cure. **No, this is not a good solution in any way thinkable.** – connexo Jan 16 '17 at 17:31
And I retracted my -1 vote. To get a +1 vote remove your first suggestion and go deeper into detail why the initially presented solution is bad. Find explanatory help here: http://screwlewse.com/2010/07/dont-use-id-selectors-in-css/ And btw, no need to remove the id from the HTML element. id attributes can be useful for Javascript and page anchor purposes. – connexo Jan 16 '17 at 17:43

score 1 · Answer 2 · answered Jan 16 '17 at 17:11

1

    #rightSection * {max-width:100%;height:auto}


    #rightSection .mydiv {
     width:534px;
     height:37px;
     box-sizing:border-box;
    }

<div id="rightSection">
  <div class="mydiv" style="background:#ff0000"></div>
</div>

That Red div is invisible because the height is igonred!

answered Jan 16 '17 at 17:11

Gokul P P

962
8
27

This, while solving the immediate problem, is making things worse. – connexo Jan 16 '17 at 17:24
@connexo what do you mean ? making it worse ? selector specifity, that's what it's about , is not it ? Or did you read somewhere using ID's might be a bad practice ? but usefull when used as anchor or .... can you explain your comment :) – G-Cyrillus Jan 16 '17 at 17:36

height:auto overrides all height styles

2 Answers2