Aligning multiple 'divs' horizontally with different lengths of text

Question

Aligning multiple 'divs' horizontally with different lengths of text

I have a set of 3 identical divs with fixed width. Each contains text of varying lengths and another nested div that is aligned to the right using float.

When the text lengths are equal, they align perfectly. However, when the text lengths differ, the alignment gets thrown off. I've experimented with different settings but none seem to work. My goal is to have them all align horizontally regardless of text length!

What could be causing this issue?

.con {
  width: 300px;
  height: 200px;
  display: inline-block;
  background: #996600;
  text-align: left;
  margin: 0px;
  padding: 0px;
}
.box {
  width: 150px;
  height: 150px;
  background-color: #333333;
  position: relative;
  float: right;
  margin: 0px;
  padding: 0px;
}
.main {
  text-align: center;
}

<div class="main">
  <h1 class="topic"> Topic goes here </h1>
  <div class="con">
    <div class="box"></div>
    <p class="para">My short text</p>
  </div>

  <div class="con">
    <div class="box"></div>
    <p class="para">My average length text that doesn't align properly</p>
  </div>

  <div class="con">
    <div class="box"></div>
    <p class="para">My long text that causes alignment issues due to extra length</p>
  </div>
</div>
</div>

html css

Answer 1

Answer №1

For those seeking to align their .con divs horizontally, the solution is simple. Just add vertical-align:top; to the .con class:

.con {
  vertical-align:top;
  width: 300px;
  height: 200px;
  display: inline-block;
  background: #996600;
  text-align: left;
  margin: 0px;
  padding: 0px;
}
.box {
  width: 150px;
  height: 150px;
  background-color: #333333;
  position: relative;
  float: right;
  margin: 0px, ;
  padding: 0px;
}
.main {
  text-align: center;
}

<div class="main">
  <h1 class="topic"> Topic goes here </h1>
  <div class="con">
    <div class="box"></div>
    <p class="para">My text, short text</p>
  </div>

  <div class="con">
    <div class="box"></div>
    <p class="para">My text goes here even though it did not work properly, normal length</p>
  </div>

  <div class="con">
    <div class="box"></div>
    <p class="para">My text goes here, even though it did not work properly, with extra text</p>
  </div>
</div>
</div>

Answer 2

For those seeking to align their .con divs horizontally, the solution is simple. Just add vertical-align:top; to the .con class:

.con {
  vertical-align:top;
  width: 300px;
  height: 200px;
  display: inline-block;
  background: #996600;
  text-align: left;
  margin: 0px;
  padding: 0px;
}
.box {
  width: 150px;
  height: 150px;
  background-color: #333333;
  position: relative;
  float: right;
  margin: 0px, ;
  padding: 0px;
}
.main {
  text-align: center;
}

<div class="main">
  <h1 class="topic"> Topic goes here </h1>
  <div class="con">
    <div class="box"></div>
    <p class="para">My text, short text</p>
  </div>

  <div class="con">
    <div class="box"></div>
    <p class="para">My text goes here even though it did not work properly, normal length</p>
  </div>

  <div class="con">
    <div class="box"></div>
    <p class="para">My text goes here, even though it did not work properly, with extra text</p>
  </div>
</div>
</div>

Answer 3

Answer №2

To achieve this layout, you can utilize the power of flexbox. By applying display: flex to the main element and setting the topic width to 100%, you ensure it occupies the first row at all times.

.main {
  text-align: center;
  display: flex;
  flex-wrap: wrap;
}
.topic {
  width: 100%;
}
.con {
  width: 300px;
  height: 200px;
  display: inline-block;
  background: #996600;
  text-align: left;
  margin: 0px;
  padding: 0px;
}
.box {
  width: 150px;
  height: 150px;
  background-color: #333333;
  position: relative;
  float: right;
  margin: 0px, ;
  padding: 0px;
}

<div class="main">
  <h1 class="topic"> Topic goes here </h1>
  
  <div class="con">
    <div class="box"></div>
    <p class="para">My text, short text</p>
  </div>

  <div class="con">
    <div class="box"></div>
    <p class="para">My text goes here even though it did not work properly, normal length</p>
  </div>

  <div class="con">
    <div class="box"></div>
    <p class="para">My text goes here, even though it did not work properly, with extra text</p>
  </div>
