White space above second inline-block div

Question

I\'m sure I\'ve overlooked something here but cannot work it out. There\'s white space above my second inline-block div, and this only occurs when the \'text here\' length in th

Answer 1

If you add float:left to both divs, your problem will be resolved.

HTML:

    

        


        Title

        Subtitle
    

    

        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 
    



    

        


        Title

        Subtitle
    

    

        Text here Text here Text here Text here Text here Text here Text here Text here Text 
    
​

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