Reduced Test case for float drop

[smkatz]

Can someone help me “combat” this float drop?

https://codepen.io/anon/pen/EOgKXp

Here is my issue. I have tried clearing each element to the left and it doesn’t seem to change the output.

–Sam

[Beverleyh]

What do you mean by “float drop”?

The floats already appear to be cleared.

What is it that you’re trying to do? What do you expect the result to look like or behave like?

[smkatz]

How are they already cleared. I want the red menu div to not be pinned to the bottom.

[Beverleyh]

The floats are cleared.

.test isn’t exhibiting the effects of float because you’ve made it 100% wide and cleared it with the pseudo clearfix.

#menu2 is being pushed down by the paragraph element which is a block element and 100% wide by default. If you want it to be positioned above the paragraph, either change the markup so that the paragraph element comes afterwards, or float the paragraph too.

You could also absolutely position the menu into the top right and take it out of the flow of the document.

Alternatively, try making .test a flex parent, in conjunction with space-between to justify the flex children. Read more about flexbox here https://css-tricks.com/snippets/css/a-guide-to-flexbox/

[Author]

Posts