</div>
</div>

If you prefer the con elements to remain on one line without wrapping, consider using a wrapper as shown below:

.main {
  text-align: center;
}
.cons {
  display: flex;
  min-width: 720px;
}
.con {
  width: 300px;
  height: 200px;
  display: inline-block;
  background: #996600;
  text-align: left;
  margin: 0px;
  padding: 0px;
}
.box {
  width: 150px;
  height: 150px;
  background-color: #333333;
  position: relative;
  float: right;
  margin: 0px, ;
  padding: 0px;
}

<div class="main">
  <h1 class="topic"> Topic goes here </h1>
  
  <div class="cons">
  <div class="con">
    <div class="box"></div>
    <p class="para">My text, short text</p>
  </div>

  <div class="con">
    <div class="box"></div>
    <p class="para">My text goes here even though it did not work properly, normal length</p>
  </div>

  <div class="con">
    <div class="box"></div>
    <p class="para">My text goes here, even though it did not work properly, with extra text</p>
  </div>
  </div>
</div>

Answer 4

To achieve this layout, you can utilize the power of flexbox. By applying display: flex to the main element and setting the topic width to 100%, you ensure it occupies the first row at all times.

.main {
  text-align: center;
  display: flex;
  flex-wrap: wrap;
}
.topic {
  width: 100%;
}
.con {
  width: 300px;
  height: 200px;
  display: inline-block;
  background: #996600;
  text-align: left;
  margin: 0px;
  padding: 0px;
}
.box {
  width: 150px;
  height: 150px;
  background-color: #333333;
  position: relative;
  float: right;
  margin: 0px, ;
  padding: 0px;
}

<div class="main">
  <h1 class="topic"> Topic goes here </h1>
  
  <div class="con">
    <div class="box"></div>
    <p class="para">My text, short text</p>
  </div>

  <div class="con">
    <div class="box"></div>
    <p class="para">My text goes here even though it did not work properly, normal length</p>
  </div>

  <div class="con">
    <div class="box"></div>
    <p class="para">My text goes here, even though it did not work properly, with extra text</p>
  </div>
</div>
</div>

If you prefer the con elements to remain on one line without wrapping, consider using a wrapper as shown below:

.main {
  text-align: center;
}
.cons {
  display: flex;
  min-width: 720px;
}
.con {
  width: 300px;
  height: 200px;
  display: inline-block;
  background: #996600;
  text-align: left;
  margin: 0px;
  padding: 0px;
}
.box {
  width: 150px;
  height: 150px;
  background-color: #333333;
  position: relative;
  float: right;
  margin: 0px, ;
  padding: 0px;
}

<div class="main">
  <h1 class="topic"> Topic goes here </h1>
  
  <div class="cons">
  <div class="con">
    <div class="box"></div>
    <p class="para">My text, short text</p>
  </div>

  <div class="con">
    <div class="box"></div>
    <p class="para">My text goes here even though it did not work properly, normal length</p>
  </div>

  <div class="con">
    <div class="box"></div>
    <p class="para">My text goes here, even though it did not work properly, with extra text</p>
  </div>
  </div>
</div>

Answer 5

Answer №3

Check out this solution using flexbox!

<div class="main">
  <h1 class="topic"> Topic goes here </h1>
  <div class="con-items">
  <div class="con">
    <p class="para">My text, short text</p>
     <div class="box"></div>
  </div>

  <div class="con">
    <p class="para">My text goes here even though it did not work properly, normal length</p>
    <div class="box"></div>
  </div>

  <div class="con">
    <p class="para">My text goes here, even though it did not work properly, with extra text</p>
    <div class="box"></div>
  </div>
  </div>
</div>

.con-items {
    display: flex;
    justify-content: space-between;
}

