将浮动div与父div对齐

Question

If it's given a div and a sequence of nested divs with float: left properties, how do you make the right edge of the last div in the sequence "stick" to the right edge of the parent div whenever the the right edge of the parent div moves and in way that the two edges move together even if the content of the last div exceeds the available room?

+----------------------------------------+
| parent div                             |
| +-------------+ +---------------------+|
| |             | |                     ||
| | div 1       | | div 2             >>||<< the right edge of div 2 
| | float: left | | float: left         ||   aligns with the right edge
| |             | |                     ||   of the parent div
| +-------------+ +---------------------+|
+----------------------------------------+

EDIT: A condition I should have mentioned is that the divs before the last one are allowed to have fixed widths but the width of the last div should depend on its contents and the position of the right edge of the parent div. Also, the last div is required to be floated left.

Answer 1

If you must float:left the last div then only way to align it properly is to set width of both elements OTHERWISE its not possible OR you must remove float:left on second div.

http://jsfiddle.net/K9a8p/

Answer 2

your best way to get through this loop is to give the last div a class - lastChild and add the border-right:0 to that class.. else,here's another quick fix

Your CSS

.container{
border:2px solid black;
height:40px;
width:auto;
overflow:hidden;
}
.ele{
float:left;
height:20px;
width:30%;
overflow:hidden;
border:3px solid red;
}
.container div:last-child{
border-right:0;
}

Your HTML

<div class="container">
<div class="ele" > </div>
<div class="ele" > </div>
<div class="ele" > </div>
</div>

here's a fiddle explaining the same..

DEMO

You should note the browser compatibility for :last-child --

here's another answer -- Using the last-child selector

Internet Explorer 6 has no support for either.

IE7 and IE8 both support :first-child and not :last-child but a must be specified.

Both work in all versions of Firefox. I have tested Chrome for Windows, Opera 9.64 and Safari 3 and 4 for Windows and they all work in those versions.