1

I have 2 divs which contain UL elements that I want to arrange side by side. The basic idea is to have 2 menu elements - one aligned to left and one to right. Now when I set width:50% and display:inline-block the elements go on separate lines.

The divs in question are .bottomMenuRight and .bottomMenuLeft.

I can't figure out what I'm doing wrong.

html:

<div class="outer">
  <div class="middle">
    <div class="navMenu">
      <ul>
        <li>Add</li>
        <li>Browse</li>
      </ul>
    </div>
    <hr>
    <div class="test">
      <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur repellat ab minus dolore officia, ex praesentium necessitatibus dolorem, aperiam, porro ullam eius quas itaque, nostrum doloremque provident quam neque obcaecati.</div>
      <div>Architecto blanditiis sed obcaecati, quas possimus expedita molestiae quaerat facilis saepe doloribus numquam velit. Praesentium modi sed consequuntur voluptates dicta, exercitationem laboriosam, repellat quam itaque repellendus harum, blanditiis
        iure error.</div>
      <div>Ut perferendis nam totam neque facilis officia maxime animi velit, recusandae voluptatibus, aut rem in et ipsam quia id unde itaque quae, incidunt provident iste, sit? Corporis dicta, in ex.</div>
      <div>Doloremque inventore quos, qui maiores libero dolor veritatis, earum molestias unde autem optio, culpa ex quia error iure. Eos quos, mollitia nam quis incidunt sit voluptate amet, eveniet iusto eligendi.</div>
      <div>Odit cum laborum dolor delectus consectetur architecto, animi ipsum aperiam libero eveniet neque inventore quasi, facere quo sint possimus, tempore doloremque eius perferendis beatae? Laboriosam tempora id architecto quisquam enim?</div>
    </div>
    <hr>
    <div class="bottomMenu">
      <div class="bottomMenuLeft">
        <ul>
          <li>F</li>
          <li>T</li>
        </ul>
      </div>
      <div class="bottomMenuRight">
        <ul>
          <li>O</li>
          <li>D</li>
          <li>U</li>
        </ul>
      </div>
    </div>
    <div class="inner">
    </div>
  </div>
</div>

css:

.outer {
  display: table;
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
}

.middle {
  display: table-cell;
  vertical-align: middle;
}

.inner {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

body {
  background: url("http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/paper_2.png");
}

.test {
  width: 40%;
  margin: 0 auto;
  font-family: 'Cormorant Garamond', serif;
  font-family: 'Libre Baskerville', serif;
  text-align: center;
}

.bottomMenu {
  width: 100%;
}

.bottomMenuRight,
.bottomMenuLeft {
  display: inline-block;
  width: 50%;
}

.bottomMenuRight ul,
.bottomMenuLeft ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.bottomMenuRight ul {
  text-align: right;
}

.bottomMenuLeft ul {
  text-align: left;
}

.bottomMenuRight li,
.bottomMenuLeft li {
  display: inline-block;
  background-color: grey;
  padding: 0.5em;
  font-size: 1.5em;
  border-radius: 50%;
}

Here is a codepen in case you want to fiddle.

Miha Šušteršič
  • 9,742
  • 25
  • 92
  • 163
  • inline-block adds extra spacing, what you can do is give them float:left instead of inline-block – Jeffrey Troost Jul 27 '16 at 15:00
  • Add this to your code .navMenu ul, .navMenu ul li { margin: 0px; padding: 0px; list-style-tyle: none; } .navMenu ul li { background: #ccc; margin: 0 -5px 0 0; width: 50%; display: inline-block; text-align: center; } – RandomNoobName Jul 27 '16 at 15:08

1 Answers1

1

The thing is in inline-block. Inline block adds extra spacing which usually is taken off by setting parent font-size:0, but...

More simple way would be float both elements and apply clearfix to the container. The most fastest solution for clearfix would be overflow: hidden

Community
  • 1
  • 1
karlisup
  • 672
  • 12
  • 22
  • ah did not know that. using float works. Will accept anwser after the timeout, thanks – Miha Šušteršič Jul 27 '16 at 15:01
  • Inline block tries to do the best as he can and render it as a block and as an inline element at the same time. This gives its pros & cons. Good luck ;). P.S. cookie for you for adding codepen fiddle! – karlisup Jul 27 '16 at 15:05