Question

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/

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!

Answer 1

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).