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?
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.