bsrgpfxpyy
New Member
I have some markup:\[code\]<div class="container"> <div class="one">column a<br />column a</div> <div class="two">column b</div></div> \[/code\]Content in the 2 inner divs are of variable height and generated dynamically.I am just using some standard CSS tricks to give the 2 inner divs the same height:\[code\].container{ overflow: hidden; padding: 20px; border: 1px solid blue;}.one{ border-right: 1px solid red; float: left; width: 64%; padding-bottom: 500px; margin-bottom: -500px;}.two{ float: right; width: 34%; padding-bottom: 500px; margin-bottom: -500px;}\[/code\]And a fiddle: http://jsfiddle.net/FnWG8/Problem: While I get a line between the 2 divs, the line extends all the way to the bottom, hitting the container. This is due to not knowing the max height of the 2 inner divs and thus having to use the \[code\]padding-bottom: 500px\[/code\] and \[code\]margin-bottom: -500px\[/code\] trick.I would like to have the line dividing the 2 inner divs, but there should be some space between the bottom of the line and the containing div:
What can be done to achieve this?