All geek questions in one place

Why is the order of the float div and non-float div relevant only in some cases?

I have a similar problem with CSS Auto Margin discarding other elements : the right floating sidebar is below the main non-floating div content. answer suggested works: just reverse the markup order and write a float div before the non-floating div.

For example, this:

<div class="container"> <div id="non-floating-content"> fooburg content </div> <div id="float-right"> test right </div> </div>

should be uncomfortably reordered as:

 <div class="container"> <div id="float-right"> test right </div> <div id="non-floating-content"> fooburg content </div> </div>

So why does this also work without reordering: Elastic layout with maximum width and minimum width using mesh design ? Watch a live demo . Markup ordering is still reasonable: a float div is written after a non-floating div. However, the float does not hit the page.

I ask because I would rather not hack into a PHP theme (to reorder a div) in order to style it correctly.

Other posts that also say that the solution is to "reorder your divs":

+6
source share
2 answers

The reason for this is because your containing element has no height. When you only have floating point elements inside the containing element, it will be reset to 0 height. If you, for example, added overflow: hidden; to #fluidColumnContainer, it will act as a clear fix, expanding the container to accommodate floating elements. Then you will see that the element with the rule of law drops out again.

+3
source

the reason you linked the work is because other columns also float

0
source

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

More articles:


All Articles