CODEWITHSUNDEEP
htmlcss
Manoj
Manoj

Reputation: 275

Horizontal alignment of several 'divs' with various text lengths

I have 3 identical divs of fixed width. Each contains a text of various lengths and another div which float right.

When the text are in equal length they auto aligned without any problem. But when the text lengths are different alignment changes drastically. I have tried to fixed with various settings and non succeeds, I want them to align horizontally regardless of text length!

What is missing here?

.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 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>

Upvotes: 1

Views: 70

Answers (4)

Pete
Pete

Reputation: 58462

If you are just after your .con divs aligning horizontally, all you need to do is add vertical-align:top; to .con:

.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>

Upvotes: 3

grinmax
grinmax

Reputation: 1855

Try this, i'm did through 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;
}

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

Upvotes: 1

Asons
Asons

Reputation: 87251

You could use flexbox to do that, here done by giving the main a display: flex and setting the topic to width: 100% so it always will occupy the first row.

.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 want the con to not wrap, here is a version using a wrapper to keep them in 1 line

.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>

Upvotes: 1

TheWeeezel
TheWeeezel

Reputation: 361

The solution to your problem is either a hack width negative margins: https://www.smashingmagazine.com/2009/07/the-definitive-guide-to-using-negative-margins/

This would lead to equal height boxes and removes unwanted behaviour regarding alignment.

Or as i would suggest a more modern version u try using flex properties: https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties -> with this solution you are way more flexible to choose the behaviour of boxes in any particular way and this is a concept definately worth knowing.

I recently used flex to create the same concept as you and i can tell you its the best way to achieve what you want. The only issue with flex is the browser support with IE 11. But still this is the way to do it.

http://caniuse.com/#feat=flexbox

Upvotes: -1

Related Questions