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

Guide on implementing a looping settimeout function on a sliding page to dynamically load an HTML template within the Framework 7 framework

Ways to ensure a form label is accessible via keyboard navigation

Assistance needed with CSS - making an element occupy the entire remaining vertical space

how to adjust the width of table columns dynamically using ng-repeat and AngularJS

Remove the option to select specific minutes from the time input on an HTML

Obtaining the URL from the anchor tag

Change the function from onLoad to onClick exclusively

Bottom section of a multi-level website with horizontal dividers

Avoid using the FONT tag with the execCommand function

What is the functionality behind a free hosting website?

Extract the URL parameter and eliminate all characters following the final forward slash

execute a different function once the animation has finished running with the .bind

Utilizing the empty space to the right of an image in HTML

what distinguishes CSS properties for Id versus class selectors

What is the process for combining AngularJS filters?

Is it possible to track keystrokes without the use of text input fields?

Discover the method for obtaining a selected element in a bootstrap dropdown that is dynamically populated

How can one element be made to rely on the presence of another element?

What is the best way to store an HTML header text file in a PHP variable?

Maximizing Particle Performance Using JavaScript