How Do I Display Paragraphs Of Text Between Two Div Elements That Contain Images?

I'm having trouble putting the paragraphs in the middle of the page between my other div contents. I have two div elements, one on the left and the other on the right, and I want

Solution 1:

The simple thing to do is to use flexbox.

.flex-parent{display:flex;}

<divclass="flex-parent"><divclass="flex-child"><imgsrc="http://placekitten.com/150/300" /></div><divclass="flex-child"><p>Lorem ipsum dolor sit amut. Lorem ipsum dolor sit amut. Lorem ipsum dolor sit amut. Lorem ipsum dolor sit amut. Lorem ipsum dolor sit amut. Lorem ipsum dolor sit amut. Lorem ipsum dolor sit amut. Lorem ipsum dolor sit amut. Lorem ipsum dolor sit amut. Lorem ipsum dolor sit amut. Lorem ipsum dolor sit amut. Lorem ipsum dolor sit amut. Lorem ipsum dolor sit amut. Lorem ipsum dolor sit amut. Lorem ipsum dolor sit amut. Lorem ipsum dolor sit amut. Lorem ipsum dolor sit amut. Lorem ipsum dolor sit amut. </p></div><divclass="flex-child"><imgsrc="http://placekitten.com/150/300" /></div></div>

There is a reason why Bootstrap re-did their entire platform from Bootstrap3 to Bootstrap4, primarily to change from using floats to flexbox.

Flexbox requires two things:

1. A parent container (e.g. DIV, section, aside, p, etc)

2. One or more child elements (e.g. div, p, img, etc)

You turn flexbox on on the parent: display:flex;

Then, there are various switches. Some are set on the parent (as in the case of justify-content) but others might be set on the items (as with flex-grow:1)

YouTube tutorial - fast-paced and best-of-breed

Here is a great cheatsheet for Flexbox.

Watch the tutorial and in 40 mins from now your problem will be solved -- and you'll know flexbox.

_{P.S. I have no connection to the video or its presenter - I was fortunate to discover it, and now pass it along.}

Another great idea is to learn/use Bootstrap - its main claims to fame are: (a) to provide a responsive layout grid that you use to design your page *with the great benefit that your page will look great on all screen sizes and devices, and (b) to provide a number of easy-to-use tools that will make it easy to create modal dialog boxes, screen-spy scroll navigation, uniform buttons and color themes, etc.

Note that the primary change from Bootstrap3 to Bootstrap4 was redesigning the core grid system in flexbox. That gives you an idea how important flexbox is.

Solution 2:

You can restructure your code to use three divs instead of two and a paragraph. Your center div can contain the paragraph:

.parent {
  display: flex;
}
.para {
   padding: 6px12px;
}

<divclass="parent"><div><imgsrc="https://via.placeholder.com/150" /></div><divclass="para"><p>
    This is a paragraph
    </p></div><div><imgsrc="https://via.placeholder.com/150" /></div></div>

Solution 3:

A thinking by me would be to add an master div. Get all 3 elements inside by order, img(div), paragraph, img(div). Then in CSS use on the master div:

display flex; justify-content:space-between;

This should get your right setup. From there play with the width of the elements and get em the way you like.

Cheers.

Solution 4:

Please use display:flex;

here is some code, i have tired, i hope this will be helpful for you.

<div class="container">
   <divclass="content"><divclass="image1"><imgsrc="https://tinyjpg.com/images/social/website.jpg"alt=""></div><divclass="paragraph"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, a ad sequi. Voluptas enim veniam modi. Sapiente amet, quas quasi aliquid, velit perferendis optio voluptate earum adipisci eius itaque totam.</p></div><divclass="image2"><imgsrc="https://tinyjpg.com/images/social/website.jpg"alt=""></div></div></div>

.container {
        width: 80%;
        margin: 0 auto;
    }
    .content
    {
        display: flex;
        align-items: center;
        justify-content: space-between;
        align-content: center;
    }
    .content.image1,
    .content.image2,
    .content.paragraph
    {
        width: 32%;
    }
    img
    {
        width: 100%;
    }