Two boxes, side by side, 50% each, but both are slighty longer and not on same line?

Question

I'm trying to get two side-by-side boxes to take up the entire width of the screen. However, when setting the width at 50%, each of the boxes wants to extend about 10px wider than 50%. What am I doing wrong?

#sides {
    padding-top: 40px;
    padding-bottom: 40px;
    background-color: white;
}

#leftside {
    width: 50%;
    background-color: grey;
    padding: 20px;
    margin: 0px;
    position: relative;
}

#rightside {
    width: 50%;
    display: inline-table;
    background-color: #018DCA;
    float: left;
    padding: 20px;
    margin-left: 50%;
    position: relative;
}

. . .

<div id="sides">
 <div id="leftside">
  <h1>text</h1>
  <p>
    <h2>text</h2>
  <br>
 </div>
 <div id="rightside">
  <h1>text</h1>
  <p>
    <h2>text</h2>
  <br>
 </div>
</div>

Answer 1

Both sides need to be floated and make sure that you're using box-sizing: border-box; to ensure that the width is 50% regardless of padding and border size.

Answer 2

You don't need to use float (in fact it's not really the right tool for overall document layout; it's more for breaking up text with images without destroying the document flow).

You can achieve this with less CSS by using display: inline-block; and commenting out the white-space between your left and right <div>s. JSFiddle

html, body {
    margin: 0;
}
#sides {
    padding-top: 40px;
    padding-bottom: 40px;
    background-color: white;
}
#leftside {
    width: 50%;
    background-color: grey;
    padding: 20px 0;
    display: inline-block;
}
#rightside {
    width: 50%;
    display: inline-block;
    background-color: #018DCA;
    padding: 20px 0;
}

<div id="sides">
    <div id="leftside">
        <h1>text</h1>
        <p>
            <h2>text</h2>
            <br>
    </div><!--
 --><div id="rightside">
        <h1>text</h1>
        <p>
            <h2>text</h2>
            <br>
    </div>
</div>

Answer 3

I realise that your question has already been solved, but another option to TylerH's solution would be to use flex. Like so:

#sides {
  display:flex;
  padding: 40px 0px;
  background-color: white;
}

.side {
  flex:1;    
  padding: 20px;
  margin: 0;
}
#left{background-color: grey;}
#right{background-color: #018DCA;}

<div id="sides">
  <div class="side" id="left">
    <h1>text</h1>
    <h2>text</h2>
  </div>
  <div class="side" id="right">
    <h1>text</h1>
    <h2>text</h2>
  </div>
</div>

As TylerH rightly pointed out, this does require more modern browsers. Take a look at this website for more information on compatibility.

Answer 4

Use display:inline-blockAdd font-size:0 to the parent div,this must do. Also try adding vertical-align:top to right div

Answer 5

#sides {
    padding-top: 40px;
    padding-bottom: 40px;
    background-color: white;
}

#leftside {
    width: 47%;
    background-color: grey;
    float: left;
  padding:5px;
}

#rightside {
    width: 47%;
    background-color: #018DCA;
    float: right;
  padding:5px;
}

<div id="sides">
 <div id="leftside">
  <h1>text</h1>
  <p>
    <h2>text</h2>
  <br>
 </div>
 <div id="rightside">
  <h1>text</h1>
  <p>
    <h2>text</h2>
  <br>
 </div>
</div>