Espacio en blanco arriba del segundo bloque en línea div

Question

Estoy seguro de que he pasado por alto algo aquí pero no puedo resolverlo. Hay un espacio en blanco sobre mi segundo div en bloque en línea, y esto solo ocurre cuando la longitud de 'texto aquí' en el div derecho es menor que la de la izquierda.

jsFiddle: http://jsfiddle.net/B2S4r/2/ (que necesitará para hacer la vista HTML más amplio para verlas una al lado de otra)

<div style="border-top: 1px dashed black; display: inline-block; width: 250px; margin-bottom: 10px; margin-right: 10px; margin-top: 0;"> 

    <div style="height: 50px; padding-top: 2px; padding-bottom: 2px; text-align:right; font-size: 11px;"> 
     <div style="display: block; width: 80px; height: 50px; float: left; background-color: #cdcdcd; background-position: left center;"> 
     </div> 

     <span class="main_header" style="font-size: 21px; margin: 0;">Title</span> 
     <br /> 
     Subtitle 

    </div> 

    <div style="display:block; background-color: #efefef; height: 75px; padding: 5px; font-size: 12px;"> 
    Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here 
    </div> 
</div> 

<div style="border-top: 1px dashed black; display: inline-block; width: 250px; margin-bottom: 10px; margin-right: 10px; margin-top: 0;"> 

    <div style="height: 50px; padding-top: 2px; padding-bottom: 2px; text-align:right; font-size: 11px;"> 
     <div style="display: block; width: 80px; height: 50px; float: left; background-color: #cdcdcd; background-position: left center;"> 
     </div> 

     <span class="main_header" style="font-size: 21px; margin: 0;">Title</span> 
     <br /> 
     Subtitle 

    </div> 

    <div style="display:block; background-color: #efefef; height: 75px; padding: 5px; font-size: 12px;"> 
    Text here Text here Text here Text here Text here Text here Text here Text here Text 
    </div> 
</div>​ 

Answer 1

valor predeterminado de vertical-align es baseline y cuando se aplica a bloques de diferentes alturas, a menudo no es deseado.

Aplicando el valor top resolverá su problema. Aquí está un violín de trabajo: http://jsfiddle.net/PhilippeVay/B2S4r/3/ (ya que no hay hoja de estilo en su violín pero solamente CSS en línea, ni siquiera voy a tratar de encontrar la manera de apuntar a la de la derecha)

Answer 2

una solución rápida es la adición de un float:left tanto divs ...

<div style=" border-top: 1px dashed black; display: inline-block; width: 250px; margin-bottom: 10px; margin-right: 10px; margin-top: 0; float: left;"> 
... 
</div> 

(y por favor utilice CSS;))

Answer 3

he intentado pegar html para el 1 de bloque en un lado y funcionó w/o problema.

<div style=" border-top: 1px dashed black; display: inline-block; width: 250px; margin-bottom: 10px; margin-right: 10px; margin-top: 0;"> 

    <div style="height: 50px; padding-top: 2px; padding-bottom: 2px; text-align:right; font-size: 11px;"> 
     <div style="display: block; width: 80px; height: 50px; float: left; background-color: #cdcdcd; background-position: left center;"> 
     </div> 

     <span class="main_header" style="font-size: 21px; margin: 0;">Title</span> 
     <br /> 
     Subtitle 

    </div> 

    <div style="display:block; background-color: #efefef; height: 75px; padding: 5px; font-size: 12px;"> 
    Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here 
    </div> 
</div> 

<div style=" border-top: 1px dashed black; display: inline-block; width: 250px; margin-bottom: 10px; margin-right: 10px; margin-top: 0;"> 

    <div style="height: 50px; padding-top: 2px; padding-bottom: 2px; text-align:right; font-size: 11px;"> 
     <div style="display: block; width: 80px; height: 50px; float: left; background-color: #cdcdcd; background-position: left center;"> 
     </div> 

     <span class="main_header" style="font-size: 21px; margin: 0;">Title</span> 
     <br /> 
     Subtitle 

    </div> 

    <div style="display:block; background-color: #efefef; height: 75px; padding: 5px; font-size: 12px;"> 
    Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here 
    </div> 
</div> 

Se puede ver violín actualizada aquí: http://jsfiddle.net/B2S4r/6/

Answer 4

Si se agrega a ambos float:left divs, su problema será resuelto.

HTML:

<div class="article"> 
    <div class="header"> 
     <div class="grayBox"></div> 

     <span class="main_header">Title</span><br /> 
     Subtitle 
    </div> 

    <div class="content"> 
     Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here 
    </div> 
</div> 

<div class="article"> 
    <div class="header"> 
     <div class="grayBox"></div> 

     <span class="main_header">Title</span><br /> 
     Subtitle 
    </div> 

    <div class="content"> 
     Text here Text here Text here Text here Text here Text here Text here Text here Text 
    </div> 
</div>​ 

<div class="clear"></div> 

CSS:

.article { 
    border-top: 1px dashed black; 
    display: inline-block; 
    width: 250px; 
    margin-bottom: 10px; 
    margin-right: 10px; 
    margin-top: 0; 
    float:left;   
} 

.header { 
    height: 50px; 
    padding-top: 2px; 
    padding-bottom: 2px; 
    text-align:right; 
    font-size: 11px;  
} 

.main_header { 
    font-size: 21px; 
    margin: 0; 
} 

.grayBox { 
    display: block; 
    width: 80px; 
    height: 50px; 
    float: left; 
    background-color: #cdcdcd; 
    background-position: left center;  
} 

.content { 
    display:block; 
    background-color: #efefef; 
    height: 75px; 
    padding: 5px; 
    font-size: 12px; 
}​ 

.clear { 
    clear:both; 
}​ 

Live DEMO

Answer 5

Ésta parece ser una solución mejor, más limpio: (Example)

<div class="box"> 
    <hgroup> 
     <h2>Title</h2> 
     <h3>Subtitle</h3> 
    </hgroup> 
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor 
     quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. 
     Aenean.</p> 
</div> 

<style type="text/css"> 
    .box { 
     border-top: 1px dashed black; 
     display:  inline-block; 
     width:   250px; 
     margin-bottom: 10px; 
     margin-right: 10px; 
     margin-top: 0; 
    } 

    .box hgroup { 
     height:   50px; 
     padding-top: 2px; 
     padding-bottom: 2px; 
     text-align:  right; 
     font-size:  11px; 
     border-left: 100px rgb(205, 205, 205) solid; 
    } 

    .box h2 { 
     font-size: 21px; 
     margin:  0; 
     font-weight: normal; 
    } 

    .box h3 { 
     font-weight: normal; 
    } 

    .box p { 
     background-color: #efefef; 
     height:   75px; 
     padding:   5px; 
     font-size:  12px; 
    } 
</style>