.con {
  width: 300px;
  height: 200px;
  display: flex;
  background: #996600;
  text-align: left;
  margin: 0px;
  padding: 0px;
}
.box {
  min-width: 150px;
  max-width: 150px;
  background-color: #333333;
  position: relative;
  margin: 0px, ;
  padding: 0px;
}

.con p {
    width: 100%;
}

.main {
  text-align: center;
}

See the live demo here - https://jsfiddle.net/grinmax_/5139we1o/

Answer 6

Check out this solution using flexbox!

<div class="main">
  <h1 class="topic"> Topic goes here </h1>
  <div class="con-items">
  <div class="con">
    <p class="para">My text, short text</p>
     <div class="box"></div>
  </div>

  <div class="con">
    <p class="para">My text goes here even though it did not work properly, normal length</p>
    <div class="box"></div>
  </div>

  <div class="con">
    <p class="para">My text goes here, even though it did not work properly, with extra text</p>
    <div class="box"></div>
  </div>
  </div>
</div>

.con-items {
    display: flex;
    justify-content: space-between;
}

.con {
  width: 300px;
  height: 200px;
  display: flex;
  background: #996600;
  text-align: left;
  margin: 0px;
  padding: 0px;
}
.box {
  min-width: 150px;
  max-width: 150px;
  background-color: #333333;
  position: relative;
  margin: 0px, ;
  padding: 0px;
}

.con p {
    width: 100%;
}

.main {
  text-align: center;
}

See the live demo here - https://jsfiddle.net/grinmax_/5139we1o/

Answer 7

Answer №4

If you're facing a dilemma, one way to solve it is by employing a clever workaround like utilizing negative margins. Check out this resource for more information:

Using this method can help ensure that your boxes have equal heights and eliminate any misalignment issues.

Alternatively, I recommend exploring a more contemporary approach using flex properties. Here's a guide to get you started: https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties -> With flex properties, you have more control over how your boxes behave, making it a valuable concept to grasp.

I recently implemented a similar design using flex, and I can attest to its effectiveness in achieving desired layouts. Keep in mind that browser support, especially with IE 11, may be a concern. However, embracing flex is still considered the optimal solution.

For further reference on flexbox compatibility across browsers, visit http://caniuse.com/#feat=flexbox

Answer 8

If you're facing a dilemma, one way to solve it is by employing a clever workaround like utilizing negative margins. Check out this resource for more information:

Using this method can help ensure that your boxes have equal heights and eliminate any misalignment issues.

Alternatively, I recommend exploring a more contemporary approach using flex properties. Here's a guide to get you started: https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties -> With flex properties, you have more control over how your boxes behave, making it a valuable concept to grasp.

I recently implemented a similar design using flex, and I can attest to its effectiveness in achieving desired layouts. Keep in mind that browser support, especially with IE 11, may be a concern. However, embracing flex is still considered the optimal solution.

For further reference on flexbox compatibility across browsers, visit http://caniuse.com/#feat=flexbox

Aligning multiple 'divs' horizontally with different lengths of text

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Creating an engaging layout with Bootstrap 3: Utilizing grid systems for video integration

Increase the space below the footer on the Facebook page to allow for an

Unable to send messages through contact form - Issue with HTML/CSS

Achieving a Transparent Flash overlay on a website without hindering its usability (attention, interaction, form submissions, etc.)

Hover function not functioning properly

CSS grid challenges on a massive scale

Applying CSS dynamically to a mat-cell in Angular 6

Issues with the disappearance of elements when using the Toggle() function

Dealing with CSS Overflow Issues: Fixing the Scroll Bug

Modify the color of the select element when it is in an open state

Transform your ordinary HTML select into a stylish span with this custom CSS class

Tips for adding a border to a table cell without disrupting the overall structure of the table

Tips for Utilizing Border-Radius in Safari

Troubleshooting: Magento checkout page keeps scrolling to the top

Issues with CSS rendering have been encountered on the Facebook page

Ways to customize the color of a ReactSelect component?

Creating a Vertical Stack of Three Divs in ReactJS

Extract the image URL from the href attribute using Xpath

Is it possible for Penthouse to retrieve critical CSS while using javascript?

unexpected issue when trying to append a child element after creating its innerHTML