I'm trying to set two paragraph containers beside each other in a wrapper that is 1140px wide. In between the paragraph containers is an image in the middle. My code does not seem to line the paragraphs besides each other and I'm not sure why.
My aim is when the browser resizes to mobile, I want the 2nd paragraph to appear underneath the first with the image still in the middle. I haven't got as far as media queries as I can't seem to line up the first part.
Firstly, you can play with the percentages of the columns and figure to get the effect that you want depending on the dimensions of the image. All I did was set them all to float left.
I think you could use a div rather than a figure but I like the figure element it gives you a lot of flexibility.
Aha, I knew that there was something fundamentally wrong and that gap between the id and class selector was it.
Interesting regarding the percentages. I thought you had to set the % according to the parent element but I see you play with it flexibly and it is still ok.
I thought that figure was only for pics, but is that not the case?
EDIT: Scrap that - it is for the image, and the parent container is divided into three even parts by the two p's and image container.
My aim is when the browser resizes to mobile, I want the 2nd paragraph to appear underneath the first with the image still in the middle. I haven't got as far as media queries as I can't seem to line up the first part.
JsFiddle
Are you saying that you want the paragraphs on the same line with an image centered between them? Such as
paragraph - image - paragraph
that adjusts to
paragraph
image
paragraph
Otherwise I'm not sure what you are after.
However, see here: http://jsfiddle.net/Paulie_D/hDdLM/5/
Firstly, you can play with the percentages of the columns and figure to get the effect that you want depending on the dimensions of the image. All I did was set them all to float left.
I think you could use a div rather than a figure but I like the figure element it gives you a lot of flexibility.
Interesting regarding the percentages. I thought you had to set the % according to the parent element but I see you play with it flexibly and it is still ok.
I thought that figure was only for pics, but is that not the case?
EDIT: Scrap that - it is for the image, and the parent container is divided into three even parts by the two p's and image container.