- This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
Viewing 4 posts - 1 through 4 (of 4 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
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
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?
How are they already cleared. I want the red menu div to not be pinned to the bottom.
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/