Responsive Paragraph Containers

[tobeeornot]

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.

JsFiddle

[Paulie_D]

Paragraphs are block level elements and thus will expand horizontally to take up as much room as they need. Ditto for images.

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.

[tobeeornot]

Yes, @Paulie_D that’s exactly what I am after. Thanks for the explanation too as I am trying to learn, not just grab code.

[Paulie_D]

There is a slight issue in your fiddle’s CSS. You need to put a space between the Id name and the dot and all sorts of nice things happen.

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.

[Paulie_D]

Actually, on thinking about it…it could be even more reponsive…http://jsfiddle.net/Paulie_D/hDdLM/9/

[tobeeornot]

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.

[Author]

Posts