Responsive design automatic margin between two elements - html

Question

I am attempting to position two elements in the center of their given space regardless of the size of the page.
Example
https://jsfiddle.net/57q9dn78/
<div id="parent">
<div class="child right">
I am a child.
</div>
<div class="child left">
I am a child.
</div>
</div>
.child {
background-color: #ff0000;
height: 20px;
width: 100px;
max-width: 50%;
}
.right {
float: right;
margin-right: 75px;
}
.left {
float: left;
margin-left: 75px;
}
#parent {
background-color: #00FF00;
height: 20px;
padding: 20px 0;
width: 500px;
}
In the example the #parent div is set to 500px and the others have margins based on that. Normally parent would be 100% width. This is just an example of what I wanted. Is there a way to use calc or something else in CSS so as the page changes in size the margin changes or goes away entirely based on the face that each child is 100px.

Answer 1

You could use flexbox:
.child {
background-color: #ff0000;
height: 20px;
width: 100px;
max-width: 50%;
}
#parent {
background-color: #00FF00;
height: 20px;
padding: 20px 0;
display: flex;
justify-content: space-around;
width: 500px;
}
<div id="parent">
<div class="child right">
I am a child.
</div>
<div class="child left">
I am a child.
</div>
</div>

Answer 2

Just make the children's container 50%
.child {
height: 20px;
width: 50%;
float:left;
text-align:center;
}
.child span {
background-color: #ff0000;
}
https://jsfiddle.net/foreyez/xqvffyqj/

Answer 3

Just change the margin to 15% instead of 75px, which is 75px/500px:
.right {
float: right;
margin-right: 15%;
}
.left {
float: left;
margin-left: 15%;
}
Here is a working example

Answer 4

.child-holder {
width: 50%;
float: left;
}
.child {
background-color: #ff0000;
height: 20px;
width: 100px;
margin: auto;
max-width: 100%;
}
#parent {
background-color: #00FF00;
height: 20px;
padding: 20px 0;
width: 100%;
}
<div id="parent">
<div class="child-holder">
<div class="child">
I am a child.
</div>
</div>
<div class="child-holder">
<div class="child">
I am a child.
</div>
</div>
</div>
Before posting this I attempted to delete the question because none of the given answers handled the responsive design requirement. So, giving that parent needs to be 100%, you can make 2 boxes of 50% width and the auto margin on the child will allow the children to be centered within their respective spaces regardless of the size of parent or page.

Answer 5

Here is 2 simple variants, the first having fixed width and margin left/right (using your sample fixed width's), the second with fluid and translate left/right.
The middle for 2 element is 33% and then you reduce with 66% of their width.
If one want them centered at 25%, just change to 25% and reduce with 50%.
Snippet fixed width
.child {
background-color: #ff0000;
height: 20px;
width: 100px;
max-width: 50%;
}
.left {
float: left;
margin-left: calc(33.3% - 66.6px);
}
.right {
float: right;
margin-right: calc(33.3% - 66.6px);
}
#parent {
background-color: #00FF00;
height: 20px;
padding: 20px 0;
width: 500px;
}
<div id="parent">
<div class="child right">
I am a child.
</div>
<div class="child left">
I am a child.
</div>
</div>
Snippet fluid width
.child {
background-color: #ff0000;
height: 20px;
width: 100px;
max-width: 50%;
}
.left {
float: left;
position: relative;
left: 33.3%;
transform: translateX(-66.6666%);
}
.right {
float: right;
position: relative;
right: 33.3%;
transform: translateX(66.6666%);
}
#parent {
background-color: #00FF00;
height: 20px;
padding: 20px 0;
width: 100%;
min-width: 200px;
}
<div id="parent">
<div class="child right">
I am a child.
</div>
<div class="child left">
I am a child.
</div>
</div>