0

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?

P.S. 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.

Denis
  • 3,653
  • 4
  • 30
  • 43
  • Ew, you're still supporting IE7? http://www.theie7countdown.com/ – Niet the Dark Absol Dec 07 '14 at 14:20
  • 1
    Recently I stopped to support it, but immediately I received few emails to tech support and decided to continue supporting another 10 or 20 years. – Denis Dec 07 '14 at 14:27
  • Personally I'd reply with those emails saying "if you don't upgrade, you're vulnerable to all the viruses that specifically target IE7 - and there are a LOT of them!". If they then reply saying that company policy doesn't allow them to upgrade, direct them to ask their boss if the cost of upgrading their computer is more or less than the cost of the many lawsuits that will follow if their data is exposed via an exploit brought on by out-of-date browsers. That usually does the trick. – Niet the Dark Absol Dec 07 '14 at 14:32

2 Answers2

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>
Guffa
  • 687,336
  • 108
  • 737
  • 1,005
0

Try this:

<div></div>
<div></div>
css: div{display:inline-block}
AstroCB
  • 12,337
  • 20
  • 57
  • 73
Gega Gagua
  • 92
  • 9