Rearranging HTML elements with css

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 ?

Add the code that didn't work well to your question. Anyway, `float: left` should do it — kmaork, May 05 '16 at 13:26
Are you aware your interior div tags are in valid as written? Always close div tags `
` — Rob, May 07 '16 at 21:42

score 2 · Answer 1 · answered May 05 '16 at 13:29

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>

David Wilkinson · Answer 2 · 2016-05-05T13:35:56.963

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>

score 1 · Answer 3 · edited May 23 '17 at 12:07

1

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

edited May 23 '17 at 12:07

Community

1
1

answered May 05 '16 at 13:33

Théo Naciri

155
2
10

score 0 · Answer 4 · edited May 23 '17 at 11:52

0

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?

edited May 23 '17 at 11:52

Community

1
1

answered May 05 '16 at 13:29

Radu Dragan

82
5

score 0 · Answer 5 · answered May 05 '16 at 13:29

0

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

answered May 05 '16 at 13:29

Johannes

64,305
18
73
130

Rahul · Answer 6 · 2016-05-06T07:34:32.210

0

 <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

edited May 06 '16 at 07:34

answered May 05 '16 at 13:33

Rahul

229
2
6

While this code snippet may solve the question, [including an explanation](//meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers) really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. Please also try not to crowd your code with explanatory comments, this reduces the readability of both the code and the explanations! – Michał Perłakowski May 05 '16 at 20:12
Oh sorry and thanks, But i did not comment as you can see `#container` is an id of div thats why it is showing as comment on my code, and I will remind it next time :) – Rahul May 06 '16 at 07:24

Rearranging HTML elements with css

6 Answers6