How to set divs with images in one line? - html

Question

Hello i have a problem with my images in divs.
jsFiddle
.navbar {
position: fixed;
z-index: 1000;
height: 100%;
width: 60px;
left: 0px;
top: 0px;
background-color: #2e2d2d;
border-right: 1px solid #c6c5c5;
}
#works {
position: relative;
margin-left: 60px;
height: 100%;
}
.left {
position: relative;
width: 50%;
float: left;
}
.right {
position: relative;
height: 100%;
width: 50%;
float: left;
}
#works .up {
width: 100%;
height: 50%;
}
.up h1 {
font-family: ralewayregular;
text-transform: uppercase;
text-decoration: none;
font-size: 10px;
padding: 10px 15px;
}
.up h2 {
font-family: ralewayregular;
font-size: 5pt;
padding: 1px 15px;
}
.down_1 {
float: left;
width: 50%;
height: 50%;
}
.down_2 {
float: left;
width: 50%;
}
<div class="navbar">
<a class="menu-trigger"></a>
</div>
<section id="works">
<div class="all">
<div class="left">
<img src="http://i.telegraph.co.uk/multimedia/archive/02194/Bank2_2194348b.jpg" width="100%">
</div>
<div class="right">
<div class="up">
<h1>bl bla</h1>
<h2>/asdasda <br /> as : VENEZIA
/ SELLEKTOR / SUGARPILLS / NIKKI LISSONI</h2>
<div class="arrow"></div>
</div>
<div class="down_1">
<img src="http://www.vetprofessionals.com/catprofessional/images/home-cat.jpg" width="100%" height="100%" />
</div>
<div class="down_2">
<img src="http://cutebabywallpapers.com/wp-content/uploads/2014/09/cute-a-little-baby-and-cat-pictures.jpg" width="100%" />
</div>
</div>
</div>
</section>
Div left must have the same hight like div right. Both should end in one line.
How to do this without giving them hight, to not strech my images? Div up and down should have 50% height but its not working.
Someone can help me solve it?

Answer 1

For them to to be the same height, there most be some measure, strict height or min-height.
For the height to measure, do something like:
.left, .right {
width: 100%; /* Adjust as needed */
min-height 50%; /* best to be the same as what you assume would
be the height of the taller both DIV's so that nothing will be cut off */
}
For your image not to be distorted, do something like:
.right img, .right img, {
width: 100%;
height: auto; /* Set the height to auto to give the
image a breathing space to reduce distortion */
}