CSS Example Not Working For Me

Wylbur · November 25, 2016

Hi All;

The height element does not seem to be working as expected for the following example:

http://www.w3schools.com/css/tryit.asp?filename=trycss_dim_max-height

When I resize the window/browser, the div element does not change in height.

I made a few changes to the code, adding a "border" to show the box better:


<!DOCTYPE html>
<html>
<head>
<style>
div {
    max-height: 600px;
    min-height: 200px;
    background-color: powderblue;
    border : solid;
}
</style>
</head>
<body>


<h2>Set the max-height and min-height of an element</h2>
<p>Resize the browser window to see the effect.</p>


<div>This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.</div>


</body>
</html>

Any ideas as to what the issue is?

... or am I missing something here?

Thanks!

dsonesuk · November 25, 2016

The content may not be enough to extend the container element height between 200px and 600px.

Wylbur · November 25, 2016

The content may not be enough to extend the container element height between 200px and 600px.

Hi D Sones

Thanks for the response.

I've been experimenting with this, and I cannot get the height to behave in the same way as the width

when I reduce the size of the window/browser. (The modified code is inserted below. I now have two

"div" tags, with one nested inside the other.)

To be more explicit: When I reduce the width of the window/browser, the boxes for the "div" tags narrow as well,

to the point that the min-width is reached (which is expected). When I reduce the height of the window/browser,

the height of the boxes do not change at all.

How would I get the same behavior for height as I do with width?


<!DOCTYPE html>
<html>
<head>

<style>

.outer_div
{
    /* height : 400px; */
    min-height : 400px;
    max-height : 700px;

    min-width : 300px;
    max-width : 900px;
    margin : 20px;
    border : solid;
}

.inner_div {
    /* height: 220px; */
    min-height: 220px;
    max-height: 280px;

    min-width: 400px;
    max-width: 700px;
    background-color: powderblue;
    foreground-color: black;
    border : solid;
    margin : 20px;
    /* clear : both; */
}


</style>
</head>

<body>

<div class='outer_div'>
<h2>Set the max-width of an element</h2>
<p>This div element has a height of 100px and a max-width of 500px:</p>

<div class='inner_div'>
:::------------------------------------this is some text : 1------------------------------:::<br/>
:::------------------------------------this is some text : 2------------------------------:::<br/>
:::------------------------------------this is some text : 3------------------------------:::<br/>
:::------------------------------------this is some text : 4------------------------------:::<br/>
:::------------------------------------this is some text : 5------------------------------:::<br/>
:::------------------------------------this is some text : 6------------------------------:::<br/>
:::------------------------------------this is some text : 7------------------------------:::<br/>

</div>

</div>
</body>
</html>

Thanks!

dsonesuk · November 26, 2016

The outer div height will never extend more than the max-height of inner div + 20px margin, remember the div height is determined by child element content, the inner div stops extending its height 280px, so its content area can't extend any further, but its content will seep out below it, but this has no effect on the outer container height.

Wylbur · November 27, 2016

The outer div height will never extend more than the max-height of inner div + 20px margin, remember the div height is determined by child element content, the inner div stops extending its height 280px, so its content area can't extend any further, but its content will seep out below it, but this has no effect on the outer container height.

Hi Dsones,

THANKS for the response!

I took out the inner div. The outer (only) div still does not resize vertically when I shorten the window/browser.

The only thing that will increase the height of the div is to increase the value of min-height, as changing max-height

doesn't seem to have any effect.

Am I correct in stating that max-height doesn't do anything to div?

What effect (purpose) does max-height have?

Edited November 27, 2016 by Wylbur

dsonesuk · November 27, 2016

The max-height as it suggest sets the highest height the element can have, so its height can extend from 0 a empty element, and as content increases within it to the max height set and not beyond that set max height, then after that you could set it to have a scroll bar to right using overflow: auto; or overflow-y: auto;

Wylbur · November 27, 2016

The max-height as it suggest sets the highest height the element can have, so its height can extend from 0 a empty element, and as content increases within it to the max height set and not beyond that set max height, then after that you could set it to have a scroll bar to right using overflow: auto; or overflow-y: auto;

Hi Dsones

OK - now I see.

From what I can determine, it looks as if height and min-height will override each other, using whichever is the largest.

In furtherance of my experiment, I switched to span, with display : block. It doesn't look like there is any difference from div.

Please correct me if I am wrong.

I've also switched to 'em' for size specifications.

From all of this, I don't see the point of the example that I referenced within my original post, and what it is intended to demonstrate:

http://www.w3schools..._dim_max-height

This is the state of my code at this point:

<!DOCTYPE html>
<html>
<head>

<style>

.group:after {
  content: "";
  display: table;
  clear: both;
}

.container_tag
{
    min-height : 28em;
    height : 24em;
    max-height : 38em;

    min-width : 30em;
    max-width : 57em;

    background-color: lightgreen;
    foreground-color: black;
    margin : 20px;
    border : solid;

    clear : both;
    display : block;
}
</style>
</head>
<body>

<span class='container_tag group'>

<h2>Set the max-width of an element</h2>
<p>This div element has a height of 100px and a max-width of 500px:</p>

:::------------------------------------this is some text : 1------------------------------:::<br/>
:::------------------------------------this is some text : 2------------------------------:::<br/>
:::------------------------------------this is some text : 3------------------------------:::<br/>
:::------------------------------------this is some text : 4------------------------------:::<br/>
:::------------------------------------this is some text : 5------------------------------:::<br/>
:::------------------------------------this is some text : 6------------------------------:::<br/>
:::------------------------------------this is some text : 7------------------------------:::<br/>

</span>
</body>
</html>

If there is nothing more to investigate, then I'll leave it at that.

THANK YOU for your responses!

Edited November 27, 2016 by Wylbur

Ingolme · November 27, 2016

I think you need to understand how browsers render width and height. They're different.

By default, block elements expand to take up as much width as possible. They will be as wide as their parent elements allow them to be without exceeding boundaries.

By default, block elements shrink until they take as little height as possible. They are only as tall as the content inside them.

min-height prevents the box from getting any smaller than the specified value. That means that if there isn't enough content in the box to make it any taller it will stay at the min-height.

If you're setting min-height or max-height then there's no reason to set the height.

Sign In

CSS Example Not Working For Me

Recommended Posts

Wylbur

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

Wylbur

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

Wylbur

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

Wylbur

Link to comment

Share on other sites

Ingolme

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity