Inner divs will not fill outer div with height:auto

Question

I need two divs next to each other so I had to put them in a wrapper. I want the outer div's height to be set by using the taller of the two div's wrapped inside. The height does seem to portray that quality when I use height:auto; for the outer div. However, the shorter of the two div's does not fill the entire height and it is not the same height as the other column. Does anybody know any CSS tricks to get this to work?

This CSS is as follows:

html, body {
         background-color: #888888;
         color: #98012E;
         font-family: arial;
         font-size: 18;
       }

h1 {
        font-size: 48;
        text-align: center;
}

h2 {
        font-size: 36;  
}


.wrapped {
        width:95%;
        border-style: solid;
        border-width: 5px;
        border-color: black;
        overflow: hidden;
        color:black;
        margin:5px;
        height: auto;
}
.post {
        width: 50%; 
        float: left;
        overflow:hidden;

}

.bully {
        background-color: green;
        width: 50%; 
        float:right;
        overflow: hidden;
        text-align: center;
}

The html is as follows:

![<html>
<head><link rel="stylesheet" type = "text/css" href = "style.css"></link></head>
    <body>
    <div class="wrapped">
          <div class="post"> Q: WHAT'S GOING ON??? <br/> A: I HAVE NO IDEA!!! </div>
          <div class="bully">55.55</div>
    </div>    
</body>
</html>]

Image

enter image description here

I have attached an image of one example of this. Because of the sensitive nature of the other examples, I can provide you with any others. Thanks in advance!

The image that you attached, is that the model are you looking for? — Hendry Tanaka, Dec 17 '14 at 02:31
I would like the green background to fill in to that bottom border — kirie, Dec 17 '14 at 02:33
that border is actually the wrapped class border. the post class does fill-in to that border — kirie, Dec 17 '14 at 02:36
so, what do you want is to make bully class have the same height with post class and both of them do fill the wrapped class right? — Hendry Tanaka, Dec 17 '14 at 02:44
You are just wanting equal height columns correct? Like this: http://stackoverflow.com/questions/14763363/how-to-create-equal-height-columns-in-pure-css? — joshhunt, Dec 17 '14 at 03:25

score 1 · Answer 1 · answered Dec 17 '14 at 02:59

What you need is adding extra div to make it seems same height. The HTML:

<div class="wrapped2">
    <div class="wrapped1">
        <div class="post">Q: WHAT'S GOING ON???
            <br/>A: I HAVE NO IDEA!!!</div>
        <div class="bully">55.55</div>
    </div>
</div>

Add some css like this:

html, body {
        background-color: #fff;
        color: #98012E;
        font-family: arial;
        font-size: 18;
    }
    h1 {
        font-size: 48;
        text-align: center;
    }
    h2 {
        font-size: 36;
    }
    .wrapped2{
        float:left;
        width:100%;
        background:green;
        position:relative;
        right:40%;
        overflow:hidden;
        position:relative;
    }
    .wrapped1 {
        float:left;
        width:100%;
        background:red;
        position:relative;
        right:30%;
    }
    .post {
        height:auto;
        float: left;
        overflow:hidden;
        background:red;
        position:relative;
        left:70%;
    }
    .bully {
        position:relative;
        left:70%;
    }

The point is position:relative.

And taraa...something like this will approaching. Hope it will work for you.

Inner divs will not fill outer div with height:auto

1 Answers1