Why isn't four children inside parent fitting?

Question

I'm currently making a footerfor my website and met a very unanticipated result. So, I have this footer with four different menus inside them, acting as the children of the footer. The menus are each set to width: 25%; and display: inline-block;, it should fit perfectly, shouldn't it as 100% divided by 4 is 25%? However, the last menu breaks out of the footer.

Here's an example of what I'm getting.

As you can see in the example, the journal menu is breaking out of the grid, but the menus are each set to width: 25%; and display: inline-block;.

What could possibly be the problem here and how can I solve it without revising my width of each menu?

I'm more than happy to provide anything to clarify my question if this was not enough.

Here's the relevant code as well.

HTML

<footer class="footer">
    <div class="container">
        <div class="menu-wrapper">
            <div class="menu">
                <ul>
                    <h6 class="peasant">Explore</h6>
                    <li><a href="#">Our Philosophy</a></li>
                </ul>
            </div>
            <div class="menu">
                <ul>
                    <h6 class="peasant">Services</h6>
                    <li><a href="#">Offers</a></li>
                    <li><a href="#">Work</a></li>
                </ul>
            </div>
            <div class="menu">
                <ul>
                    <h6 class="peasant">Contact</h6>
                    <li><a href="#">Contact Us</a></li>
                </ul>
            </div>
            <div class="menu">
                <ul>
                    <h6 class="peasant">Journal</h6>
                    <li><a href="#">Blog</a></li>
                </ul>
            </div>
        </div>
    </div>
</footer>

CSS

footer.footer {
    height: 500px;
    width: 100%;
    background-color: #f8f8f8;
}
.menu {
    width: 25%;
    display: inline-block;
    vertical-align: top;
    white-space: nowrap;
}
.footer .menu ul {
    padding: 0;
}

Any clarification of what's happening here would be appreciated as well!

http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements — Mohammad Usman, Dec 22 '16 at 10:23
In Russian: [Как прижать блоки друг к другу?](//ru.stackoverflow.com/q/468547/178988) — Qwertiy, Dec 22 '16 at 10:32

score 2 · Answer 1 · answered Dec 22 '16 at 10:26

2

inline-block element takes some extra space(like 4px). to get rid of this bug you have 2 options. either add margin-right: -0.25em for the inline-block element, in your case .menu

or

you can reset font-size and line-height at parent. in this case,

.menu-wrapper {
    font-size:0;
    line-height: 0;
}

and use the actual font-size and line-height in the child

.menu {
    font-size: "your font size";
    line-height: "your line height";
}

this will work

answered Dec 22 '16 at 10:26

Lucian

1,715
3
17
26

That's a hack. And it depends on font. – Qwertiy Dec 22 '16 at 10:35
@Qwertiy yes, ofcourse it's a hack. for inline-block we have this hack. we also have other hacks like removing white-spaces from markup itself but it's little hard-code so this hack looks better. and about the font, if the font have problem, you can simply use the margin hack as i mentioned above. – Lucian Dec 22 '16 at 10:39
Removing spaces is not a hack. – Qwertiy Dec 22 '16 at 10:46
well, it's hard-code when you have to change the markup itself. i would prefer using float or flex property to achieve it without hack. – Lucian Dec 22 '16 at 10:48
1

Yep, flex seems to be better. – Qwertiy Dec 22 '16 at 10:49

Qwertiy · Answer 2 · 2016-12-22T10:29:34.150

Because you have a space between them.
The only non-hack way to fix it keeping inline-blocks is to remove spaces in markup.
The other ways are to use flex or float.
Everything else (like margin or font-size) is hacks.

body {
  font-size: 2em;
}

section {
  margin: .5em 0;
}

div {
  display: inline-block;
  width: 25%;
  background: silver;
}

div:nth-child(even) {
  background: antiquewhite;
}

<section>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</section>

<section>
  <div>
    1
  </div><div>
    2
  </div><div>
    3
  </div><div>
    4
  </div>
</section>

<section>
   <div>1</div><!--
--><div>2</div><!--
--><div>3</div><!--
--><div>4</div>
</section>

Is this some kind of white-space issue? – James Snowy Dec 22 '16 at 10:28 — James Snowy, Dec 22 '16 at 10:28

score 1 · Answer 3 · answered Dec 22 '16 at 10:28

No need to write that much CSS just use three line and here is your solution.

.menu-wrapper {
    display: inline-flex;
    justify-content: space-between;
    width: 100%;
}

<footer class="footer">
  <div class="container">
      <div class="menu-wrapper">
          <div class="menu">
              <ul>
                  <h6 class="peasant">Explore</h6>
                  <li><a href="#">Our Philosophy</a></li>
              </ul>
          </div>
          <div class="menu">
              <ul>
                  <h6 class="peasant">Services</h6>
                  <li><a href="#">Offers</a></li>
                  <li><a href="#">Work</a></li>
              </ul>
          </div>
          <div class="menu">
              <ul>
                  <h6 class="peasant">Contact</h6>
                  <li><a href="#">Contact Us</a></li>
              </ul>
          </div>
          <div class="menu">
              <ul>
                  <h6 class="peasant">Journal</h6>
                  <li><a href="#">Blog</a></li>
              </ul>
          </div>
      </div>
  </div>
</footer>

score 1 · Accepted Answer · answered Dec 22 '16 at 13:07

1

Simply apply display: inline-flex; and justify-content: space-between; to the .menu-wrapper.

That should do it.

answered Dec 22 '16 at 13:07

Californium

491
4
17

David C · Answer 5 · 2016-12-22T11:08:01.957

0

Content breaks out of the grid because there are tab characters between the menus:

These are considered as space by HTML, and add to the overall width.

Some ways to solve this are:

Minimize the HTML: https://jsfiddle.net/9cmLaqhp/1/
Add float:left; into .menu

edited Dec 22 '16 at 11:08

answered Dec 22 '16 at 10:47

David C

118
1
9

score 0 · Answer 6 · answered Dec 22 '16 at 10:52

The simple solution could be this .take a look, If you wanna see the demo here is the codepen

.footer {
    height: auto;
    width: 100%;
    background-color: #f8f8f8;
    position:relative;
    display:block;
    border:1px solid blue;
}
.menu-wrapper {
    display: inline-flex;
    justify-content: space-between;
    width: 100%;
}
.menu {
    width: 25%;
    display: block;
    border: 1px solid red;
    float: left;
    margin: 0 15px;
    min-height: 1px;
    position: relative;
    height: 150px;
}
.footer .menu ul {
    padding: 0;
    margin: 0;
}
.footer .menu ul  li {
    list-style: none;
}

Why isn't four children inside parent fitting?

6 Answers6