maintaining the alignment of three div elements

Question

maintaining the alignment of three div elements

I am struggling to keep three divs side by side within a container, each containing an image and text below it. I had this layout working perfectly before, but now the right div falls underneath the other two when the screen size is reduced, followed by the middle one. I know it's possible to keep them all side by side as I've done it in the past, but for some reason, I can't remember how I achieved it.

HTML

<div id='container'>

        <div class='one-third'>
            <a><img src='http://gratisography.com/pictures/264_1.jpg'><h3>Headline</h3></a><p>Medieval texts date the arrival of the Vikings in the British Isles to the 790s A.D., when fierce raiders from Scandinavia suddenly appeared along the coasts, plundering rich monasteries and terrorizing local communities. </p>
        </div>

        <div class='one-third'>
            <a><img src='http://gratisography.com/pictures/264_1.jpg'><h3>Headline</h3><p>Medieval texts date the arrival of the Vikings in the British Isles to the 790s A.D., when fierce raiders from Scandinavia suddenly appeared along the coasts, plundering rich monasteries and terrorizing local communities. </p>
        </div>

        <div class='one-third'>
            <a><img src='http://gratisography.com/pictures/264_1.jpg'><h3>Headline</h3><p>Medieval texts date the arrival of the Vikings in the British Isles to the 790s A.D., when fierce raiders from Scandinavia suddenly appeared along the coasts, plundering rich monasteries and terrorizing local communities. </p> 
        </div>

CSS

.one-third  {
        width: 30%;
        display: inline-block;
        margin: 5% 0 0 2.5%; }

    .one-third img {
        width: 100%;
        height: 300px; }

    .one-third h3 {
        margin: .5em 0 2em 0; }

html css

Answer 1

Answer №1

Your code had some issues with unclosed <a> tags and setting a height on the <img>. To fix this, I recommend not setting a height on the image unless you want it to distort when scaling. Here's how you can address the problem:

Change: display: inline-block to display: block in .one-third {}
Add: float: left; in .one-third {}
Check out this JSFiddle for reference

Corrected code:

.one-third  {
    max-width: 30%;
    display: block;
    float: left;
    padding: 5% 0 0 2.5%; 
}

.one-third img {
    width: 100%;
}

.one-third h3 {
    padding: 0.5em 0 2em 0;
}

<div id='container'>
    <div class='one-third'>
        <a>
            <img src='http://gratisography.com/pictures/264_1.jpg'>
            <h3>Headline</h3>
        </a>
        <p>Medieval texts date the arrival of the Vikings in the British Isles to the 790s A.D., when fierce raiders from Scandinavia suddenly appeared along the coasts, plundering rich monasteries and terrorizing local communities. </p>
    </div>
    <div class='one-third'>
        <a>
            <img src='http://gratisography.com/pictures/264_1.jpg'>
            <h3>Headline</h3>
        </a>
        <p>Medieval texts date the arrival of the Vikings in the British Isles to the 790s A.D., when fierce raiders from Scandinavia suddenly appeared along the coasts, plundering rich monasteries and terrorizing local communities. </p>
    </div>
    <div class='one-third'>
        <a>
            <img src='http://gratisography.com/pictures/264_1.jpg'>
            <h3>Headline</h3>
        </a>
        <p>Medieval texts date the arrival of the Vikings in the British Isles to the 790s A.D., when fierce raiders from Scandinavia suddenly appeared along the coasts, plundering rich monasteries and terrorizing local communities. </p>
    </div>
</div>

Answer 2

Your code had some issues with unclosed <a> tags and setting a height on the <img>. To fix this, I recommend not setting a height on the image unless you want it to distort when scaling. Here's how you can address the problem:

Change: display: inline-block to display: block in .one-third {}
Add: float: left; in .one-third {}
Check out this JSFiddle for reference

Corrected code:

.one-third  {
    max-width: 30%;
    display: block;
    float: left;
    padding: 5% 0 0 2.5%; 
}

.one-third img {
    width: 100%;
}

.one-third h3 {
    padding: 0.5em 0 2em 0;
}

