0

I'm doing a three columns layout which shall behave responsive.

When the screen-width becomes smaller then 1025px then the three columns, which are ordered beside each other on large screens, become stacked upon each other.

The unordered list which is content of the left-column shall become ordered horizontally (instead of vertically).

The parent div has now a width of 800px. No margins, borders, paddings. The ul as an child-element inherits these width.

I give the (four) li-elements a width of 25% which results in expected 200px. In can see that in the developer-tools.

But the 4 list-items don't stay in one row. The last item breaks into another row.

enter image description here

Currently I can see no reason why. 4 * 200px = 800px => It should match into the parent-element.

I could do : 

ul li {
    ...
    width: calc(25% - 4px);
    ...
}

... then it would work. But don't want to take that approach ...

So therefore:

Can someone tell me why I get these linebreak although it should match?

Here's the code : 

$rad: 10px;

.content h2 {
  margin-top: 20px;
}

.content {
 background-color: #343434;
 color: white;
 width: 60%;
}

.wrap {
  max-width: 800px;
  margin: 50px auto;
  display: flex;
}

.left-column {
  background-color: #dedede;
  width: 10%;
}

.right-column {
  background-color: lighten(grey, 10%);
  width: 30%;
}

.column {
  padding: 0 25px;
  border-radius: $rad;
}

ul {
  list-style: none;
  padding-left: 0;
}

@media (max-width: 1024px) {
  .wrap {
    flex-direction: column;
  }
  
  .content {
    width: 100%;
    order: 3;
  }
  
  .left-column {
    width: 100%;
    order: 1;
  }
  
  .right-column {
    width: 100%;
    order: 2;
  }
  
  ul li {
    display: inline-block;
    background-color: #efefef;
    width: 25%;
    text-align: center;
    border-radius: $rad;
  }
}
<div class="wrap">
  <div class="left-column column">
    <ul>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
      <li>Four</li>
    </ul>
  </div>

  <div class="content column">
    <h2>Nam quam nunc blandit vel</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
    <p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</p>
    <p>In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.</p>
  </div>

  <div class="right-column column">
    <p>RIGHT COLUMN - Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.</p>
    <p>Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.</p>
  </div>
</div>
Sebastian Simon
  • 18,263
  • 7
  • 55
  • 75
cluster1
  • 4,968
  • 6
  • 32
  • 49

1 Answers1

2

You can fix this problem by setting float to the <li> elements. This will tell them to "float next to each other".

ul li {
  float: left;
  background-color: #efefef;
  width: 25%;
  text-align: center;
  border-radius: $rad;
}
thepio
  • 6,193
  • 5
  • 35
  • 54