Question

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>
  <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!

Answer 1

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.