Media-Ed-Online / intro-web-dev-2017aut

Site for course "Introduction to Web Design and Development."
https://media-ed-online.github.io/intro-web-dev-2017aut/
MIT License
12 stars 3 forks source link

Clearing flex? #116

Open MarkLannen opened 6 years ago

MarkLannen commented 6 years ago

I want to float a quote (to the right) inside a flex item. But as I think browsers ignore floats inside flex items, does anyone know how to do that?

Here is the url for my live site: https://marklannenum.github.io/web-dev-hw/project-4/

I'd like the quote inside the 'Responsive Web Design' section (black background) to float to the right.

JonSwallow commented 6 years ago

@MarkLannenUM I found this on Stack Overflow. I hope it helps. Making a flex item float right

MarkLannen commented 6 years ago

Thanks @JonSwallow. I couldn't quite get there with those suggestions, but I did make it look a bit better with:

margin-left: auto; order: 2;

That moved the quote down to the bottom right so is a bit better aesthetically, especially at the breaks. But what I wanted was for it to have the paragraph wrap around it as it would if it were floated.