Display Two <div>s Side-by-Side
css, css-float, html
Solution
I removed the float from the second div to make it work.
http://jsfiddle.net/rhEyM/2/
Problem
My goal is to display two `<div>`s side-by-side with the content from both `<div>`s aligned at the top. I do not want long text in the second `<div>` to wrap underneath the first one. Finally, I do not want to set the width of the second `<div>` because I need the markup to work in different widths. Sample markup is below and at http://jsfiddle.net/rhEyM/. CSS ``` .left-div { float: left; width: 100px; height: 20px; margin-right: 8px; background-color: linen; } .right-div { float: left; margin-left: 108px; background-color: skyblue; } ``` HTML ``` <div class="left-div"> </div> <div class="right-div"> My requirements are <b>[A]</b> Content in the two divs should line up at the top, <b>[B]</b> Long text in right-div should not wrap underneath left-div, and <b>[C]</b> I do not want to specify a width of right-div. I don't want to set the width of right-div because this markup needs to work within different widths. </div> ```