Search code examples
htmlcssspacing

Spacing For Image and Text Elements

I am trying to create individual image & text sections.

When the image & text section contains a lot of content, the content will never go under the image. The content always stays within it's content area.
*this is the issue I keep having....the text keeps wrapping under the image, and the spacing is not even between each image & text section.

Below is sample code I have been tinkering with, but so far I have not been able to get the result I explained above, and in the image example below.

I have tried/added the following CSS to the paragraph tag individually, but still not working as desired. overflow: hidden; display: block;

I don't have a URL/page to share since I am creating this page locally.

Any help is greatly appreciated!

 

<a href="https://example.com/wp-content/uploads/2021/11/sample-image-name.jpg"><img 
class="alignleft wp-image-45473 size-medium" src="https://example.com/wp- 
content/uploads/2021/11/sample-image-name.jpg" alt="first-name-last-name" width="200" 
height="200" /></a>
<h3>First Last Name</h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut 
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat 
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt 
mollit anim id est laborum.

&nbsp;

enter image description here

Solution

  • From your code, i can guess that you use wordpress.

    So, most likely you could use bootstrap classes to achieve what you are trying to achieve.

    I would recommend you, to have a look at Bootstrap 4 Media lists

    As for an example code, with pure css and html, of what are you trying to do check this out:

    .block-container {
  float: left;
  width: 100%;
}

.image-container {
  float: left;
  width: 200px;
  margin: 10px;
}

.text-container {
  float: left;
  width: auto;
  max-width: 300px;
}
    <!-- BLOCK START -->
<div class="block-container">
  <div class="image-container">
    <a href="https://example.com/wp-content/uploads/2021/11/sample-image-name.jpg"><img class="alignleft wp-image-45473 size-medium" src="https://via.placeholder.com/200" alt="first-name-last-name" width="200" height="200" /></a>
  </div>
  <div class="text-container">
    <h3>First Last Name</h3>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Duis aute irure dolor in reprehenderit in voluptate velit
    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>
<!-- BLOCK END -->
<!-- BLOCK START -->
<div class="block-container">
  <div class="image-container">
    <a href="https://example.com/wp-content/uploads/2021/11/sample-image-name.jpg"><img class="alignleft wp-image-45473 size-medium" src="https://via.placeholder.com/200" alt="first-name-last-name" width="200" height="200" /></a>
  </div>
  <div class="text-container">
    <h3>First Last Name</h3>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Duis aute irure dolor in reprehenderit in voluptate velit
    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>
<!-- BLOCK END -->
<!-- BLOCK START -->
<div class="block-container">
  <div class="image-container">
    <a href="https://example.com/wp-content/uploads/2021/11/sample-image-name.jpg"><img class="alignleft wp-image-45473 size-medium" src="https://via.placeholder.com/200" alt="first-name-last-name" width="200" height="200" /></a>
  </div>
  <div class="text-container">
    <h3>First Last Name</h3>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Duis aute irure dolor in reprehenderit in voluptate velit
    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>
<!-- BLOCK END -->
<!-- BLOCK START -->
<div class="block-container">
  <div class="image-container">
    <a href="https://example.com/wp-content/uploads/2021/11/sample-image-name.jpg"><img class="alignleft wp-image-45473 size-medium" src="https://via.placeholder.com/200" alt="first-name-last-name" width="200" height="200" /></a>
  </div>
  <div class="text-container">
    <h3>First Last Name</h3>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Duis aute irure dolor in reprehenderit in voluptate velit
    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>
<!-- BLOCK END -->
<!-- BLOCK START -->
<div class="block-container">
  <div class="image-container">
    <a href="https://example.com/wp-content/uploads/2021/11/sample-image-name.jpg"><img class="alignleft wp-image-45473 size-medium" src="https://via.placeholder.com/200" alt="first-name-last-name" width="200" height="200" /></a>
  </div>
  <div class="text-container">
    <h3>First Last Name</h3>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Duis aute irure dolor in reprehenderit in voluptate velit
    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>
<!-- BLOCK END -->