0

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.

Desmond Hume
  • 8,037
  • 14
  • 65
  • 112
  • Possible duplicate of http://stackoverflow.com/questions/623325/how-to-get-a-floating-div-to-fill-available-space-within-its-parent-div ? – Grim... Feb 21 '12 at 11:27

2 Answers2

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/

Shawn Taylor
  • 3,974
  • 4
  • 17
  • 23
-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.

Community
  • 1
  • 1
Vivek Chandra
  • 4,240
  • 9
  • 33
  • 38
  • Isn't it that all what `border-right:0` does is hiding the right border of the div if the div had borders to be drawn according to its style, which has little if not nothing to do with the question? – Desmond Hume Feb 21 '12 at 12:01
  • @desmondhume dint you want the last div to stick to the right border of the parent -- just fix the width's of the div's so that the border align's itself and the border doesnt overlap.. else,if you want the last child to stick to the right side,use `float:right` on that last-child class.. – Vivek Chandra Feb 21 '12 at 12:05