child escaping parent on float: right;
if i remove the float:right;, the text says inside the header, but when i add a float right, it decides to leave. any help on making this stay inside the header and float right?
26 Replies
probably shouldn't be using float. it pulls elements out of the flow and you end up with issues like what you're describing
what should i use instead?
flex is usually a good alternative
what would i use for the flex tho
like flex-right?
but that doesnt exist
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
its just going to be a logo and that button
that works! thank you
i didnt realise there was a flex end
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
yes
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
how exactly?
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
hmm
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
you change
justify-content: flex-end; to justify-content: space-between;ok
there's other options too if you have more than just a logo, but I'd suggest asking about that in a fresh question if you get to it, and adding a codepen 🙂
well my logo insnt resizing so ill fix that rq
forgot to add img
well that doesnt seem to work
they are just stacked
display flex goes on the parent, it doesn't make any sense on an img tag
\
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
there's an article on flexbox on mdn too, if you prefer https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
Kevin has a bunch of videos on it too, and an entire (free) course called Conquering Responsive Layouts https://courses.kevinpowell.co/conquering-responsive-layouts
Kevin Powell
Conquering Responsive Layouts
Are you ready to take the challenge and finally figure out responsive layouts? Click the button below and jump in!