MarksCode MarksCode - 1 year ago 62
CSS Question

Get divs side by side within parent?

I'm trying to add 2 tabs in a wrapper div and am having trouble getting them to lie next to each other, taking up half the width each. I added the following css to each one:

width: 50%;
height: 100%;
display: inline-block;

For some reason they keep appearing beneath one another instead of next to one another.

I made a JsFiddle to show whats happening:

Can anybody please help me get them so they're lying to next eachother like normal tabs?

Answer Source

Why not float? Make sure your box-sizing is border-box. Next:

<div class="wrapper">
  <div>Hello world</div>
  <div>Guten Tag</div>


.wrapper {
.wrapper > div {
  width: 50%;

display:inline-block adds 1px of whitespace to the right of the element. Also, if you're not displaying as border-box, you could run into issues with your box model in other words your 50% isn't what you think it is.

updated fiddle: make sure to clear the floats.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download