<div id='container'>
    <div class='one-third'>
        <a>
            <img src='http://gratisography.com/pictures/264_1.jpg'>
            <h3>Headline</h3>
        </a>
        <p>Medieval texts date the arrival of the Vikings in the British Isles to the 790s A.D., when fierce raiders from Scandinavia suddenly appeared along the coasts, plundering rich monasteries and terrorizing local communities. </p>
    </div>
    <div class='one-third'>
        <a>
            <img src='http://gratisography.com/pictures/264_1.jpg'>
            <h3>Headline</h3>
        </a>
        <p>Medieval texts date the arrival of the Vikings in the British Isles to the 790s A.D., when fierce raiders from Scandinavia suddenly appeared along the coasts, plundering rich monasteries and terrorizing local communities. </p>
    </div>
    <div class='one-third'>
        <a>
            <img src='http://gratisography.com/pictures/264_1.jpg'>
            <h3>Headline</h3>
        </a>
        <p>Medieval texts date the arrival of the Vikings in the British Isles to the 790s A.D., when fierce raiders from Scandinavia suddenly appeared along the coasts, plundering rich monasteries and terrorizing local communities. </p>
    </div>
</div>

Answer 3

Answer №2

It seems like your code is functioning as expected, take a look below.

As you decrease the size of your page, eventually the word "Headline" in h3 will become wider than 1/3 of the page width, causing the inline-block elements to wrap.

If you were to use CSS tables, you could keep all three items on one line but this may lead to overflow issues.

Consider how you want your layout to handle extremely narrow cases.

.one-third {
  width: 30%;
  display: inline-block;
  margin: 5% 0 0 2.5%;
}
.one-third img {
  width: 100%;
  height: 300px;
}
.one-third h3 {
  margin: .5em 0 2em 0;
}

<div id='container'>

  <div class='one-third'>
    <a>
      <img src='http://gratisography.com/pictures/264_1.jpg'>
      <h3>Headline</h3>
    </a>
    <p>Medieval texts date the arrival of the Vikings in the British Isles to the 790s A.D., when fierce raiders from Scandinavia suddenly appeared along the coasts, plundering rich monasteries and terrorizing local communities.</p>
  </div>

  <div class='one-third'>
    <a>
      <img src='http://gratisography.com/pictures/264_1.jpg'>
      <h3>Headline</h3>
    </a>
    <p>Medieval texts date the arrival of the Vikings in the British Isles to the 790s A.D., when fierce raiders from Scandinavia suddenly appeared along the coasts, plundering rich monasteries and terrorizing local communities.</p>
  </div>

  <div class='one-third'>
    <a>
      <img src='http://gratisography.com/pictures/264_1.jpg'>
      <h3>Headline</h3>
    </a>
    <p>Medieval texts date the arrival of the Vikings in the British Isles to the 790s A.D., when fierce raiders from Scandinavia suddenly appeared along the coasts, plundering rich monasteries and terrorizing local communities.</p>
  </div>

  <div>

Answer 4

It seems like your code is functioning as expected, take a look below.

As you decrease the size of your page, eventually the word "Headline" in h3 will become wider than 1/3 of the page width, causing the inline-block elements to wrap.

If you were to use CSS tables, you could keep all three items on one line but this may lead to overflow issues.

Consider how you want your layout to handle extremely narrow cases.

.one-third {
  width: 30%;
  display: inline-block;
  margin: 5% 0 0 2.5%;
}
.one-third img {
  width: 100%;
  height: 300px;
}
.one-third h3 {
  margin: .5em 0 2em 0;
}

<div id='container'>

  <div class='one-third'>
    <a>
      <img src='http://gratisography.com/pictures/264_1.jpg'>
      <h3>Headline</h3>
    </a>
    <p>Medieval texts date the arrival of the Vikings in the British Isles to the 790s A.D., when fierce raiders from Scandinavia suddenly appeared along the coasts, plundering rich monasteries and terrorizing local communities.</p>
  </div>

  <div class='one-third'>
    <a>
      <img src='http://gratisography.com/pictures/264_1.jpg'>
      <h3>Headline</h3>
    </a>
    <p>Medieval texts date the arrival of the Vikings in the British Isles to the 790s A.D., when fierce raiders from Scandinavia suddenly appeared along the coasts, plundering rich monasteries and terrorizing local communities.</p>
  </div>

  <div class='one-third'>
    <a>
      <img src='http://gratisography.com/pictures/264_1.jpg'>
      <h3>Headline</h3>
    </a>
    <p>Medieval texts date the arrival of the Vikings in the British Isles to the 790s A.D., when fierce raiders from Scandinavia suddenly appeared along the coasts, plundering rich monasteries and terrorizing local communities.</p>
  </div>

  <div>

