DIVs not aligning top left and top right using CSS float

keithsheep

New Member
Sorry a bit new to HTML and CSS but I have tried everything but i can't seem to get this to work. I have a top DIV and a bottom DIV. The top DIV contains two more DIVs that need to be aligned left and right.\[code\]<!DOCTYPE html><html><body> <div> <div style="border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(187, 187, 187);"> <div style="font-size: 30px; float: left;">Top Left</div> <div style="font-size: 30px; float: right;">Top Right</div> </div> <div >blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah </div> </div></body></html>\[/code\]I want to see something like :\[code\]Top Left Top Right-------------------------------------------blah blah blah blah blah blah blah \[/code\]But instead i get\[code\]----------------------------Top Left blah blah Top Right\[/code\]It seems like the top DIV is getting its height set to zero. Why i have no idea. I thought if you put something in a DIV it should automatically stretch itself?My actual code is : \[code\]<div style="border-bottom: 1px solid rgb(187, 187, 187); overflow: auto; clear: both; padding: 15px;"> <div style="font-size: 30px;">Bearbeiten</div> <div style="font-size: 30px; width: 50px;">X</div></div><div style="position: absolute; bottom: 10px;"><input style="font-size: 15px; height: 30px; width: 130px;" value="http://stackoverflow.com/questions/15684533/Cancel" class="OverlayButton" id="Overlay.CancelButton" type="button"><input style="font-size: 15px; height: 30px; width: 130px;" value="http://stackoverflow.com/questions/15684533/Save" class="OverlayButton" type="button"><input style="font-size: 15px; height: 30px; width: 130px;" value="http://stackoverflow.com/questions/15684533/Delete" class="OverlayButton" type="button"></div>\[/code\]
 
Back
Top