MozillaZine

nested DIV and resizing for height

Discuss how to use and promote Web standards with the Mozilla Gecko engine.
wylbur231
New Member
 
Posts: 1
Joined: November 26th, 2016, 6:30 am

Post Posted November 26th, 2016, 6:41 am

Hi;

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 code is inserted below. I 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.

Can anyone show me how I would get the same behavior for height as I do with width?

(Actually, the single "div" that remains after removing the inner "div" will not resize in the way that
would be expected either.)


Code: Select all
<!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!

DanRaisch
Moderator

User avatar
 
Posts: 117994
Joined: September 23rd, 2004, 8:57 pm
Location: Somewhere on the right coast

Post Posted November 26th, 2016, 8:57 am

Moving to Web Development.

BruceAWittmeier

User avatar
 
Posts: 2625
Joined: June 9th, 2008, 10:53 am
Location: Near 37.501685 -80.147967

Post Posted November 29th, 2016, 3:27 pm

If any container has a min width that will be applied regardless of sizing of other elements. I think this may work more smoothly and/or correct - but not sure what your goal is.

If you need a min set it on the largest/outside container in this case -- outer container -- only and let the inner containers respond as needed by margin/padding.

Code: Select all
<!DOCTYPE html>
<html><head>

<style>
.outer_div {
  border: medium solid ;
  margin: 20px 20px 20px;
  max-width: 900px;
  /// min-width: 300px;
  min-height: 400px;
}

.inner_div {
  border: medium solid ;
  margin: 20px 20px 20px;
  min-height: 220px;
  background-color: powderblue;
}

</style>

<title>test html</title>

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


or this using clear both:

Code: Select all
<!DOCTYPE html>
<html><head>

<style>
.outer_div {
  border: medium solid ;
  margin: 20px 20px 20px;
  max-width: 900px;
  /// min-width: 300px;
  min-height: 400px;
  clear: both;
}
.inner_div {
  border: medium solid ;
  margin: 20px 20px 20px;
  min-height: 220px;
  background-color: powderblue;
}

</style><title>test html</title></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>
~ I'm only here to Pay it Forward. ~

"I often take a very long windy road to my destination. When I arrive I often wonder how I missed the shortcut".

Return to Web Development / Standards Evangelism


Who is online

Users browsing this forum: No registered users and 2 guests