Question

Trying to do simple header for website, [image][text][splitted horizontal section]:

<div style="width: 930px;">
<div style="width: 280px; height: 80px; display: inline; background-color: red;">image</a></div>
<div style="width: 400px; height: 80px; display: inline; background-color: blue;">text</div>
<div style="width: 250px; height: 80px; display: inline; background-color: green;">
<div style="text-align: right; height: 40px; background-color: gray;">some bar</div>
<div style="text-align: right; height: 30px; background-color: yellow;">some buttons </div>
</div>
</div>

What I see in VS2010 and IE8:

What I see in Chrome and FireFox:

Why? And how to fix it? I need the first variant of course.

Answer 1

Add float: left to your inline elements.

http://jsfiddle.net/tmKaU/1/