Trouble with using CSS float:left, clear:both, and display:inline-block in IE 8
I am trying to layout a section on my page using CSS.  This web application needs to work specifically in IE 8.  I've tried several different combinations of "float:left;" "clear:both" and "display:inline-block" to try and achieve my desired layout but I'm obviously doing something wrong.

I've put red borders around all of the DIVs to help me try and figure this out as you can see in the picture below.

The first two sections are lining up correctly.  It's the "Address" section that I'm having trouble with (this section starts with "Residence Address:").

I want to have the following on their own line:<br>
Residence Address;<br> 
Residence Town, State/Province, ZIP;<br>
Same as Residence?;<br>
Mailing Address;<br>
Mailing Town, Mailing State/Province, ZIP;

I also want the enclosing DIV to only be as wide as the widest line which I've read can be accomplished with "display:inline-block".

For some reason, when I use "display:inline-block" and I float the enclosing DIV left, the lines with multiple elements on them (i.e. Residence Town, State/Province, ZIP) don't stay on one line - the ZIP usually wraps to a lower line even when the browser is maximized.

I hope I've been clear here but I can certainly clarify further if needed.

Thanks.


![Page Image][1]



  [1]: http://i.stack.imgur.com/B3z9m.jpg
Trouble with using CSS float:left, clear:both, and display:inline-block in IE 8
===

I am trying to layout a section on my page using CSS.  This web application needs to work specifically in IE 8.  I've tried several different combinations of "float:left;" "clear:both" and "display:inline-block" to try and achieve my desired layout but I'm obviously doing something wrong.

I've put red borders around all of the DIVs to help me try and figure this out as you can see in the picture below.

The first two sections are lining up correctly.  It's the "Address" section that I'm having trouble with (this section starts with "Residence Address:").

I want to have the following on their own line:<br>
Residence Address;<br> 
Residence Town, State/Province, ZIP;<br>
Same as Residence?;<br>
Mailing Address;<br>
Mailing Town, Mailing State/Province, ZIP;

I also want the enclosing DIV to only be as wide as the widest line which I've read can be accomplished with "display:inline-block".

For some reason, when I use "display:inline-block" and I float the enclosing DIV left, the lines with multiple elements on them (i.e. Residence Town, State/Province, ZIP) don't stay on one line - the ZIP usually wraps to a lower line even when the browser is maximized.

I hope I've been clear here but I can certainly clarify further if needed.

Thanks.


![Page Image][1]



  [1]: http://i.stack.imgur.com/B3z9m.jpg