0

I want align columns in row relative to .container block using calc() but cannot measure correct width.

I used formula width: calc(100% / number of boxes – total margin size) but it doesn`t work as I expect. On the right too much space available.

I think problem is on my css but can not find where exactly. Hoping for your help :)

P.S. set margin:0 for 1st .col-lg-4, but it didn`t help.

How it looks now:

JSFiddle

body, h1 {
 margin: 0;
 padding: 0;
 font-family: "Lucida Console", Monaco, monospace;
 font-size: 1em;
}

.container-fluid {
 margin: 15px 25px 10px 25px;
 border: 1px solid black;
}

h1 {
 font-size: 1.75rem;
 padding-bottom: 15px;
 text-align: center;
}

.col-lg-4, .col-md-6, .col-md-12, .col-xs-12 {
 box-sizing: border-box;
 float: left;
 margin-left: 5px;
 background-color: #ddd;
 padding: 35px 8px 0 8px;
 border: 1px solid black;
 position: relative;
}

.col-lg-4:first-child {
 margin: 0;
}

.title {
 position: absolute;
 top: 0;
 right: 0;
 border: 1px solid black;
 width: 100px;
 text-align: center;
 padding: 3px 10px 3px 10px;
 font-weight: 500;
 font-size: 1.25rem;
}

@media (min-width:992px) {
 .col-lg-4 {
  width: calc(100% / 3 - 10px);
 }
}

@media (min-width: 768px) and (max-width: 991px) {
 .col-md-6 {
  width: calc(100% / 2 - 5px);
 }
 .col-md-12 {
  margin-left: 0;
  margin-top: 1%;
  width: 100%;
 }
}

@media (max-width: 767px) {
 .col-xs-12 {
 width: 100%;
 margin-bottom: 1%;
 }
}

.chicken {
 background-color: pink;
}

.beef {
 background-color: #c14543;
 color: #fff;
}

.sushi {
 background-color: #e5d198;
}
  <div class="container-fluid">
    <h1>Our Menu</h1>
      <div class="row">
        <div class="col-lg-4 col-md-6 col-xs-12">
        <span class="title chicken">Chicken</span>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur voluptatem eos, ullam totam architecto vitae minima quis corporis vel. Eius aut tempore, recusandae ipsa temporibus fugiat placeat. Delectus, illum, totam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima nam adipisci, vitae dolorem rem nesciunt, rerum commodi deleniti, deserunt, aspernatur veritatis esse maiores harum quis quasi. Laboriosam eligendi quam distinctio!</div>
        <div class="col-lg-4 col-md-6 col-xs-12">
        <span class="title beef">Beef</span>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus repudiandae nihil voluptate architecto quasi reprehenderit aut quibusdam quam, omnis blanditiis repellendus hic numquam quia. Blanditiis illum porro magnam, obcaecati aperiam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, fugit. Quae assumenda, quisquam natus delectus molestias. Maxime quo quia, quae ratione nihil eum. Quo temporibus vel maiores, deserunt!</div>
        <div class="col-lg-4 col-md-12 col-xs-12">
        <span class="title sushi">Sushi</span>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis quas culpa accusamus dicta, et numquam aspernatur optio neque voluptate ullam. At quos, dignissimos harum quod ipsa quam tempore cum! Ab. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio est cumque, magni rem harum repudiandae error, totam quis ipsum eum, asperiores delectus recusandae, velit. Tempora eius minus vitae distinctio. Accusantium.</div>
      </div>
  </div>
kukkuz
  • 41,512
  • 6
  • 59
  • 95
Orest Bats
  • 115
  • 1
  • 10
  • 2
    I would suggest use of flexbox here, it is perfect for this kind of layout. And has same support as calc as far as I remember. – Akxe Sep 28 '16 at 16:21
  • @Akxe could you please make draft to see how it will work with flexbox? I have never used it before... – Orest Bats Sep 28 '16 at 16:28
  • Why do `100% / 3` when you can `33.33%`? ...This way you control the accuracy of the decimals instead of not knowing how each browser will truncate/round them – Asons Sep 28 '16 at 18:21
  • Find one more solution to add margin with avoiding `calc` : http://stackoverflow.com/a/19010988/6625736 – Orest Bats Oct 20 '16 at 09:52

4 Answers4

0

You had to adjust the last child style for your .lg and .md sizes, that was causing the gap. Here you go: https://jsfiddle.net/denea/j7d0b5gL/34/

@media (min-width:992px) {
    .col-lg-4 {
        width: calc(100% / 3 - 5px);
    }

  .col-lg-4:last-child {
    width: calc(100% /3);
  }
}

@media (min-width: 768px) and (max-width: 991px) {
    .col-md-6 {
        width: calc(100% / 2 - 5px);
    }

  .col-md-6:nth-child(2) {
    width: calc(100% /2);
  }

    .col-md-12 {
        margin-left: 0;
        margin-top: 1%;
        width: 100%;
    }
}
Dennis Novac
  • 1,003
  • 10
  • 23
0

I would be very cautious about using this method. IE isn't going to like you.

You have two options:

1) If browser compatibility isn't an issue, use Flexbox. See also the compatibility table.

