Padding change the layout two div side by side

Question

I want to make div side by side , I can achieve this but when I add som margin or padding they can disturb the lay out, I just want that two div display side by side with padding and margin property.

#center{
    	
    	width:100%;
    	border:1px solid gray;	
    	overflow:hidden;
    	display:inline-block;
    	}
    #leftdiv{
    height:200px;
    width:50%;
    background-color:gray;
    float:left;
    margin:2px;
    }	
    
    #rightdiv{
    height:200px;
    width:50%;
    background-color:yellow;
    float:left;
    margin:2px;
    }

<div id="center">
    
    <div id="leftdiv"></div>
    <div id="rightdiv"></div>
    
    </div>

Answer 1

First of all you have to divide this within 100% width with margin as i have done!

#center{
    	
    	width:100%;
    	border:1px solid gray;	
    	overflow:hidden;
    	display:inline-block;
    	}
    #leftdiv{
    height:200px;
    width:48.5%;
    background-color:gray;
    float:left;
    margin:1%;
	margin-right:0px;
    }	
    
    #rightdiv{
    height:200px;
    width:48.5%;
    background-color:yellow;
    float:left;
    margin:1%;
    }

<div id="center">
    
    <div id="leftdiv"></div>
    <div id="rightdiv"></div>
    
    </div>

Answer 2

To use padding on the <div>s you can set the box-sizing property to border-box so the padding is included in the width of the <div>. But the margin is more difficult to include in the width because it is on the outside of the box. So you have to calculate the margin on the width (see example on #leftdiv):

#center{
  width:100%;
  border:1px solid gray;  
  overflow:hidden;
  display:inline-block;
}
#leftdiv{
  height:200px;
  width:calc(50% - 20px); /** 20px = sum of margin left and right */
  background-color:gray;
  float:left;
  padding:10px;
  margin-right:20px;
  box-sizing:border-box;
}   
#rightdiv{
  height:200px;
  width:50%;
  background-color:yellow;
  float:left;
  padding:10px;
  box-sizing:border-box;
}

<div id="center">
  <div id="leftdiv"></div>
  <div id="rightdiv"></div>
</div>

• border-box: The width and height properties include the content, the padding and border, but not the margin.

• content-box: This is the initial and default value as specified by the CSS standard. The width and height properties are measured including only the content, but not the padding, border or margin.

source: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing#Values

You can see the box model on the Chrome Developer Tools:

There you can see the margin surrounding the border. The width and height is calculated until the border and doesn't include the margin.

Answer 3

Let's first examine #center's css. You are set width to 100% and 1px for border(1px on the left and 1px on the right) which mean that actual width will be 100% + 2px, which might be not exactly what you want. To solve this you can use either box-sizing:border-box; or width:calc(100% - 2px). Also you might not need "overflow:hidden" and "display:inline-block"

Box-sizing is really useful property. You can read more here: https://www.w3schools.com/cssref/css3_pr_box-sizing.asp

#center {                                   #center {
    width:100%;                                 width:calc(100% - 2px);
    box-sizing:border-box;       or             border:1px solid gray;
    border:1px solid gray;                  }
}

Then in order to have 2 children side by side you can use either flex layout or float layout as you did, but again you have assume that "width:50%" is actually without the margin so real width will be 50% + 4px (2px left + 2px right) margin. In order to solve this you can use again calc();

#leftdiv {                              #rightdiv {
    height:200px;                           height:200px;
    width:calc(50% - 4px);                  width:calc(50% - 4px);
    background-color:gray;                  background-color:gray;
    float:left;                             float:right;
    margin:2px;                             margin:2px;
}

Also have in mind that because the children elements are floated, the parent element will have a height of 0. In order to make parent element to wrap its children you must either set some height of #center element (in your case 204px, 200px for children and 4px for its margin) or to use the following css which does the trick. The css will add empty block element right after both children(because it has propeerty "clear") and because it is block element, the parent will extend.

#center:after {
    content:"";
    display:block;
    clear:both;
}

Answer 4

margin will apply (space) to the outside of the boxmodel.

padding will apply (space) to the inside of the boxmodel - use in conjuction with box-sizing: border-box; to negate additional padding affecting the inherit height and width of the element.

Where alignment is concerned, in this case, you have a few options to explore:

#center {
  width: 100%;
  border: 1px solid gray;
  overflow: hidden;
}

.inline-div {
  height: 200px;
  width: 48%;
  display: inline-block;
  margin: 2px;
}

.float-left {
  float: left;
}

.float-right {
  float: right;
}

.flex-wrapper {
    display: flex;
    justify-content: space-between;
}

.flex-wrapper .inline-div {
    flex: 1;
}

#leftdiv {
  background-color: gray;
}

#rightdiv {
  background-color: yellow;
}

<h1>Inline</h1>
<div id="center">

  <div id="leftdiv" class="inline-div"></div>
  <div id="rightdiv" class="inline-div"></div>

</div>

<h1>Float</h1>
<div id="center">

  <div id="leftdiv" class="inline-div float-left"></div>
  <div id="rightdiv" class="inline-div float-right"></div>

</div>

<h1>Flex</h1>
<div id="center" class="flex-wrapper">

  <div id="leftdiv" class="inline-div"></div>
  <div id="rightdiv" class="inline-div"></div>

</div>

Answer 5

just add

 #rightdiv,#leftdiv{
 box-sizing:border-box;
}

Answer 6

You are going to have to change their display type from block

and css is:

  #center{
   width:100%;
   border:1px solid gray;  
   overflow:hidden;
   display:inline-block;
  }
  #leftdiv{
  height:200px;
  width:50%;
  background-color:gray;
  float:left;
  margin:2px;
  display: inline-block;
  }   

  #rightdiv{
   height:200px;
   width:50%;
   background-color:yellow;
   float:left;
   display: inline-block;
   margin:2px;
  }

This should allow them to respond and align side by side.