Menu
I have two divs (one inside of the other) and am running into a bit of a problem when I float the one inside to "left". The problem is that the outer div doesn't expand its height to fit the text inside of the inner div. Since this is probably pretty confusing, I'll try to explain it with some code.
HTML:
<body>
<div id="div1">
Inner Div:
<div id="div2">Testing long content.</div>
</div>
</body>
CSS:
#div2 {
float: left;
width: 10px;
}
I rather hope that when tested this actually shows my problem as I have not had a chance to test this. My real code has more properties which I will pose these if needed.
387
All that is needed to fix this is “min-height” and “min-width” in your CSS. this makes a Div responsive. minimum height will prevent the Divs from overlapping on each other.
This could happen for several reasons, especially when you consider the position problems with divs from one website to another. Similarly, box elements may overlap for a few reasons, ranging from positioning errors to overflow issues and simple float problems.
They are overlapping because you are floating a div, but aren't clearing the float. You'll also notice that I've removed your inline CSS. This makes your code easier to maintain.
You need to use the clear-fix. Insert the following after your floated div, and within the containing div.
<div class="clear"></div>
And add the following style:
.clear { clear:both; }
Example:
<div class="container">
<div class="floatedDiv">Hello World</div>
<div class="clear"></div>
</div>
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
