Default positioning of parent DIVs is being ignored

I'm a newbie in CSS layout. I need to display content like this:

+-------------------------------------+
|                            Content_A|
| Content_B Content_C ...             |
+-------------------------------------+

I want a very simple markup and CSS, so I made this:

<div>
  <div id="d1">
    <div style="float: right;">Content_A</div>
  </div>
  &开发者_高级运维lt;div id="d2">
    <div style="float: left;">Content_B</div>
    <div style="float: left;">Content_C</div>
    <div>...</div>
  </div>
</div>

But the result is this:

+-------------------------------------+
| Content_B Content_C ...    Content_A|
+-------------------------------------+

Looks like default positioning of DIVs d1 and d2 is being ignored. Why and what's the solution?

If you have another markup/CSS suggestion for mentioned required layout (using SPAN for example), it will be welcome.

By the way, I mixed HTML and CSS just to make this problem easier to understand. In the real page, they will be separated!

Here is the solution:

<div>
  <div id="d1">
    <div style="text-align: right;">Content_A</div>
  </div>
  <div id="d2">
    <div style="float: left;">Content_B</div>
    <div style="float: left;">Content_C</div>
    <div>...</div>
  </div>
</div>

Let me know if it works for you or if you still have problem.

You can set display format for outer-most div to align the contents vertically:

<div style="display: table;">
  <div id="d1">
    <div style="float: right;">Content_A</div>
  </div>
  <div id="d2">
    <div style="float: left;">Content_B</div>
    <div style="float: left;">Content_C</div>
    <div>...</div>
  </div>
</div>

Try this:

<div>
  <div id="d1">
    <div style="float: right;">Content_A</div>
    <div style="clear:both;"></div>
  </div>
  <div id="d2">
    <div style="float: left;">Content_B</div>
    <div style="float: left;">Content_C</div>
    <div>...</div>
    <div style="clear:both;"></div>
  </div>
</div>

The clear property is a way of saying "make sure this element does not run alongside a previous float". Without having an element with clear, all later content on the page would attempt to flow alongside the columns. You could say that we're telling the browser, "the floats end here".

Check this link for more information.