Bloques 50% ancho

[rodricrzz]

Hola gente!
Necesito ayuda para poder maquetar responsive dos divs al 50% cada uno, ambos pueden estar alineados con float o con inline-block, para este caso me da igual (probé de ambas maneras).
El div de la izquierda contiene una imagen de 1265x515px que de todas maneras se va a adaptar al 50% de la pantalla.
Y por el lado derecho tengo un div con ancho 50% que va a contener unos parrafos y demás.

Este es el codigo:

Código HTML:

<div>
  <div class="flexslider" style="display: inline-block; width: 50%; vertical-align: top;">
      <ul class="slides">
  	    <li style="display: list-item;">
    	        <a href="#"><img src="pajaro-1265x515.jpg"></a>
            </li>
      </ul>
  </div>
  <div style="background: blue;display: inline-block;width: 50%; height: 100%; vertical-align: top;">sdadas</div>   
</div> 

Este es el CSS:

Código:

/* Browser Resets */
.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus  {outline: none;}
.slides,
.flex-control-nav,
.flex-direction-nav {margin: 0; padding: 0; list-style: none;} 

/* FlexSlider Necessary Styles
*********************************/ 
.flexslider {margin: 0; padding: 0;}
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {width: 100%; display: block;}
.flex-pauseplay span {text-transform: capitalize;}

/* Clearfix for the .slides element */
.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} 
html[xmlns] .slides {display: block;} 
* html .slides {height: 1%;}

/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
 * include js that eliminates this class on page load */
.no-js .slides > li:first-child {display: block;}


/* FlexSlider Default Theme
*********************************/
.flexslider {margin: 0 0 60px; background: #fff; position: relative; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.2); -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 4px rgba(0,0,0,.2); -o-box-shadow: 0 1px 4px rgba(0,0,0,.2); zoom: 1;}
.flex-viewport {max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease;}
.loading .flex-viewport {max-height: 300px;}
.flexslider .slides {zoom: 1;}

.carousel li {margin-right: 5px}


/* Direction Nav */
.flex-direction-nav {*height: 0;}
.flex-direction-nav a {width: 30px; height: 30px; margin: -20px 0 0; display: block; background: url(../image/bg_direction_nav.png) no-repeat 0 0; position: absolute; top: 50%; z-index: 10; cursor: pointer; text-indent: -9999px; opacity: 0; -webkit-transition: all .3s ease;}
.flex-direction-nav .flex-next {background-position: 100% 0;}
.flex-direction-nav .flex-prev {}
.flexslider:hover .flex-next {opacity: 0.8; right: 5px;}
.flexslider:hover .flex-prev {opacity: 0.8; left: 5px;}
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover {opacity: 1;}
.flex-direction-nav .flex-disabled {opacity: .3!important; filter:alpha(opacity=30); cursor: default;}

/* Control Nav */
.flex-control-nav {width: 100%; position: absolute; bottom: -40px; text-align: center;}
.flex-control-nav li {margin: 0 6px; display: inline-block; zoom: 1; *display: inline;}
.flex-control-paging li a {width: 11px; height: 11px; display: block; background: #666; background: rgba(0,0,0,0.5); cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; box-shadow: inset 0 0 3px rgba(0,0,0,0.3);}
.flex-control-paging li a:hover { background: #333; background: rgba(0,0,0,0.7); }
.flex-control-paging li a.flex-active { background: #000; background: rgba(0,0,0,0.9); cursor: default; }

.flex-control-thumbs {margin: 5px 0 0; position: static; overflow: hidden;}
.flex-control-thumbs li {width: 25%; float: left; margin: 0;}
.flex-control-thumbs img {width: 100%; display: block; opacity: .7; cursor: pointer;}
.flex-control-thumbs img:hover {opacity: 1;}
.flex-control-thumbs .flex-active {opacity: 1; cursor: default;}

@media screen and (max-width: 860px) {
  .flex-direction-nav .flex-prev {opacity: 1; left: 0;}
  .flex-direction-nav .flex-next {opacity: 1; right: 0;}
}

Disculpen la desprolijidad del css inline pero no queria modificar el css original hasta que funcione definitivamente.

El problema radica en que de esa manera, el resultado es el siguiente:



El problema está con la ALTURA, la idea es que la altura del box derecho sea la misma que la del box izquierdo. El tema es que la altura del box izquierdo la da la altura de la imagen que a su vez se la da la proporcion del ancho 50% que tiene asignado, se entiende? Por ende, no puedo asignarle un alto fijo ni porcentual al box derecho.

Hay alguna manera de resolver esto?

Muchas gracias por su atención.
Saludos!
Rodrigo.

[pzin]

Estoy con el móvil así que te digo la teoría.

Si es por el color de fondo o algo así, entonces símplemente pónselo al elemento contenedor de ambos.

Luego intento contestarte mejor en el ordenador.

[Dalam]

puedes capturar el alto de el elemento de la izquierda mediante javascript y que redimensiones el de la derecha con el mismo valor.

Si las imagenes siempre van a tener el mismo alto puedes usar min-height

[jonni09lo]

Iniciado por Dalam

puedes capturar el alto de el elemento de la izquierda mediante javascript y que redimensiones el de la derecha con el mismo valor.

Si las imagenes siempre van a tener el mismo alto puedes usar min-height

Utilizar javascript para algo que se puede hacer perfectamente con css es un desperdicio (al menos no dijiste jQuery )

Si @pzin me lo permite me tomaré la molestia de hacer este fiddle.

Saludos

[Dalam]

Desconocia lo de display:table.
Mis conocimientos de maquetado y diseño san basicos, lo mio es mas programacion que otra cosa.
Pero muy bueno eso del display.
:P ya se a quien preguntar cuando tenga problemas con el css.
jajajajajajaja