Align two DIV's and use entire page width

Question

I need to align two div's inside a parent div.

The parent div should take up the page width with a margin on both sides.

The 1st child div should be 100px wide with a 4px margin. The 2nd Child div has to take up the rest of the space with a 4px margin on the right.

How do I write the CSS for this? I have written this so far

div.parent {

        width: ?;

        border:1px black solid;

        position: relative;

        clear: both;

        }

<div class="parent">

<div class="child1"> </div>

<div class="child2"> </div>

Answer 1

Why not just add the margin to the parent div?

<div style="height: 100px; width: 100%; padding: 4px; background-color: Yellow;">
    <div style="height: 100%; width: 100px; background-color: Lime; position: relative; float: left; border: solid 1px black; border-right-width: 0px;"></div>
    <div style="height: 100%; width: 100%; background-color: Red; border: solid 1px black; border-left-width: 0px;"></div>
</div>