html - height:auto overrides all height styles -

i have responsive page 2 sections. elements in right section should responsive used :

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

however further height styles being ignored see in code snippet.

i don't want use !important because have many inline styles html codes prefer not forcing styles through css. there other way 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>    red div invisible because height igonred!

according code whatever happening fine css means cascading style sheet means last rule applies , whichever more specific. in case first rule has higher specifity second rule height:auto being applied.

refer link more details on specificity.

so in code can make second role morre specific different ways come know above link. below 1 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>    red div invisible because height igonred!

edit: pointed out @connexo suggest not use id selectors refer this more details on why.

you can use css classes instead classes make code more general 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>    red div visible  rule more specific.

hope helps :)