How do I place paragraph to the right of a block of images?-CodePudding

I'm trying to place a small paragraph next to 4 images that are on top of each other.

At the moment the paragraph is below the images.

This is what I want to achieve:

https://ntchwaidumela-thomas.pixpa.com/architecture/container-society

I tried float but the text just moved to the right but stayed at the bottom.

  .column img {
  display: block;
  padding: 20px;
  width: 55%;
  height: auto;
}

.column {
  margin-left: 70px;
  display: inline-block;
  margin-bottom: 40px;
}

.para {
  display: inline-block;
  width: 55%;
  font-size: 18px;
  line-height: 30px;
  letter-spacing: 1px;
  text-align: center;
  color: rgba(47, 46, 46, 0.70);

<div >
  <div >
    <img id="img1" src="architecture/img1.jpg">
    <img id="img2" src="architecture/img2.jpg">
    <img id="img3" src="architecture/img3.jpg">
    <img id="img4" src="architecture/img4.jpg">
  </div>
  <div >
    <p > text text text text text text text text text text text text tetx
      <br><br> text text text text text text text text text text text text tetx<br><br> text text text text text text text text text text text text tetx</p>
  </div>

CodePudding user response：

Don't use float in this case as flex will be a better fit to even make it responsive.

.row{
  display:flex;
  padding: 2rem;
}

::-webkit-scrollbar {
    display: none;
}

.Images_section{
  width:50vw;
  height:100vh;
  overflow-y: scroll;
}


.para_section{
  width:50vw;
  overflow-y: scroll;
  line-height:5rem;
  height:100vh;
  background-color: blue;
}

<div >
  <div >
    <img src="https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=465&q=80" alt="Img">
     <img src="https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=465&q=80" alt="Img">
     <img src="https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=465&q=80" alt="Img">
     <img src="https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=465&q=80" alt="Img">
  </div>
  
  <div >
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Unde esse mollitia officiis ex tempore quam deserunt porro aut praesentium reprehenderit. Maiores nulla ea qui animi harum dignissimos doloremque corporis, non modi. Omnis facere reprehenderit assumenda ad illo labore corporis eos suscipit debitis veritatis, itaque laudantium nulla dolorem expedita. Et, eius.
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure natus quo ducimus consequatur veniam laborum alias incidunt vero dolorum numquam facere voluptatem assumenda, dolore distinctio maxime nisi eaque reiciendis accusantium sint? A veniam pariatur earum eum eius adipisci harum quia sapiente esse, deleniti accusantium! Natus est esse architecto quasi? Temporibus.
  </div>
</div>

CodePudding user response：

One approach is as follows, to combine CSS Grid and Flex layout; explanatory comments are in the code:

/* a simple CSS reset, to ensure that all elements have the
   same box-sizing, margin, padding and font: */

*,
 ::before,
 ::after {
  box-sizing: border-box;
  font: normal 400 18px / 30px sans-serif;
  margin: 0;
  padding: 0;
}


/* here we use display: grid to create two equal-width
   columns (each of which is 1fr, which is one fraction
   of the space available to the grid): */

.row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* using logical properties to assign the margin;
     margin-block is the block-axis of the document
     (top-to-bottom in English/left-to-right languages);
     margin-inline is the inline-axis (the axis in which
     writing flows, so left-to-right in English): */
  margin-block: 1em;
  margin-inline: auto;
  /* an arbitrary width, adjust to taste: */
  width: 90vw;
}

.column {
  /* here we use display: flex: */
  display: flex;
  /* our flex-flow is set to column, so that the images
     appear one-above-the-other, top-to-bottom: */
  flex-flow: column;
  /* we set a 20px gap between adjacent elements: */
  gap: 20px;
  /* contents are placed horizontally and vertically in
     the center of the element; place-content is a short-hand
     for 'align-content' and 'justify-content' (applying the
     same value - 'center' - to each): */
  place-content: center;
}

div.para {
  /* to ensure position is calculated against this parent element,
     rather than any other ancestor: */
  position: relative;
}

p.para {
  color: rgba(47, 46, 46, 0.70);
  margin-block: 0;
  margin-inline: auto;
  text-align: center;
  width: 90%;
  /* to ensure the p.para element(s) are positioned on-screen as the
     document is scrolled: */
  position: sticky;
  /* defining the vertical-position, in relation to the 'top' border
     of the element: */
  top: 1em;
}

<div >
  <div >
    <img id="img1" src="architecture/img1.jpg">
    <img id="img2" src="architecture/img2.jpg">
    <img id="img3" src="architecture/img3.jpg">
    <img id="img4" src="architecture/img4.jpg">
  </div>
  <div >
    <p > text text text text text text text text text text text text tetx
      <br><br> text text text text text text text text text text text text tetx<br><br> text text text text text text text text text text text text tetx</p>
  </div>

References:

CodePudding user response：

make the row class display:flex and height:100vh

.row{
  display:flex;
  height:100vh;
}
.column img {
  display: block;
  padding: 20px;
  width: 80%;
  height: auto;
}

.column {
  height:100vh;
  overflow-y: scroll;
  margin-left: 70px;
  display: inline-block;
  margin-bottom: 40px;
  width: 60%;
}

.para {
  display: inline-block;
  width: 55%;
  font-size: 18px;
  color: rgba(47, 46, 46, 0.70); 
  letter-spacing: 3px;
  line-height: 60px;
  text-align: center;
  
}

<div >
  <div >
    <img id="img1" src="https://picsum.photos/200">
    <img id="img2" src="https://picsum.photos/200">
    <img id="img3" src="https://picsum.photos/200">
    <img id="img4" src="https://picsum.photos/200">
  </div>
  <div >
    <p > text text text text text text text text text text text text tetx
      <br><br> text text text text text text text text text text text text tetx<br><br> text text text text text text text text text text text text  text text text text text text text text text text text text tetx<br><br> text text text text text text text text text text text text   text text text text text text text text text text text text tetx</p>
  </div>