Menu
I'm trying to place two div horizontally, but one the content of the second div exceeds the height of the first one i get bad results:
Here is my Html code:
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="mystyle.css"></head>
<body>
<div class="container">
<div class="yellow">sometext</div>
<div class="green">more text here more text here more text here more text here more text here more text here more text here more text here more text here more text here </div>
<div class="spacer"></div>
</div>
</body>
and this is my Css:
.yellow {
background-color: yellow;
margin: 2px;
float: left;
width: 100px;
text-align: center;
}
.green{
background-color: #00ff00;
}
.container {
width: 30%;
}
.spacer {
clear: both;
}
The result i want is this:
but this is what i get:
230
Its most common use is to wrap text around images. However, you can use the float property to wrap any inline elements around a defined HTML element, including lists, paragraphs, divs, spans, tables, iframes, and blockquotes.
Set height and width to 100% for the bottom div and set overflow auto on the bottom div as well. Now the div will not move up to fill space.
To clear a float, add the clear property to the element that needs to clear the float. This is usually the element after the floated element. The clear property can take the values of left , right , and both . Usually you'll want to use both.
To fix this problem, the footer can be cleared to ensure it stays beneath both floated columns. Clear has four valid values as well. The value both is most commonly used, which clears floats coming from either direction. The values left and right can be used to only clear the float from one direction respectively.
Why not make the container background the same colour as your first div and change the CSS to:
JSFiddle here
.yellow {
background-color: #00ff00;
margin: 2px;
float: left;
width: 100px;
text-align: center;
}
.green{
background-color: yellow;
overflow: hidden; <-- added
}
.container {
width: 30%;
background-color: #00ff00; <-- added
}
.spacer {
clear: both;
}
Although float is commonly used for layout purposes like this, it was originally designed to float text elements. This is the reason for why floated divs behave in a strange manner when ones not familiar with it.
Beside the text formatting issues there is actually another difficulty when you want two floated elements have the same automatic height. This could be achieved much better by using the display property with table and table-cell.
Have a look at this:
CSS for HTML dynamic layout with not fixed columns?
Or just take the regarding fiddle:
http://jsfiddle.net/TfuTE/
37
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
