Stop inline-block div contents from forcing other divs out of line.

Question

I have some divs lined up horizontally and the content in the div is pushing it out of line with the others. How can I make them line up regardless the amount of content? I intend to add overflow:hidden so large content will not destroy the layout. No javascript involved. Needs to work in IE9+ and chrome.

enter image description here

MARKUP

    <div class="panels">1</div>
    <div class="panels">2</div>
    <div class="panels"><img src='\images\img.png' height='64px'></div>
    <div class="panels">4</div>

CSS

.panels {
    /*line-height:200px; */
    display: inline-block;
    width:22%;
    height: 200px;
    margin:5px;
    border: 1px solid blue;
}

I have a fiddle

Another saturday stolen by work. :(

If you want to get fancy on IE10+ check this out: http://stackoverflow.com/questions/20130512/image-gallery-specific-layout-with-css/20131257#20131257 — m59, Jan 19 '14 at 01:32
I'm not sure i understand what you are trying to do, but, doesn't replacing display: inline-block with float: left, solves your problem? — Naele, Jan 19 '14 at 03:14
Thanks but not really a dupe. I needed IE9+ and chrome the other post has multiple specific IDs this works on a class selector. — Joe Johnston, Oct 11 '14 at 17:49

score 3 · Accepted Answer · answered Jan 19 '14 at 01:29

3

Use vertical-align: top on .panels.

http://jsfiddle.net/y9pEV/2/

answered Jan 19 '14 at 01:29

Explosion Pills

188,624
52
326
405

Doh! Of course. Thanks so much. I guess that what I get for coding mad! – Joe Johnston Jan 19 '14 at 15:12

Stop inline-block div contents from forcing other divs out of line.

1 Answers1