Why is this CSS playing up?

I have a very basic container with a few children divs inside, displayed as inline-block. All works well until I actually insert content into the children divs. When I have content in them, they seem to move down, for no apparent reason.

Here is the fiddle of it all working well.

And here is the fiddle with it all messing up (with the content).

Can someone please tell me why this is happening and how to solve it?

I've been at it for hours but cant seem to figure it out. Any help is much appreciated.

Answers


Instead of using display: inline-block use display: block; float: left;

http://jsfiddle.net/GtPWX/2/

Or you could set vertical-align: top on the boxes.


Add vertical-align:top to the boxes.


Need Your Help

refer one style item to another style item

android android-styles

Is there a possibility to refer one style item to another style item? For example:

android: dropbox login screen is shown when i come out of application

android login android-activity dropbox

I logged in successfully to my dropbox account from my app. But after I closed the application also the login screen (or) allow/cancel screen is being shown. How can I finish that activity.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.