MarksCode MarksCode - 3 months ago 6
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: http://jsfiddle.net/5zLoyc7q/1/

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

Answer

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

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

CSS:

.wrapper {
  overflow:auto;
}
.wrapper > div {
  float:left;
  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: http://jsfiddle.net/5zLoyc7q/2/ make sure to clear the floats.

Comments