2

I have this code: https://jsfiddle.net/105nfcze/55/

#footer-a {
  width: 50%;
  background: black;
  display: inline-block;
}

#footer-b {
  width: 50%;
  background: blue;
  display: inline-block;
  text-align: center;
}
<div class="content-wrapc">
  <p id="footer-a"> Footer </p>
  <p id="footer-b">
    <a href="#">test 1</a>
    <a href="#">test 12</a>
    <a href="#">test 13</a> </p>

</div>

I have also followed this link: Display two divs next to each other where each has a width of 50%

I have also tried floating, as what is said in this link : How to place two divs next to each other?

But still I do not get the two p's places next to each other. I tried several things and looked up several QA's. Hope someone can advise and also explain why this happens..

Pete
  • 57,112
  • 28
  • 117
  • 166
Nuri Ensing
  • 1,899
  • 1
  • 19
  • 42

1 Answers1

2

Use flex on the parent:

.content-wrapc {
  /* add this */
  display: flex;
}

#footer-a {
  width: 50%;
  background: black;
}

#footer-b {
  width: 50%;
  background: blue;
  text-align: center;
}
<div class="content-wrapc">
  <p id="footer-a"> Footer </p>
  <p id="footer-b">
    <a href="#">test 1</a>
    <a href="#">test 12</a>
    <a href="#">test 13</a>
  </p>
</div>

The problem with your original code is that you use inline block - this adds a space if there is any space between your elements (think of words in a sentence, if there is space between them, a space is added) which is why the two 50% elements can't sit next to each other

Pete
  • 57,112
  • 28
  • 117
  • 166
  • This works like a charm, mind if you can also give a little explanation?? – Nuri Ensing Sep 12 '18 at 14:23
  • 1
    Flexbox aligns all child items in a row by default - therefore it will align the two paragraphs in a row and as they have a width of 50% each, they will take up the full width of the row. [Here is a good codepen explaining flexbox properties](https://codepen.io/enxaneta/pen/adLPwv) – Pete Sep 12 '18 at 14:24
  • 1
    @YdB display: table/table-cell , flex, grid or float will not create that white space bothering you with inline-block . Flex is the **nowdays** method to use most of the time ;) – G-Cyrillus Sep 12 '18 at 14:25