alignment issue with inline-blocks of different heights

css position positioning
mheavers picture mheavers · Aug 16, 2011 · Viewed 16.6k times · Source

I'm trying to get the blocks pictured here to align with each other, but if they are different heights, for some reason the shorter div aligns to the bottom of the container div. Neither div has any sort of padding or margin that would cause this behavior. What do I need to do to get them to align to the top of the div?

enter image description here enter image description here

Answer

ldiqual picture ldiqual · Aug 16, 2011

vertical-align:top on the elements that you want to be vertically aligned (not on the parent), as they are display:inline-block.

Related questions

Mixing floating and fixed positioning

here is a standard use of float and fixed : <html> <head> <style type="text/css"> #bigDiv { background-color: red; height: 2000px; width: 100px; float: left; } #littleDiv { background-color: green; height: 400px; width: 200px; float: left; } #littleDivFixed { …

Read More
Position by center point, rather than top-left point

Is it possible to tell the code to position by the center point of an element, rather than by the top-left point? If my parent element has width: 500px; and my child element has /*some width, for this example let's …

Read More
CSS Positioning Absolute within table cells not working in Firefox

I cannot figure out this positioning problem in Firefox. It doesn't seem to follow the absolute positioning rule. Is there something I'm doing that shouldn't be done, but some browesers handle it and some don't? JS Fiddle: Original - http://…

Read More