- This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
Viewing 3 posts - 1 through 3 (of 3 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.
Okay so first of all I didn’t use CSS in a while, I’ve been coding in C++ and js so I could improve as I see HTML and CSS way easier, so I might be doing things that are not “standard” (not good habits for someone who’s trying to be a webdev). Any tips regarding that would be nice too if I’m missing something.
But my problem is that float: seems to get my design broken.
https://codepen.io/f0rta/pen/pLmvwW
The logo and the buttons should be just below that hr, but setting that float: left makes the #logo div have height: 0 so that’s the problem but I don’t have any idea how to fix that.
Can you help me?
Thanks.
Floating elements pulls them out of the natural flow of the document, so it has the effect of making them “invisible” to their containers, thus causing them to collapse (like you’re seeing).
You can often use overflow: hidden;
on the floated element(s) container to uncollapse it, but this might give undesirable results. E.g. if you hide the overflow of a nav bar to clear floated menu buttons, and those buttons have long dropdows attached to them, you can end up hiding the dropdowns too.
Another way to clear floats is with the clearfix method https://css-tricks.com/snippets/css/clear-fix/ (this wouldn’t hide the dropdowns)
But for more info try Googling “clearing floats css” and that will bring up more detailed explanations and examples (it’s a bit difficult for me at the mo as I’m on mobile).
Overflow hidden fixed it. Thanks a lot, I’d never figured it out on my own.