All geek questions in one place

Css, html help: float left and right, clipping background to expand div

I have a div floating to the left and a div floating to the right, and I would like the background color to change. It changes the background, but stops right in front of the floating divs. When I take them off, it continues to have the correct background color that I want.

<div style='clear:both;border-bottom:3px solid #999;border-top:#333 solid thin;background:#D7E7E8;position:relative;'> <div style='width:1091px;margin:0 auto;margin-top:70px;'> <div style='float:left;width:200px;border:thin solid black;margin-bottom:50px;position:relative;'> float LEFT </div> <div style='float:right;border:thin solid black; width:800px;border:thin solid black;margin-bottom:50px;position:relative;'> float RIGHT </div> </div> </div>

Thank you!

+6
source share
2 answers

You must clear the floats so that the parent can surround them.

 <div style='clear:both;border-bottom:3px solid #999;border-top:#333 solid thin;background:#D7E7E8;position:relative;'> <div style='width:1091px;margin:0 auto;margin-top:70px;'> <div style='float:left;width:200px;border:thin solid black;margin-bottom:50px;position:relative;'> float LEFT </div> <div style='float:right;border:thin solid black; width:800px;border:thin solid black;margin-bottom:50px;position:relative;'> float RIGHT </div> <!--HERE IS THE CLEARING DIV: --> <div style="clear: left;"></div> </div> </div>

You can also make the parent float itself, and then you don’t need additional markup (cleaning the div). If you do this, then your parent will need the specified width.

EXPLANATION:

When an element is floating, the parent does not know about its height (unless it is the floating element itself). You need a clear one under the floats so that the parent div recognizes the entire height of all its children.

+8
source

You do not need to force floats to be cleared - you only need to determine the overflow for any position: relative div. Overflow: hidden and overflow: automatically closing a div without any further intervention, from everything starting with IE6.

Change the first line to:

 <div style='clear:both;border-bottom:3px solid #999;border-top:#333 solid thin;background:#D7E7E8;position:relative; overflow:hidden;'>

and it will do the same as forcing the closure of the div.

+6
source

Source: https://habr.com/ru/post/889189/

More articles:


All Articles