4

Pleas look at my fiddle:

http://jsfiddle.net/2uJKR/70/

The divs containing text are being pushed down, I want all 4 to be aligned horizontally.

What is missing?

HTML

<div class="bar">
    <div class="element image">
      <img src="http://www.itsalif.info/blogfiles/video-play/vthumb.jpg"/>
    </div>
    <div class="element image">
      <img src="http://www.itsalif.info/blogfiles/video-play/vthumb.jpg"/>
    </div>
    <div class="element">
        TEXT 1
    </div>
    <div class="element ">
        TEXT 2
    </div>
</div>

CSS

.bar {
  position:relative;
  margin:1px auto 1px auto;
  width:425px;
  height:50px;
  border:1px solid red;
}

.element {
  display:inline-block;
  width:100px;
  height:50px;
  border:1px solid blue;
}

.image img {
  display:block;
  margin:0 auto;
  margin-top:10px;
  width:30px;
  height:30px;
}
GJain
  • 5,025
  • 6
  • 48
  • 82

1 Answers1

9

Add vertical-align:top to your .element class.

.element {
    display:inline-block;
    width:100px;
    height:50px;
    border:1px solid blue;
    vertical-align:top;
}

jsFiddle example

Baseline is the default vertical alignment and you're looking to have them top aligned.

j08691
  • 204,283
  • 31
  • 260
  • 272
  • 2
    Stackoverflow is the best thing happened to the world!! – GJain Sep 29 '13 at 03:08
  • On zoom out in this particular jsFiddle, the last box still gets pushed down. Any ideas on how to keep all boxex top-aligned in a fixed-width container? Increasing the width of the parent div and setting margin of child divs to auto, may fix this, but the divs won't be centrally aligned. Actually, is it worth dealing with zoom-out effects on the layout? Thanks! – Dmitri Lihhatsov Sep 15 '14 at 10:26