Setting the height to "auto" will take precedence over any other

Question

Setting the height to "auto" will take precedence over any other

I recently designed a responsive webpage with two distinct sections. In order to ensure all elements in the right section were responsive, I utilized the following CSS code:

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

Despite this, I noticed that any additional styling related to height was not taking effect, as evident in the code snippet.

Avoiding the use of !important is important for me due to the presence of numerous inline styles within the HTML code. So, I am seeking an alternative method to establish heights subsequent to using 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>

The red div remains invisible due to the ignored height property!

html css responsive

Answer 1

Answer №1

Everything that's occurring in your code is correct. CSS stands for Cascading Style sheet, which means the last rule takes precedence, especially if it is more specific. In this case, the first rule has a higher specificity than the second one, so height:auto is being applied.

For more details on Specificity, refer to the link provided.

In your code, you can increase the specificity of the second rule in various ways, as explained in the above link. Below is an 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>

The red div is invisible because the height is ignored!

Edit: As highlighted by @connexo, I recommend avoiding the use of Id selectors. You can refer to this for more information on why.

You can utilize css classes instead, as they help in making your code more universal. For instance:

.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>

Now, the red div is visible since the rule is more specific.

I hope this explanation helps :)

Answer 2

Everything that's occurring in your code is correct. CSS stands for Cascading Style sheet, which means the last rule takes precedence, especially if it is more specific. In this case, the first rule has a higher specificity than the second one, so height:auto is being applied.

For more details on Specificity, refer to the link provided.

In your code, you can increase the specificity of the second rule in various ways, as explained in the above link. Below is an 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>

The red div is invisible because the height is ignored!

Edit: As highlighted by @connexo, I recommend avoiding the use of Id selectors. You can refer to this for more information on why.

You can utilize css classes instead, as they help in making your code more universal. For instance:

.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>

Now, the red div is visible since the rule is more specific.

I hope this explanation helps :)

Answer 3

Answer №2

    #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>

The crimson colored division remains hidden as its height is overlooked!

Answer 4

    #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>

The crimson colored division remains hidden as its height is overlooked!

Setting the height to "auto" will take precedence over any other

Answer №1

Answer №2

Similar questions

The hover effect is not extending the full width of the dropdown menu

Signal for a complete 360 degree rotation of an image

Is it possible to adjust the dimensions of the number input spinner?

Converting a table into JSON format

How can I validate a password input in a form on click and reveal a hidden div on the same page without refreshing?

Jquery allows for the toggling of multiple checkboxes

Unable to place a div below another div

What is the method for obtaining the WordPress user ID?

Pandoc has removed all the line breaks in this text

Table for maximizing space within a cell (Internet Explorer 8)

The tabs are visible in the drawer, but the transition is not occurring

The validation tool from Google Rich Results indicates that no enriched content was found on this particular website link

Mobile Safari on iOS devices is known for its capability to overlay HTML5 <video> on top of everything

Implementing drag-and-drop functionality for text on an image using javascript

Setting up ng-show in AngularJS

Secure User Authentication using HTML and JavaScript Box

How can I modify the background color of the datePicker?

Consistent dimensions for columns in a table, automatically adjusting based on content

Displaying only the Active field in tabs in Bootstrap Django

How can I use Jquery to loop through each combobox on the page and delete those with a specific class name?