Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Position elements under each other

Tags:

css

position

I have two elements I want to put next to each other, and three elements I want to put below the first two, like this:

Element 1 Element 2

Element 3 Element 4 Element 5

These are text elements actually, and no matter how long the text might be, I want them to still stay in that position. How do I do this without using &nbsp ?

like image 652
Kenny Bones Avatar asked Jan 18 '13 07:01

Kenny Bones


3 Answers

Use <div> tags to create two different containers.

<div>
  Element 1 Element 2
</div>

<div>
  Element 3 Element 4 Element 5
</div>
like image 99
Jeffrey Ray Avatar answered Oct 16 '22 11:10

Jeffrey Ray


If it's a text use <br> for this. Write like this:

Element 1 Element 2 <br>Element 3 Element 4 Element 5

& if it's HTML elements. Write like this:

HTML

<div>element1</div>
<div>element2</div>
<div class="ele3">element3</div>
<div>element4</div>
<div>element4</div>

CSS

div{
  float:left;
  margin-right:5px;
}
.ele3{
  clear:both;
}

Check this http://jsfiddle.net/K9Smv/

like image 25
sandeep Avatar answered Oct 16 '22 10:10

sandeep


<div>
    element1
    element2
</div>

<div class="new_line">
    element3
    element4
    element5
</div>

<div class="new_line">
    element6
    element7
    element8
    element9
</div>

div{
  float:left;
  margin-right:5px;
}
.new_line{
  clear:both;
}
like image 36
Niki Lichev Avatar answered Oct 16 '22 11:10

Niki Lichev