CODEWITHSUNDEEP
htmlcss
prog.Dusan
prog.Dusan

Reputation: 1424

Align two divs those are on different side

I'm new to CSS and HTML and my question is very simple!

I have three <div> tags in my page like this :

<div id="first"> foo </div>
<div id= "second"> foo </div>
<div id= "third"> foo </div>

I'd like to show my divs like this :

<div id="first"> foo </div>
<div id= "second"> foo </div>  <div id= "third"> foo </div>

I'd like to move third on right side and align with second in order to be in same line!

How can I do it?

Upvotes: 0

Views: 97

Answers (2)

Gray
Gray

Reputation: 7130

Here's another possibility (there are a lot of ways of doing it - not sure if there is an established "best way" it really depends on the rest of the page).

Updated based on comments:

HTML

<div id="container">
    <div id="first">foo</div>
    <div id="second">foo</div>
    <div id="third">foo sadsad asdasdasd asdasdasa</div>
</div>

CSS

/*just for display purposes*/
 #first, #second, #third {
    border: 1px solid black;
    width:100px;
}
#container {
    position: relative;
    width: 210px;
}
#first {
    height:100px;
}
#third {
    position: absolute;
    right: 0;
    bottom: 0;
}

Here is a demo: jsfiddle

It should be noted that you will likely need a clear:both somewhere after using this.

Upvotes: 0

Alex
Alex

Reputation: 35409

Use a combination of the float and clear properties:

<style>
#first, #second, #third { float:left; }
#second { clear:left; }

/* width is not necessary. added for display purposes */
#second, #third { width:50%; } 
</style>

<div id="first"> foo </div>
<div id= "second"> foo </div>
<div id= "third"> foo </div>

http://jsfiddle.net/8d7tD/

Upvotes: 2

Related Questions