Reputation: 9185

How to get two divs inside another div the same height without using fixed height

Hello i'm wondering if its not possible to set the right column to the same height like the left column with an image inside. Everything without fixed heights?

fiddle: http://jsfiddle.net/GWZuq/3/

enter image description here

my HTML:

<div class="wrapper">
    <div class="left_col"><img src="http://www.monstersandcritics.de/image.php?file=downloads/downloads/musik/zaschamoktanstateofmind_1/images/group1/Zascha-Moktan-State-Of-Mind_201128_248803_1_024.jpg&width=600"></div>
    <div class="right_col">some text ul etc</div>

</div>

my css:

.wrapper{
    width:80%;
}
.left_col{
    position:relative;
    width:80%;
    float:left;
}
.left_col img{
    position:relative;
    width:100%;
    height:auto;
}
.right_col{
    position:relative;
    width:20%;
    float:left;
    background-color:pink;
    height:100%; /* why is this not putting right col to 100% of the parent container?
}

Thanks a lot!

Upvotes: 0

Answers (3)

0b10011

Reputation: 18795

Simply replace your CSS with the following CSS (example):

.wrapper {
    width:80%;
    overflow:hidden;
}
.left_col {
    width:80%;
    float:left;
    padding-bottom:10000px;
    margin-bottom:-10000px;
}
.left_col img {
    display:block;
    width:100%;
    height:auto;
}
.right_col {
    width:20%;
    float:left;
    background-color:pink;
    padding-bottom:10000px;
    margin-bottom:-10000px;
}

Alternate solution

Alternatively, you could change the HTML and CSS to use <figure> and <figcaption> (example). This solution also allows for aligning vertically:

HTML

<figure class="wrapper">
 <img src="http://www.monstersandcritics.de/image.php?file=downloads/downloads/musik/zaschamoktanstateofmind_1/images/group1/Zascha-Moktan-State-Of-Mind_201128_248803_1_024.jpg&width=600"><!-- Comment out white space
 --><figcaption>some text ul etc</figcaption>
</figure>

CSS

figure.wrapper {
    width:80%;
    overflow:hidden;
    background:pink;
}
figure.wrapper img {
    width:80%;
    display:inline-block;
    height:auto;
    vertical-align:middle; /* top, bottom, or middle to align image vertically */
}
figure.wrapper figcaption {
    width:20%;
    display:inline-block;
    vertical-align:middle; /* top, bottom, or middle to align caption vertically */
}

Note: This solution uses new elements which will not work in IE8 and lower unless they are registered via JavaScript. This can be overcome by including html5shiv (Google Code, GitHub).

Upvotes: 3