.menu {
  border: 1px solid black;
}
.header {
  margin: 0;
  background: black;
  color: white;
  text-align: center;
}
.row {
  display: flex;
}
.column {
  padding: 10px;
  border-left: 1px solid black;
  flex: 1 1 0;
}
.column:first-of-type {
  border: 0;
}
<div class="menu">
  <h1 class="header">Menu</h1>
  <div class="row">
    <div class="column">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae est eget eros facilisis luctus vitae non augue. Nulla quis lacinia quam. Curabitur finibus leo arcu, vel pretium elit auctor sed. Suspendisse suscipit ligula elit, in tincidunt leo
      eleifend quis. Sed eu lacinia augue.
    </div>
    <div class="column">
      Ut tempus est nec rutrum vehicula. Suspendisse ultrices ut orci eu aliquet. Vestibulum eget malesuada metus, at sollicitudin nisl. Integer hendrerit non eros nec interdum.
    </div>
    <div class="column">
      Mauris luctus mattis lacus, eu semper risus. Mauris semper lectus eu ullamcorper porta. Vestibulum at fringilla orci, in vestibulum sapien. Aliquam in lectus vitae nisi lobortis pretium at a erat. In et tortor odio.
    </div>
  </div>
</div>

2) If browser compatibilty is an issue, use a tabular layout.

.menu {
  border: 1px solid black;
}
.header {
  margin: 0;
  background: black;
  color: white;
  text-align: center;
}
.row {
  display: table;
  table-layout: fixed;
  width: 100%;
}
.column {
  display: table-cell;
  padding: 10px;
  border-left: 1px solid black;
}
.column:first-of-type {
  border: 0;
}
<div class="menu">
  <h1 class="header">Menu</h1>
  <div class="row">
    <div class="column">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae est eget eros facilisis luctus vitae non augue. Nulla quis lacinia quam. Curabitur finibus leo arcu, vel pretium elit auctor sed. Suspendisse suscipit ligula elit, in tincidunt leo
      eleifend quis. Sed eu lacinia augue.
    </div>
    <div class="column">
      Ut tempus est nec rutrum vehicula. Suspendisse ultrices ut orci eu aliquet. Vestibulum eget malesuada metus, at sollicitudin nisl. Integer hendrerit non eros nec interdum.
    </div>
    <div class="column">
      Mauris luctus mattis lacus, eu semper risus. Mauris semper lectus eu ullamcorper porta. Vestibulum at fringilla orci, in vestibulum sapien. Aliquam in lectus vitae nisi lobortis pretium at a erat. In et tortor odio.
    </div>
  </div>
</div>
Community
  • 1
  • 1
Jamie Barker
  • 8,145
  • 3
  • 29
  • 64
  • Don't post partially finished answers, take the time to write all up. It is a bigger chance you get down voted on incomplete answer than not get a vote or accept on a delayed one. – Asons Sep 28 '16 at 16:41
  • The original answer was still an answer @LGSon, I was just stating I was going to expand upon it. – Jamie Barker Sep 28 '16 at 16:43
0

Well the main problem with the calculation is that you have to subtract the margin widths before the division.

so

.col-lg-4 {
    width: calc((100% - 10px) / 3 );
}

and

.col-md-6 {
    width: calc((100% - 5px) / 2);
}
Gabriele Petrioli
  • 191,379
  • 34
  • 261
  • 317
0

There's three things at play here:

First, your math is causing this:

width: calc(100% / 3 - 10px);

After 3 columns, you've lost 30px of width, which is what's hanging out on the right side.

Since you only have 5px of margin-left, it should read:

However, the problem then is if you make it:

width: calc(100% / 3 - 5px);

It appears to be too wide - but this is due to the infamous white-space issue, which causes around 4px of right-margin to be added IF you have ANY white space between tags. From your code:

<div class="col-lg-4 col-md-6 col-xs-12">
    <span class="title chicken">Chicken</span>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur voluptatem eos, ullam totam architecto vitae minima quis corporis vel. Eius aut tempore, recusandae ipsa temporibus fugiat placeat. Delectus, illum, totam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima nam adipisci, vitae dolorem rem nesciunt, rerum commodi deleniti, deserunt, aspernatur veritatis esse maiores harum quis quasi. Laboriosam eligendi quam distinctio!</div><!-- WHITE SPACE -->
    <div class="col-lg-4 col-md-6 col-xs-12">

So, then you need to clean up the white space, like so:

</div><div class="col-lg-4 col-md-6 col-xs-12">

That leaves one remaining point: your margin-left, which needs to be removed from the first element:

.col-lg-4:first-child {
    margin-left: 0;
}

Which gets us very close, but you have one more issue to overcome:

You have a total of 10px of margin-left (two elements, 5px each), which doesn't divide by 3 evenly. So, I'd suggest making it 12px (margin-left: 6px;), so you can tweak your formula, and get an even layout;

width: calc(100% / 3 - 4px);
margin-left: 6px;

Here's a working fiddle:

https://jsfiddle.net/cale_b/j7d0b5gL/25/

As others have commented, flexbox is probably your friend - although it does look like you're using Bootstrap, which means you'd have to roll your own flexbox code.

Here's a quick-and-dirty flexbox demo using your existing markup, and minor style changes: https://jsfiddle.net/cale_b/qbkw5qpu/1/

random_user_name
  • 25,694
  • 7
  • 76
  • 115