DO NOT EVER place a block-level element (no matter how deeply) inside an inline-level element (unless you want to waste lots of your own time diagnosing strange CSS results) ! The behavior is ill-defined, and mostly the outer inline-level element will behave something like a block element. This includes placing fancy CSS menus (which may have block-level elements buried deep inside the lists) inside an inline DIV next another inline DIV. Use float instead, or if desperate, go back to table layouts.

DIVs with {display:inline;} work fine if their contents do not have block-level display, and will display side-by-side as expected:

I am 'inline' and red
I am 'inline' and green

However, as soon as there is any content inside a DIVs with {display:block;} the inline behaviour is destroyed:

I am 'inline' and red
I am a blue 'block' inside the "inline" red parent
I am 'inline' and green

In such cases consider using{float:left;} :

I am {float:left} and red
I am a blue 'block' inside the "floated" red parent
I am {float:left} and green

And make sure you use {clear:both} afterwards !