IE7和float：right

Question

I have two sibling divs: #label and #value. I want #value div to be aligned to the right side of parent's div. I set float:right . But in IE7 #value div is displayed under #label div, not on the same line. One solution I know is to switch the order of #label and #value divs in HTML, but it is quite counterintuitive looking.

Is there any other ways to accomplish this task?

PS Please do not tell me 'stop supporting IE7'. I have visitors who still use IE7 and do not see any serious reason why I have to drop them from my website.

Answer 1

The first div takes up the whole width of the parent element.

You can float the first element to the left, and the second to the right, then use overflow on the parent element to make it contain the children:

 #Item { overflow: hidden; border: 1px solid #ccc; } #label { float: left; } #value { float: right; } 

 <div id="Item"> <div id="label">Label</div> <div id="value">Value</div> </div> 

Answer 2

Try this:

<div></div>
<div></div>
css: div{display:inline-block}