2 replies [Last post]
patrickco
patrickco's picture
Offline
Enthusiast
Los Angeles
Last seen: 11 years 16 weeks ago
Los Angeles
Timezone: GMT-7
Joined: 2005-04-17
Posts: 157
Points: 12

Hi everyone,

I have a rather confusing problem... I don't understand why certain divs are positioned higher than others:
http://collinatorstudios.com/height_issue.html

I want them all to be flush to the bottom of the container... Can anyone explain this to me, and how I might accomplish it?

thank you.

-patrick

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 41 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

The boxes are inline block so

The boxes are inline block so they are being aligned using inline rules - which means according to the vertical-align property. The default value of vertical-align is baseline. That means the browser tries to line everything up along the text baseline. For the inline block elements, their baseline is the baseline of their lowest line of text. See the CSS spec - specifically the last line of the vertical-align property definition:

"The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge."

If you want the boxes to line up, either set vertical-align to some value other than baseline (e.g. 'top') or set overflow to some value other than visible (e.g. hidden).

patrickco
patrickco's picture
Offline
Enthusiast
Los Angeles
Last seen: 11 years 16 weeks ago
Los Angeles
Timezone: GMT-7
Joined: 2005-04-17
Posts: 157
Points: 12

ah.. Ok, that makes sense.

ah.. Ok, that makes sense. Thank you so very much for the explanation and solution!

-patrick