marc08 marc08 - 8 days ago 7
HTML Question

Div's height doesnt expand

I have been dealing with some problem about the divs height. It simply doesnt expand even thought theres a content. Let me first show you the problem on the screenshots:

Thats the content:
Thats the content

And thats the container:
enter image description here

As you can see, the container is pretty short even though it contains an element with some long content. I have tried things like adding "overflow: auto;" but it just adds some scrollbar.. not sure what else i can do here.. this is the most important code:

HTML:

<div id="menu2" class="container">
<div id="mytextbox" class="col-sm-12 col-xs-12">

<h2 id="h2Box1" style="visibility: visible">Text from the box1</h2>
<h2 id="h2Box2" style="visibility: hidden">Text from the box2</h2>
<h2 id="h2Box3" style="visibility: hidden">Text from the box3</h2>
<h2 id="h2Box4" style="visibility: hidden">Text from the box4</h2>

<p id="pBox1" style="visibility: visible">Paragraph from the box1</p>
<p id="pBox2" style="visibility: hidden">Paragraph from the box2</p>
<p id="pBox3" style="visibility: hidden">Paragraph from the box3</p>
<p id="pBox4" style="visibility: hidden">Paragraph from the box4</p>

</div>
<div id="box1" class="col-sm-6 col-xs-3 mybox active-box">
<span class="hidden-xs">BOX NAME 1</span>
<span class="visible-xs">1</span>
</div>

<div id="box2" class="col-sm-6 col-xs-3 mybox">
<span class="hidden-xs">BOX NAME 2</span>
<span class="visible-xs">2</span>
</div>
<div id="box3" class="col-sm-6 col-xs-3 mybox">
<span class="hidden-xs">BOX NAME 3</span>
<span class="visible-xs">3</span>
</div>
<div id="box4" class="col-sm-6 col-xs-3 mybox">
<span class="hidden-xs">BOX NAME 4</span>
<span class="visible-xs">4</span>
</div>
</div>


CSS:

@media screen and (min-width: 992px) {

.container {
display: flex;
flex-flow: row wrap;
width: 40%;
margin-left: 30%;
margin-right: 30%;
padding-left: 0;
padding-right: 0;
}

#menu2 {
position: relative;
padding: 5% 0;
}

.mybox {
padding-top: 3%;
padding-bottom: 3%;
width: 30%;
font-size: 1.5em;
}

#mytextbox {
position:absolute;
top: 30%;
z-index: 2;
order: 3;
background:
linear-gradient(
rgba(255, 255, 255, 1),
rgba(255, 255, 255, 0.7)
),
url('./../images/Pattern.png') bottom no-repeat;
}

#box1 {
position: absolute;
top: 5%;
order: 1;
background-color: rgb(66,142,158);
margin-right: 25%;
margin-left: -28%;
}

#box2 {
position: absolute;
order: 2;
background-color: rgb(196,52,52);
margin-left: 30%;
right: -28%;
top: 5%;
}
#box3 {
position: absolute;
order: 4;
background-color: rgb(223,187,66);
margin-right: 30%;
margin-left: -28%;
bottom: 5%;

}
#box4 {
position: absolute;
order: 5;
background-color: rgb(80,139,97);
margin-left: 30%;
right: -28%;
bottom: 5%;
}

}


If you have any ideas, please help!

UPDATE:
This is what i am trying to achieve:

aim

So i was just setting up those boxes around that huge "textbox" when i realized i got some problems there and when i put those small colorful boxes on the bottom, its actually not the bottom of the "textbox", but its the bottom of the parent ("container"). The thing is.. i want the container to expand right with the "textbox" so their bottom should be equal and then i can easily set up those small boxes around it.

Answer

I am not sure this is what you want or not. But,

position of `#mytextbox` div is absolute so container will never get its height.  

I have removed media query as here out put is on smaller screen. You can try this by removing position:absolute from #mytextbox css

Run below code snippet.

.container {
    display: flex;
    flex-flow: row wrap;
    width: 40%;
    margin-left: 30%;
    margin-right: 30%;
    padding-left: 0;
    padding-right: 0;
}

#menu2 {
    position: relative;
    padding: 5% 0;
}

.mybox {
        padding-top: 3%;
        padding-bottom: 3%;
        width: 30%;
        font-size: 1.5em;
}

#mytextbox {
        top: 30%;
        z-index: 2;
        order: 3;
        border: 1px solid black;
        background: 
            linear-gradient(
                rgba(255, 255, 255, 1), 
                rgba(255, 255, 255, 0.7)
                ),
                url('./../images/Pattern.png') bottom no-repeat;
} 

#box1 {
        position: absolute;
        top: 5%;
        order: 1;
        background-color: rgb(66,142,158);
        margin-right: 25%;
        margin-left: -28%;
}

#box2 {
        position: absolute;
        order: 2;
        background-color: rgb(196,52,52);
        margin-left: 30%;
        right: -28%;
        top: 5%;
}
#box3 {
        position: absolute;
        order: 4;
        background-color: rgb(223,187,66);
        margin-right: 30%;
        margin-left: -28%;
        bottom: 5%;

    }
#box4 {
        position: absolute;
        order: 5;
        background-color: rgb(80,139,97);
        margin-left: 30%;
        right: -28%;
        bottom: 5%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="menu2" class="container">
        <div id="mytextbox" class="col-sm-12 col-xs-12">

            <h2 id="h2Box1" style="visibility: visible">Text from the box1</h2>
            <h2 id="h2Box2" style="visibility: hidden">Text from the box2</h2>
            <h2 id="h2Box3" style="visibility: hidden">Text from the box3</h2>
            <h2 id="h2Box4" style="visibility: hidden">Text from the box4</h2>

            <p id="pBox1" style="visibility: visible">Paragraph from the box1</p>
            <p id="pBox2" style="visibility: hidden">Paragraph from the box2</p>
            <p id="pBox3" style="visibility: hidden">Paragraph from the box3</p>
            <p id="pBox4" style="visibility: hidden">Paragraph from the box4</p>

        </div>
        <div id="box1" class="col-sm-6 col-xs-3 mybox active-box">
            <span class="hidden-xs">BOX NAME 1</span>
            <span class="visible-xs">1</span>
        </div>

        <div id="box2" class="col-sm-6 col-xs-3 mybox">
            <span class="hidden-xs">BOX NAME 2</span>
            <span class="visible-xs">2</span>
        </div>
        <div id="box3" class="col-sm-6 col-xs-3 mybox">
            <span class="hidden-xs">BOX NAME 3</span>
            <span class="visible-xs">3</span>
        </div>
        <div id="box4" class="col-sm-6 col-xs-3 mybox">
            <span class="hidden-xs">BOX NAME 4</span>
            <span class="visible-xs">4</span>
        </div>
    </div>