Welcome to the Treehouse Community
Looking to learn something new?
Trouble positioning the content of a info box over an image responsively
i thought i fought and understood layout elements meanwhile but there is one out of two areas i am still totally confused. one of those are boxes limited in space where the containing elements have to scale to remain in position relative to the boxes borders.
i've threw together a pen. http://codepen.io/rpkoller/pen/LDhux
The thing i try to accomplish is that the p element and the a element (the icon) are on one line. the p element to the left and the a element to the right. and the h3 above on the left. and if the box is scaled that they keep their position relative to the box borders. but i already fail to place the p and a elements on a line. Hope i was able to explain. Best regards Ralf
p.s. i left out the font sizing on purpose; wanted to focus solely onto the positioning and layout - font-size adjustments in media queries are no problem.
Ryan Boone26,518 Points
Yeah, anything other than
height: auto; tends to muck up responsive layouts.