Grow your CSS skills. Land your dream job.

Responsive Paragraph Containers

  • # June 15, 2012 at 10:32 am

    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

    # June 15, 2012 at 10:50 am

    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.

    # June 15, 2012 at 11:07 am

    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.

    # June 15, 2012 at 11:22 am

    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.

    # June 15, 2012 at 11:38 am

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

    # June 15, 2012 at 1:53 pm

    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.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".