How can I left-align the text in a table of divs so that the rows are evenly distributed?

Question

I'm trying to arrange some names. I changed them out before posting using generatedata.com but the real ones are in alphabetical order from left to right each row.

I'm trying to figure out how to get the "columns" evenly spaced, as you can see the right column has extraneous space on the right side of it. I'd like in this example Tincidunt Nibh Phasellus Company to be the same distance from the edge of the parent container as the left side of the first column (ie: Ut Quam Vel Company).

Relevant code on Codepen.io

Screenshot:

HTML Markup:

<div class="inner body">
<section class="round-border">
    <div class="distributors-row">
        <div class="distributor-left">Egestas Nunc Sed Company</div>
        <div class="distributor-middle">Hendrerit A Arcu Institute</div>
        <div class="distributor-right">Molestie Sed Id Incorporated</div>
    </div>

    <div class="distributors-row">
        <div class="distributor-left">Ut Quam Vel Company</div>
        <div class="distributor-middle">Donec Egestas Duis LLC</div>
        <div class="distributor-right">Tincidunt Nibh Phasellus Company</div>
    </div>

    <div class="distributors-row">
        <div class="distributor-left">Praesent Luctus Company</div>
        <div class="distributor-middle">Curae; Donec Consulting</div>
        <div class="distributor-right">Magna A LLC</div>
    </div>

    <div class="distributors-row">
        <div class="distributor-left">Malesuada Ut Corporation</div>
        <div class="distributor-middle">Sit Amet Consectetuer Incorporated</div>
        <div class="distributor-right">Cum Sociis Foundation</div>
    </div>

    <div class="distributors-row">
        <div class="distributor-left">Rutrum Fusce Inc.</div>
        <div class="distributor-middle">Iaculis Odio Nam Limited</div>
        <div class="distributor-right">Interdum Libero Dui Institute</div>
    </div>

    <div class="distributors-row">
        <div class="distributor-left">Eget Laoreet LLC</div>
        <div class="distributor-middle">Elit Fermentum Risus Institute</div>
        <div class="distributor-right">Aliquet Proin Velit Company</div>
    </div>
    </section>

</div>    

CSS Formatting:

body {
background-color: #eee;
background-image: url(../images/patterns/light_toast.png);
color: rgba(102, 102, 102, 1);
font-family: 'Open Sans', sans-serif;
font-size: 16px;
margin:0px;
padding:0px;
}
.inner {
margin: 0 auto;
max-width: 940px;
padding: 0 40px;
}
.distributor-left {
float: left;
width: 33%;
margin: none;
text-align: left;
}
.distributor-middle {
float: left;
width: 33%;
margin: none;
text-align: left;
}
.distributor-right {
float: left;
width: 33%;
margin-left: none;
text-align: left;
}
.round-border {
border: 1px solid #eee;
border: 1px solid rgba(0, 0, 0, 0.05);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
padding: 10px;
margin-bottom: 5px;
clear: both;
}
.round-border:after {
content: "";
display: block;
clear: both;
}
#wrap {
margin: 0 auto;
}

I've tried a few different things but most don't solve the issue. They're more for horizontal navigation menus which doesn't apply here. I tried adjusting the margin-left for the .distributor-right class but once it became margin-left: 10px it drops to the next line, while at margin-left: 9px it still isn't well distributed.

The end result should have this spacing, where those red areas are exactly the same automatically from the text:

Answer 1

First, I'd restructure the HTML. Having a div for every single line of text is overkill. All you need are 4 divs then paragraphs for the text.

Containing div
Three column divs
paragraphs for text

<div id="wrap">
    <?php include 'menu.php'; ?>

    <div class="inner body">
    <section class="round-border">

        <div class="distributors-row">
            <div class="distributor-left">
              <p>Praesent Luctus Company</p>
              <p>Praesent Luctus Company</p>
              <p>Praesent Luctus Company</p>
              <p>Praesent Luctus Company</p>
          </div>
            <div class="distributor-middle">
              <p>Praesent Luctus Company</p>
              <p>Praesent Luctus Company</p>
              <p>Praesent Luctus Company</p>
              <p>Praesent Luctus Company</p></div>
            <div class="distributor-right">
              <p>Praesent Luctus Company</p>
              <p>Praesent Luctus Company</p>
              <p>Praesent Luctus Company</p>
              <p>Praesent Luctus Company</p></div>
        </div>
        </section>

    </div>

