html - Align two divs those are on different side

Question

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?

Answer 1

使用float和clear属性的组合：

<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/

Answer 2

这是另一种可能性（有很多方法可以做到 - 不确定是否有既定的“最佳方法”，它真的取决于页面的其余部分）。

根据评论更新：

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;
}

这是一个演示：jsfiddle

应该注意的是clear:both，使用它后您可能需要一个地方。