How do I make my div height scale to an adjacent div height?

Question

First of all, let me say that I'm very new to HTML and CSS. I so far have a containing div with two divs inside, one floating left and one floating right. The one that floats right contains a 400px image, and the one floating left is supposed to contain some text, but I want the height of the background color to remain the same height as the image. Because the image is being defined by percentages rather than pixel height, I can't just set the height the same as it won't scale.

Here's the HTML:

<div id="about">
    <div id="abouttext">
        djfd
    </div>      
    <div id="aboutpic">
        <img src="images/photoph.png" alt="Yeah, that's me">
    </div>
</div>

Here's the relevant CSS:

#about
{
    width: 70%;
    height: auto;
    margin: 0 auto;
}

#aboutpic
{
    width: 40%;
    float: right;
}

#abouttext
{
    width: 50%;
    background-color: #2A1F33;
    opacity: 0.6;
    height: auto;
    float: left;
    padding-top: 5%;
    padding-left: 5%;
    padding-right: 5%;
}

Any help is massively appreciated.

`400px image` and `the image is being defined by percentages` Which one is true? — Wa Kai, Nov 03 '15 at 14:42
The file is 400px, it's being displayed as 40% of the containing div, though. — Callum Harrison, Nov 03 '15 at 14:45
http://stackoverflow.com/questions/16317497/make-floating-divs-the-same-height Might be a duplicate?! — Wa Kai, Nov 03 '15 at 14:48

score 0 · Answer 1 · answered Nov 03 '15 at 15:05

The genereal principle here is that you define your wrapper as display: table and the containing elements as display: table-cell. See this below :

img {
    
    width: 100%;
}

#about {
    width: 100%;
    height: auto;
    margin: 0 auto;
    display: table;
}
#aboutpic {
    background-color: blue;
    width: 45%;
    display: table-cell;
}
#abouttext {
    color: white;
    width: 45%;
    background-color: #2A1F33;
    display: table-cell;;
}

<div id="about">
    <div id="abouttext">djfd</div>
    <div id="aboutpic">
        <img src="http://www.freestockphotos.name/wallpaper-original/wallpapers/download-images-of-gentle-dogs-6866.jpg" alt="Yeah, that's not me" />
    </div>
</div>

score 0 · Answer 2 · answered Nov 03 '15 at 15:05

do you mean something like this? https://jsfiddle.net/ehaav5fz/

#about
{
    width: 70%;
    height: auto;
    margin: 0 auto;
    display: flex;
}

#aboutpic
{
    width: 40%;
    float: right;
}

#abouttext
{
    width: 50%;
    background-color: #2A1F33;
    opacity: 0.6;
    float: left;
    padding-top: 5%;
    padding-left: 5%;
    padding-right: 5%;
}

img {
    height: 400px;
    width: 100%;
    display: block;
}

How do I make my div height scale to an adjacent div height?

2 Answers2