Ultimately this will make editing much easier.

Then some simple adjustments to the CSS make it play nicely:

body {
    background-color: #eee;
    background-image: url(../images/patterns/light_toast.png);
    color: rgba(102, 102, 102, 1);
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    margin:0px;
    padding:0px;
}

.inner {
    margin: 0 auto;
    max-width: 940px;
    padding: 0 40px;
}


.distributors-row > div { 
    float: left;
    width: 33.3%;
    margin-left: none;
    padding: 5px 0;
    text-align: left; } */ one CSS definition for all 3 columns */
p { margin:0; text-indent: 10px; } */ added to move text off left edge slightly */

.round-border {
    border: 1px solid #eee;
    border: 1px solid rgba(0, 0, 0, 0.05);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    padding: 10px;
    margin-bottom: 5px;
    clear: both;
}

.round-border:after {
    content: "";
    display: block;
    clear: both;
}

#wrap {
    margin: 0 auto;
}

SAMPLE LINK

Realize in columns of left aligned text, without background colors, the line length of text is going to alter your perception of the column widths. Unless you want to justify every line of text (which I wouldn't recommend), the ragged right edge is expected and shouldn't be a great concern.

Answer 2

I'm going to assume that because this list is in alphabetical order from left to right, that your html structure was so that when the design stacks on smaller viewports that it would be in alphbetical order as that is the order in html. However, to achieve the design you want, I would use media queries to hide and show two different lists. Then I would use an unordered list not in alphabetical order in the html but visually.

Demo: http://jsbin.com/kiyora/

.distributors {
    display: none
}
.distributors-list {
    display: block
}
@media (min-width:870px) { 
    .distributors-list {
        display: none
    }
    .distributors {
        width: 100%;
        padding: 10px;
        display: block;
        overflow:hidden;
        margin:0 auto;
        max-width:980px;
        box-sizing: border-box;
        border-radius: 10px;
        border: 1px solid red;
    }
    .distributors .distributor {
        width: 36%;
        padding: 0;
        margin: 0;
        list-style: none;
        float: left;
        box-sizing: border-box;
    }
    .distributors .distributor:nth-child(even) {
        width: 33%
    }
    .distributors .distributor:last-child {
        width: auto;
        float: right;
    }
}

HTML:

<section class="distributors-list">My alpha list for small viewport widths</section>

<section class="distributors">
   <ul class="distributor">
      <li>Egestas Nunc Sed Company</li>
      <li>Hendrerit A Arcu Institute</li>
      <li>Molestie Sed Id Incorporated</li>
      <li>Ut Quam Vel Company</li>
      <li>Donec Egestas Duis LLC</li>
      <li>Tincidunt Nibh Phasellus Company</li>
   </ul>
   <ul class="distributor">
      <li>Egestas Nunc Sed Company</li>
      <li>Hendrerit A Arcu Institute</li>
      <li>Molestie Sed Id Incorporated</li>
      <li>Ut Quam Vel Company</li>
      <li>Donec Egestas Duis LLC</li>
      <li>Tincidunt Nibh Phasellus Company</li>
   </ul>
   <ul class="distributor">
      <li>Egestas Nunc Sed Company</li>
      <li>Hendrerit A Arcu Institute</li>
      <li>Molestie Sed Id Incorporated</li>
      <li>Ut Quam Vel Company</li>
      <li>Donec Egestas Duis LLC</li>
      <li>Tincidunt Nibh Phasellus Company</li>
   </ul>
</section>

Answer 3

You dont have to rewrite your code

.distributor-middle {
    text-align: center;
}

.distributor-right {
    text-align: right;
}

This will give you a centered text in the middle. You can also wrap the individual items in another div and give the middle a margin: 0 auto and text-align: justify or something and the last one float: right;.

if you want to keep text aligned left and you just want the right edge to be touching then just wrap each thing in another div between the content and .distributor-middle and set it to display: inline-block; so the div becomes the dimension of the content and then set the middle one to margin: 0 auto; and the .distributor-right to text-align: right;

Answer 4

I agree with Scott that "the ragged right edge is expected and shouldn't be a great concern." There is nothing you can do about it when you're working with a list of words whose lengths can be entirely variable, and when you're trying to do a responsive design (which I think your code indicates).

Instead of a method for doing this, I have taken the liberty of improving upon Scott's suggested optimisations, with some of my own. I also have a few simple suggestions for the design of this list. I will present in bullet point format for ease of consumption.

• The alphabetical list should be ordered horizontally instead of vertically because the visual tie and proximity between the list elements flows horizontally much more than vertically imo. (You may have been planning this already, but I don't know from the generated example content).

• Three columns of five as Scott suggests makes much more sense to me than five rows of three, due to how it looks on the page. More importantly though, if things do render incorrectly on some ancient browser, the damage will probably be much worse with the 5 rows of 3 than it will with 3 columns of 5.

• Floats should be avoided at all costs! I spent a long time using floats and searching for an alternative due to the awful bugs in some IEs and the annoying workarounds required. Alternatives do exist and they work much better! I personally opt for applying table properties to elements via CSS.

• To stress my point, CSS table properties even degrade very well, and are supported back to IE5. If content is squashed up or something odd is happening, the browser will still display CSS-marked table content no matter what. It will overflow and do whatever is necessary, placing highest priority on displaying the content in a tabular element - especially text content (sacrifice images to display text sometimes).

• A little bit more white space between the list items appears to take a bit of focus away from the ragged right edge, at least it does in my head. I used a line-height of 1.5

• Placing the rounded border on the <section> element is a bad idea, because rounded borders are more widely supported than HTML5 (I think), so I moved it to the direct child of the <section> instead, with the same result.

Here are my optimisations

The HTML:

<div id="wrap">
  <?php include 'menu.php'; ?>
  <div class="inner">
    <section>
      <div class="container round-border">
        <ol class="column">
          <li>Egestas Nunc Sed Company</li>
          <li>Ut Quam Vel Company</li>
          <li>Praesent Luctus Company</li>
          <li>Malesuada Ut Corporation</li>
          <li>Rutrum Fusce Inc.</li>
          <li>Eget Laoreet LLC</li>
        </ol>
        <ol class="column">
          <li>Hendrerit A Arcu Institute</li>
          <li>Donec Egestas Duis LLC</li>
          <li>Curae; Donec Consulting</li>
          <li>Sit Amet Consectetuer Incorporated</li>
          <li>Iaculis Odio Nam Limited</li>
          <li>Elit Fermentum Risus Institute</li>
        </ol>
        <ol class="column">
          <li>Molestie Sed Id Incorporated</li>
          <li>Tincidunt Nibh Phasellus Company</li>
          <li>Magna A LLC</li>
          <li>Cum Sociis Foundation</li>
          <li>Interdum Libero Dui Institute</li>
          <li>Aliquet Proin Velit Company</li>
        </ol>
      </div>
    </section>
  </div>
</div>

The CSS:

*, ol, li {
  margin: 0;
  padding: 0;
  list-style-type: none;
  vertical-align: middle;
  text-align: left;
}

body {
  background-color: #eee;
  background-image: url(../images/patterns/light_toast.png);
  color: rgba(102, 102, 102, 1);
  font-family: 'Open Sans', sans-serif;
  font-size: medium;
}

#wrap, .inner {
  margin: 0 auto;
}

.inner {
  display: block;
  width: auto;
  max-width: 940px;
}

.container {
  display: table;
}

.round-border {
  border: 0.100em solid #eee;
  border: 0.100em solid rgba(0, 0, 0, 0.05);
  -webkit-border-radius: 0.400em;
  -moz-border-radius: 0.400em;
  border-radius: 0.400em;
  padding: 0.600em;
  margin-bottom: 0.500em;
}

.column {
  display: table-cell;
  width: 33.333333333333333%;
  width: calc(100/3);
}

.column li {
  display: inline-block;
  width: 100%;
  line-height: 1.5;
}