equal height using % unit and relative to image height - html

Question

Here is my fiddle:
JSFiddle
You can find the sources here in a JSFiddle.
CSS
.container {
width: 100%;
height: 350px;
float: right;
}
.box {
margin-top: -350px;
float: right;
width: 100%;
}
.box:first-child {
margin-top: 0;
}
img {
width: 50%;
height: 350px;
float:right;
}
.top-section {
width: 50%;
background-color: red;
height: 175px;
}
.bottom-section {
width: 50%;
background-color: blue;
height: 175px;
}
HTML
<div class="container">
<div class="box">
<img src="http://st.hzcdn.com/simgs/7d0137b70f7848d3_3-3892/modern-futons.jpg">
<div class="top-section">
some text.......
</div>
<div class="bottom-section">
some other text.....
</div>
</div>
<div class="box">
<img src="http://i.ebayimg.com/00/s/MzAwWDMwMA==/z/JLYAAOSwxH1UBi1~/$_35.JPG?set_id=2">
<div class="top-section">
some text.......
</div>
<div class="bottom-section">
some other text.....
</div>
</div>
</div>
I have two divs stacked on top of each other (div.box) using margin-top. each div.box is divided into 3 section: a section for a picture, one for some text and another for some other text.
I'm trying to make div.top-section and div.bottom-section the same height and my problem is this:
I want my pictures to be responsive using width:100%;height:auto but I want at the same time, whenever a user resize the window, div.top-section and div.bottom-section don't loose their height relevant to the picture. I mean I want div.top-section and div.bottom-section, each have 1/2 image height and using % unit and not pixel.
How can I achieve this? Thanks in advance.

Answer 1

You can do this with absolute positioning. You can position the container your holding this all in to relative and then posiiton all of your inner content to absolute. Then give your container a padding-bottom of a percentage and play with this percentage until you get your desired height. Then give your text section absolute positioning and a height of 50% and your image a height of 100% and width of 50% and position this to the right.
This can be acheived one of 2 ways. You can use just the image and position that absolutely like so:
html:
<div class="container">
<div class="text-1">
Text 1
</div>
<div class="text-2">
Text 2
</div>
<img src="http://st.hzcdn.com/simgs/7d0137b70f7848d3_3-3892/modern-futons.jpg"/>
</div>
Css:
.container{
position: relative;
padding-bottom: 60%;
}
.text-1{
position: absolute;
left: 0;
top: 0;
height: 50%;
width: 50%;
background: red;
}
.text-2{
position: absolute;
left: 0;
top: 50%;
height: 50%;
width: 50%;
background: blue;
}
.container img{
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 100%;
}
Here is a working fiddle of that method Fiddle
Next if you don't want to lose the aspect ratio of the image. Say you have a tall image and a short image and you want to use this multiple times on your page. You can put another div in the container and position this to the right and place your image as the background of this div like so:
Html:
<div class="container">
<div class="text-1">
Text 1
</div>
<div class="text-2">
Text 2
</div>
<div class="image-section" style="background:url('http://st.hzcdn.com/simgs/7d0137b70f7848d3_3-3892/modern-futons.jpg')"></div>
</div>
Css:
.container{
position: relative;
padding-bottom: 60%;
}
.text-1{
position: absolute;
left: 0;
top: 0;
height: 50%;
width: 50%;
background: red;
}
.text-2{
position: absolute;
left: 0;
top: 50%;
height: 50%;
width: 50%;
background: blue;
}
.image-section{
position: absolute;
right: 0;
top: 0;
background-size:cover !Important;
background-position:center !Important;
backgroung-repeat:no-repeat !Important;
height: 100%;
width: 50%;
}
Here is a working fiddle of that Fiddle