Como alinear las la imagen destacadas. Como se ve en esta primer imagen las imagenes de las 2 columnas están alineadas a la misma altura....
Lo que quiero hacer o modificar es para que las columnas no queden alineadas entre si, y solo exista una separación independiente entre los post de cada una de las columnas, ya que si uso imagenes de diferentes tamaño quedan unos espacios en blanco que se ven muy mal.
La siguiente imagen es como quiero que quede...
El código del style.css es el siguiente...
/*
Theme Name: Photographer Theme
Theme URI: http://www.dessign.net/photographertheme
Description: Photographer Theme for WordPress is stylish, customizable, simple, and readable. Perfect for amature and profesional photographers.
Version: 2.0
Author: Marios Lublinski
Author URI: http://www.dessign.net
Tags: 2 column theme
*/
/* Global */
* { margin: 0; padding: 0; }
body { font-size: 12px; /*background-color: #ccc;*/ background: #fff; font-family: arial, verdana, georgia; color: #393939; }
a { color: #4f4f4f; text-decoration: none; }
h1,h2,h3,h4,h5,p { margin: 10px 0; }
h1 { font-size: 22px; }
#main_container { width: 1018px; margin: 0 auto; }
.clear { clear: both; }
.left { float: left; }
.right { float: right; }
img { border: none; }
/* Header */
#header { padding-top: 2px; }
.logo { float: left; margin-top: 10px; }
#header ul { width: 1018px; list-style-type: none; float: left; }
#header ul li { float: left; font-size: 12px; }
#header ul li a { display: block; color: #000; background-color: #fff; padding: 3px 20px; margin-left: 3px; text-decoration: none; text-transform: uppercase; letter-spacing:2px; font-weight: bold;}
#header ul li a:hover { background-color: #fff; color: #ebebeb; }
#header ul li.current-menu-item a { background-color: #fff; }
#menu_container { margin: 15px 0 20px 0; background-color: #fff; position: relative; border-bottom: 1px solid #000;}
#menu_container ul { list-style-type: none; }
#menu_container ul li { float: left; font-size: 14px; letter-spacing:2px;}
#menu_container ul li a { display: block; padding: 10px 15px; border-right: 0px solid #000; color: #000; text-decoration: none; text-transform: uppercase; font-weight: bold;}
#menu_container ul li a:hover { background-color: #fff; text-decoration: underline; }
#menu_container ul li.current-menu-item a { background-color: #292828; }
#menu_container input[type=text] { width: 138px; height: 27px; border: 1px solid #000; float: right; margin-top: 3px; margin-right: 0px; color: #333; padding: 0 25px 0 5px; background-color: #fff; }
.search_icon { position: absolute; right: 5px; top: 5px; }
/* Content */
.featured_text { font-size: 22px; color: #999999; margin-bottom: 25px; text-align: center; }
.home_post_box { width: 498px; margin-bottom: 25px; }
.home_post_box h3 { margin-top: 0; }
.home_post_box h3 a { color: #393939; text-decoration: none; padding: 25px 0; display: block; text-align: center; font-weight: normal; background-color: #fff; }
.home_post_box h3 a:hover { color:#999; }
.home_post_box img { width: 498px; height: 100%; opacity:1.0; filter:alpha(opacity=100); }
.navigation .left, .navigation .right { padding: 10px 35px; background-color: #fff; }
.navigation a:hover { color:#999; }
#content_left { width: 600px; float: left; }
.blog_post_box { margin-bottom: 25px; background-color: #fff; padding-bottom: 10px; }
.blog_post_box h3 { padding: 0 10px; }
.blog_post_box p { padding: 0 10px; }
.blog_post_box img { width: 687px; height: 331px; opacity:1.0; filter:alpha(opacity=100); }
.blog_post_box img:hover { opacity:0.8; filter:alpha(opacity=80); }
.single_content { background-color: #fff; padding: 10px 10px; }
.single_content h1 { margin-top: 0; font-size: 18px; }
.footer_inside_box { margin-bottom: 25px; }
.footer_inside_box a:hover { color:#999; }
#submit { background-color: #000; color: #ccc;*/ background: url('images/bg.jpg') repeat; border: none; padding: 5px; }
/* Sidebar */
#sidebar { width: 300px; float: right; }
.side_featured { list-style-type: none; }
.side_featured li { margin-bottom: 25px; }
.side_featured li img { width: 300px; height: 100%; opacity:1.0; filter:alpha(opacity=100); }
.side_featured li img:hover { opacity:0.8; filter:alpha(opacity=80); }
/* Footer */
#footer { margin-top: 25px; padding: 5px 23px 15px; background-color: #fff; }
.footer_box { width: 220px; float: left; border-right: 1px solid #DDDDDD; margin-right: 10px; }
.footer_box h3 { font-size: 16px; font-weight: normal; }
.footer_box ul { list-style-type: none; margin-left: 0px; }
.footer_box ul li { margin-bottom: 3px; }
.footer_box_last { border-right: none; }
.bottom_footer { color: #8f8f8f; text-align: right; padding: 10px 10px; background-color: #333; font-size: 11px; }
Bueno espero me puedan ayudar a arreglarlo, saludos...
