L...">
All geek questions in one place

Floating elements on a non-melting element:

I have a layout of two columns, one of them floats to the left, the other does not:

<div id="left"> LEFT </div> <div id="right"> RIGHT </div>

And CSS:

 #left { float: left; width: 200px; background: yellow; } #right { margin-left: 200px; background: orange; }

In the right element that doesn't float, I have this markup:

  <div id="nav"> <div class="item">LINK</div> <div class="item">LINK</div> <div class="item">LINK</div> <div class="item">LINK</div> <div class="item">LINK</div> <div class="clear"></div> </div> <h1>Welcome World</h1>

And CSS for nav and item (as you see, item floats):

 #nav { background: blue; } .item { background: green; float: left; margin-right: 10px; }

And my clear element:

 .clear { clear: both; }

And finally, I get this result:

enter image description here

I think the problem is with my clear element, which is also clearing the floating point element ( #left ). But I expected to get this result:

enter image description here

Here is a demo of scripts

+4
source share
5 answers

Instead of adding an unnecessary add-in to your HTML, you can simply add overflow: hidden; in #nav . This will create a new block formatting context for list items inside #nav , since the moved items are extracted from the normal stream (its container in the stream will not respect their height, note that <body> does not apply to #left in my violin)

From the Visual Formatting Model, 9.4.1:

Floats, absolutely positioned elements, block containers (for example, built-in blocks, cell tables and table headers) that are not block blocks, and block blocks with "overflow" other than "visible" (unless this value was common in the viewport), set the contents of block formatting contexts for them.

 #nav { background: blue; overflow: hidden; /* Creates a new block-formatting context for floated descendants */ }

http://jsfiddle.net/bJFUj/9/

+1
source

JsFiddle working demo

Make your #nav inline-block element and set the width to 100% :

 #nav { background: blue; display: inline-block; width: 100%; }
+1
source

I did it differently. You can move clarity to one of two different places (which gives you different results), but the general problem has been resolved. Select the appropriate option.

( http://jsfiddle.net/bJFUj/4/ OR http://jsfiddle.net/bJFUj/6/ )

In both cases, I basically change nav css (because the background will not display otherwise)

 #nav { background: blue; overflow: hidden; }

I would just move clarity to an element containing both div#left and div#right . Putting inside div#right seems to create some interesting effects regarding the height of div#right .

0
source

JsFiddle example

Removed from #nav

 <div class="clear"></div>

Added style to #nav

 overflow: hidden;
0
source

Clearing floats involves floating elements, but you cleared an element that you did not swim either left or right, i.e. #nav . So add float: left; to your #nav , then only your <div class="clear"></div> will work the way you want.

demonstration

0
source

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

More articles:


All Articles