Answer 5

Answer №3

Consider including box-sizing: border-box; in the .one-third style. By doing this, you can ensure that margins and padding are included in the total width of the element.

Answer 6

Consider including box-sizing: border-box; in the .one-third style. By doing this, you can ensure that margins and padding are included in the total width of the element.

Answer 7

Answer №4

Adjust the parent's font-size to 0 and then revert the child elements back to their original size. To illustrate, I have configured the divs to precisely occupy 33% of the parent each:

.one-third {
  width: 33%;
  display: inline-block;
  margin: 0%;
  font-size: 12px;
}
.one-third img {
  width: 100%;
  height: 300px;
}
.one-third h3 {
  margin: .5em 0 2em 0;
}
#container {
  font-size: 0;
}

<div id='container'>

  <div class='one-third'>
    <a>
      <img src='http://gratisography.com/pictures/264_1.jpg'>
      <h3>Headline</h3>
    </a>
    <p>Medieval texts date the arrival of the Vikings in the British Isles to the 790s A.D., when fierce raiders from Scandinavia suddenly appeared along the coasts, plundering rich monasteries and terrorizing local communities.</p></a>
  </div>

  <div class='one-third'>
    <a>
      <img src='http://gratisography.com/pictures/264_1.jpg'>
      <h3>Headline</h3>
      <p>Medieval texts date the arrival of the Vikings in the British Isles to the 790s A.D., when fierce raiders from Scandinavia suddenly appeared along the coasts, plundering rich monasteries and terrorizing local communities.</p></a>
  </div>

  <div class='one-third'>
    <a>
      <img src='http://gratisography.com/pictures/264_1.jpg'>
      <h3>Headline</h3>
      <p>Medieval texts date the arrival of the Vikings in the British Isles to the 790s A.D., when fierce raiders from Scandinavia suddenly appeared along the coasts, plundering rich monasteries and terrorizing local communities.</p>
</a>     
 </div>

  <div>

^{@Marc Audet deserves credit for pointing out that your <a> tags should be properly closed for correct HTML markup.}

Answer 8

Adjust the parent's font-size to 0 and then revert the child elements back to their original size. To illustrate, I have configured the divs to precisely occupy 33% of the parent each:

.one-third {
  width: 33%;
  display: inline-block;
  margin: 0%;
  font-size: 12px;
}
.one-third img {
  width: 100%;
  height: 300px;
}
.one-third h3 {
  margin: .5em 0 2em 0;
}
#container {
  font-size: 0;
}

<div id='container'>

  <div class='one-third'>
    <a>
      <img src='http://gratisography.com/pictures/264_1.jpg'>
      <h3>Headline</h3>
    </a>
    <p>Medieval texts date the arrival of the Vikings in the British Isles to the 790s A.D., when fierce raiders from Scandinavia suddenly appeared along the coasts, plundering rich monasteries and terrorizing local communities.</p></a>
  </div>

  <div class='one-third'>
    <a>
      <img src='http://gratisography.com/pictures/264_1.jpg'>
      <h3>Headline</h3>
      <p>Medieval texts date the arrival of the Vikings in the British Isles to the 790s A.D., when fierce raiders from Scandinavia suddenly appeared along the coasts, plundering rich monasteries and terrorizing local communities.</p></a>
  </div>

  <div class='one-third'>
    <a>
      <img src='http://gratisography.com/pictures/264_1.jpg'>
      <h3>Headline</h3>
      <p>Medieval texts date the arrival of the Vikings in the British Isles to the 790s A.D., when fierce raiders from Scandinavia suddenly appeared along the coasts, plundering rich monasteries and terrorizing local communities.</p>
</a>     
 </div>

  <div>

^{@Marc Audet deserves credit for pointing out that your <a> tags should be properly closed for correct HTML markup.}

