Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Rikki Collier
2,708 PointsFloated containers wrapping awkwardly
EDIT: ******* I found the solution to this issue. Please check the comment below to see what I did *******
Hi Treehouse,
So I have a bit of an issue with some floated containers on my page wrapping awkwardly when the page is resized.
This is what I want it to look like: http://imgur.com/a/PcDy5
This is what it looks like at certain browser resolutions: http://imgur.com/a/hy8Qj
I can tell that the problem occurs due to the list text in the top two containers - when one of the lists moves up a line it changes the size of the box and then floated container below that jumps over to that side.
I had the same problem before (as I have two more floated containers at the top of the page under which the album containers used to sit) - in that case I just set a min-height on the containers to fix the problem. It did the job but it's not a robust solution.
This is because I have a lot more text in the two album containers you can see at the top of the page there. I don't want to set a min-height that encompasses their max height as they will just look very tall and awkward.
Is there a practical and robust way I can solve this issue? My friend mentioned Flexbox but I haven't covered that yet in the course. Is Flexbox the only way or can I make sure the floated containers stay where I want them to without using it?
Edit: Just to clarify: the bottom container is floated left, which is where I want it to stay.
Many thanks,
Rik
p.s. If this needs any more clarification then please let me know.
1 Answer
Alex Watts
8,396 PointsHi Rikki,
This is a common issue that most developers will encounter. There are frameworks available so that you can manage the layout of your webpage such as Bootstrap or Zurb Foundation. However, they are not always the best solution. So what I would do is create two individual rows (divs), and then in each row add your two boxes with the book extracts and set them both to the width of 50%. Then float them next to each other as you have done. This provides a more convenient and responsive way of positioning the elements on your page.
Hope this helps :)
Link to making rows - http://www.w3schools.com/css/css_rwd_grid.asp
Rikki Collier
2,708 PointsRikki Collier
2,708 PointsFor anyone with the same problem: I changed the floated elements to inline-block (as there are only two columns) - this worked but the elements were misaligned so I then applied vertical-align: top to the elements and that fixed the issue!
I love getting my teeth into a problem. As simple as issues like this are, it helps me grow as a programmer (still a total n00b). I hope this answer may help someone facing the same problem!