April 12, 2018 at 12:22 pm #269743
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.
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.April 12, 2018 at 12:59 pm #269744
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).April 14, 2018 at 1:56 am #269816
Overflow hidden fixed it. Thanks a lot, I’d never figured it out on my own.
You must be logged in to reply to this topic.