Answer 9

Answer №5

Eliminate the gaps between divs:

<div id='container'>
    <div class='one-third'>
        <a><img src='http://gratisography.com/pictures/264_1.jpg'><h3>Headline</h3></a><p>Medieval texts refer to the arrival of the Vikings in the British Isles around 790 AD, when fierce raiders from Scandinavia suddenly appeared along the coasts, looting rich monasteries and frightening local communities. </p>
    </div>
    <div class='one-third'>
        <a><img src='http://gratisography.com/pictures/264_1.jpg'><h3>Headline</h3><p>Medieval texts mention the arrival of the Vikings in the British Isles around 790 AD, when fierce raiders from Scandinavia suddenly emerged along the coasts, pillaging wealthy monasteries and intimidating local communities. </p>
    </div>
    <div class='one-third'>
        <a><img src='http://gratisography.com/pictures/264_1.jpg'><h3>Headline</h3><p>Historical documents record the entry of the Vikings into the British Isles during the 790s AD, as aggressive raiders from Scandinavia abruptly surfaced along the shores, ransacking prosperous monasteries and causing fear among local residents. </p>
    </div>

    <div>

Alternatively, you can utilize the float property.

Answer 10

Eliminate the gaps between divs:

<div id='container'>
    <div class='one-third'>
        <a><img src='http://gratisography.com/pictures/264_1.jpg'><h3>Headline</h3></a><p>Medieval texts refer to the arrival of the Vikings in the British Isles around 790 AD, when fierce raiders from Scandinavia suddenly appeared along the coasts, looting rich monasteries and frightening local communities. </p>
    </div>
    <div class='one-third'>
        <a><img src='http://gratisography.com/pictures/264_1.jpg'><h3>Headline</h3><p>Medieval texts mention the arrival of the Vikings in the British Isles around 790 AD, when fierce raiders from Scandinavia suddenly emerged along the coasts, pillaging wealthy monasteries and intimidating local communities. </p>
    </div>
    <div class='one-third'>
        <a><img src='http://gratisography.com/pictures/264_1.jpg'><h3>Headline</h3><p>Historical documents record the entry of the Vikings into the British Isles during the 790s AD, as aggressive raiders from Scandinavia abruptly surfaced along the shores, ransacking prosperous monasteries and causing fear among local residents. </p>
    </div>

    <div>

Alternatively, you can utilize the float property.

Answer 11

Answer №6

Simply include float: left; to the .one-third class.

Check out this interactive JSFiddle example: https://jsfiddle.net/ab2o5z8s/

Answer 12

Simply include float: left; to the .one-third class.

Check out this interactive JSFiddle example: https://jsfiddle.net/ab2o5z8s/

maintaining the alignment of three div elements

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Achieve a seamless integration of a navbar and list on the same line by utilizing the power of Bootstrap

If the content within a <div> element exceeds the available width, a horizontal scrollbar will be displayed

What steps can I take to prevent the array from constantly updating and instead only show the final task?

Is there a way to create a responsive navbar using flexbox that automatically transitions into two rows at smaller screen sizes?

What is the process for incorporating a full-page blog into a blog preview?

Generating DOM elements at specific intervals using Jquery

Tips for extracting innerHTML or sub-string from all elements that have a specific class name using JavaScript

Guide on how to align h1 in the navigation bar

The JQUERY Uncaught Error: Syntax error message popped up when trying to access an unrecognized expression on the javascript: void(0)

Save to clipboard HTML with forward slash

Refrain from using inline JavaScript code within your

Troubleshooting my HTML5 local storage issues for optimal functionality

Looking to switch up the background color while scrolling, any tips?

The font in my Next.js / Tailwind CSS project starts off bold, but unexpectedly switches back to its original style

Is it possible to create a translucent glass floating box over HTML elements, similar to the frosted glass effect seen in iOS7?

A step-by-step guide on showcasing database data on an HTML page using jQuery

Delete the following td when the mouse hovers over it

Tips for handling the accent mark (diacritic mark)

In Redux, it is possible to add characters to an array but for some reason the remove action does not successfully reach the reducer

The click event triggered by the onclick clone/function may not always activate the click handler