Menu
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.
<!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>
I want to see something like :
Top Left Top Right
-------------------------------------------
blah blah blah blah blah blah blah
But instead i get
----------------------------
Top Left blah blah Top Right
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 :
<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="Cancel" class="OverlayButton" id="Overlay.CancelButton"
type="button"><input
style="font-size: 15px; height: 30px; width: 130px;" value="Save" class="OverlayButton" type="button"><input
style="font-size: 15px; height: 30px; width: 130px;" value="Delete" class="OverlayButton" type="button"></div>
668
Put overflow: hidden on the div that contains the two floats.
http://jsfiddle.net/SntpD/
You could also use CSS :after, but it's a bit more complex.
.container:after {
clear: both;
display: block;
content: "";
height: 0;
}
http://jsfiddle.net/SntpD/1/
160
You can use overflow: auto; float: none; clear: both on the parent div.
overflow: hidden can also be used as suggested by @Explosion Pills. but this is the cleaner and more compatible way
http://jsfiddle.net/pixelass/yPZQ9/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
