CODEWITHSUNDEEP
htmlcss
Pruthvi Raj Nadimpalli
Pruthvi Raj Nadimpalli

Reputation: 1373

Same height inline blocks alignment

I want to align a few even number of inline blocks as below:

        _____   _____   _____   _____         
       |     | |     | |     | |     |     
       |  1  | |  2  | |  3  | |  4  |
       |_____| |_____| |_____| |_____|
                _____   _____    
               |     | |     |
               |  5  | |  6  |
               |_____| |_____|

The problem is: when there is extra content in any of the blocks, the boxes are misaligned. Please check the below link:

JS Fiddle link

How can i resolve this?

Upvotes: 1

Views: 8710

Answers (4)

kmm
kmm

Reputation: 618

I would recommend using absolute positioning to break your .entry divs free from the document flow.

http://jsfiddle.net/TQW3D/1/

.entry 
{ 
    display:inline-block;
    margin-top:10px;
    width:100px;
    height:100px;
    border:1px solid red;
    position:relative;
}

.entry span
{
    position: absolute;
    top:40%;
    left:0;
    width:100%;
    text-align:center;
}

Upvotes: 0

Rahul Tripathi
Rahul Tripathi

Reputation: 172458

Try this:

.entry 
{ 
display:inline-block;
margin-top:10px;
width:100px;
height:60px;
padding-top:40px;
border:1px solid red;
vertical-align: top;
}

DEMO JSFIDDLE

Upvotes: 0

Tigran Petrossian
Tigran Petrossian

Reputation: 1168

use vertical-align: top; for inline-block elements - http://jsfiddle.net/5JSAG/49/

Upvotes: 1

Mr_Green
Mr_Green

Reputation: 41832

Add vertical-align: top to your css code.

.entry 
{ 
    display:inline-block;
    margin-top:10px;
    width:100px;
    height:60px;
    padding-top:40px;
    border:1px solid red;
    vertical-align: top; /* added */
}

Working Fiddle

Upvotes: 12

Related Questions