Rearranging HTML elements with css - html

Question

I have in my layout three elements like this:
<div id="container">
<div id="element1"/>
<div id="element2"/>
<div id="element3"/>
</div>
shown this way:
| element1 | element2 | element3 |
I want them to show like this:
element1 | element2
element3 |
The closest thing I've achieved to do is this:
element1 |
element3 | element2
I can't achieve to align element1 and element2
Does anybody knows how to do it only with CSS ?

Answer 1

Here is the working example
<div id="container">
<div id="element1" class="boxes">
This is elem1
</div>
<div id="element2" class="boxes">
This is the elem2
</div>
<div id="element3">
This is elem3
</div>
</div>
<style>
.boxes{
border:1px solid black;
box-sizing:border-box;
width:50%;
float:left;
}
</style>

Answer 2

This is how you use div tags :
<div class="exampleclass">Example Text</div>
An example made by Sören Kuklau can be seen here
Here is an example Fiddle using the float: left css property

Answer 3

Your question is quite open-ended (no context whatsoever), there's a very simple solution, which is to use float: left...
#element1, #element2, #element3 {
float: left;
width: 50%;
box-sizing: border-box; // <- Not necessary for this basic example unless you add padding, etc.
}
<div id="container">
<div id="element1">El 1</div>
<div id="element2">El 2</div>
<div id="element3">El 3</div>
</div>

Answer 4

define them all as float: left and add clear: both to the third one.

Answer 5

<div id="container">
<div id="element1">El 1</div>
<div id="element2">El 2</div>
<div id="element3">El 3</div>
</div>
#container > div {
float: left;
}
#container{
position:relative;
}
#element3{
bottom: -40px;
display: block;
position: absolute;
}
In my explaination the #container #element3 and #container > div are ids of div so please dont read as comment thanks

Answer 6

You can't do it only using CSS because CSS can't do real DOM modifications for that you have to use jQuery.
I hope this link can help you:
What is the easiest way to order a <UL>/<OL> in jQuery?