How to make second floated div to come on top of the first floated div?

Question

I have two floated div in a wrapper. They are left and right. I wanted to make the right div to appear at the top of first div(left). Right should come first and left should come at second.

Here is the code

<div id="wrapper">
    <div id="left">
        left
    </div>
    <div id="right">
        right
    </div>
</div>

CSS

#left{
    float:right;
    }
#right{
    float:left;
    width:100%;
}
#wrapper{
    width:100px;
   background-color: #000fff;
}

I'm looking to have the same 100% as width for right div. Is this possible without changing markup and doing changes in CSS alone?

JSFIDDLE

EDITED I want the right div to be in top and left should in bottom after that. When i use position absolute for the right div then left div is hidden. JSFIDDLE. Should look like this

Answer 1

If you want place the right div before left, just remove the float:left property from #right.

Fiddle

If you want the right DIV above the left, you need to use absolute position

Answer 2

Use the following css :

#left{
    float:right;
    border: 1px solid black;
    }
#right{
    float:left;
    position: absolute;
    top: 0px;
}
#wrapper{
    width:100px;
   background-color: #000fff;
}

Answer 3

First of all clear the float, then set position:relative to the parent "wrapper" and position:absolute; to the right div.

Check out this fiddle

Answer 4

If you want to do this with just css you have to use absolute positioning. But only if you know height of each element and exact number of elements like this. Check this fiddle.

Let's assume each element has 20px height, then you can place one at top: 0px and second at top:20px. And to use remaning space like usual relative way, you must add padding equals to total height of your elements that has absolute positioning to wrapper.

Alternatively you can use JavaScript to change order in html.

Answer 5

I'm not too convinced by the answers so far. I would recommend avoiding 'absolute' and even javascript. Also if you want to make it friendly to all browsers you should really be specifying things such as height. It's a common misconception that a design can't be worked on every modern browser without huge hacks (i was doing it years ago for IE5.5 and firefox etc), its usually due to the CSS not being properly formed and valid. Now try the following:

 #left, #right {position:relative; float:left; height:30px;  color:white; width:inherit;   }

 #left{
 background-color:blue;
 margin-top:30px;
 }
 #right{
 background-color:green;
 margin-left:-100%;
 margin-top:0;
 }
 #wrapper{
 width:100px;
 background-color: #000fff;
 }