Question

I have three divs:

<div class="A">A</div>
<div class="B">B</div>
<div class="C">C</div>

I want them to be positioned like this:

A     C
B

Where C should always be in the top right corner of the container they’re in. How do I go about this in CSS using only the three divs and in that order?

I’ve tried a lot of different combinations of the float, display and clear properties to no avail.

Answer 1

it can’t be done by float, because it’s no valid flow.

Try this:

<style type="text/css">
.A {
  background: green;
}

.B {
  background: yellow;
  position: relative;
}

.C {
  background: red;
  position: absolute;
  top: 0;
  right: 0;
}

.container {
  position: relative;
}

</style>




<div class="container">
  <div class="A">A</div>
  <div class="B">B</div>
  <div class="C">C</div>
</div>

Example: http://jsfiddle.net/YGw3E/