Container Div with 2 inner Divs is breaking into outer div - html

Question

I need your help,
How can the CSS code below be modified, such that I would be able to have a parent (container) div at 100% width while the 2 inner divs are 70% and 30% width inside the box? As it stands now, it seems that the 2nd div is pushing out of the container div?
<style type="text/css">
#containerdiv {
width:100%;
}
#outerdiv {
height:300px;
border: 1px solid blue;
position: relative;
}
#innerdiv1 {
height:300px;
float:left;
border: 1px solid red;
width: 70%;
}
#innerdiv2 {
height:300px;
border: 1px solid green;
width: 30%;
}
</style>
<div id="outerdiv">
<div id="innerdiv1">
</div>
<div id="innerdiv2">
</div>
</div>

Answer 1

SOLUTION :
I updated your CSS code in this FIDDLE
EXPLANATION :
The 1px border you put around the inner-divs increases the with of these divs to prevent that and include the border in the CSS width property, You can use box-sizing:border-box; with float:left on both inner divs.
You can learn more about box-sizing property here
CSS :
#containerdiv {
width:100%;
}
#outerdiv {
height:300px;
border: 1px solid blue;
position: relative;
}
#innerdiv1 {
height:300px;
float:left;
border: 1px solid red;
width: 70%;
box-sizing:border-box;
}
#innerdiv2 {
height:300px;
border: 1px solid green;
width: 30%;
box-sizing:border-box;
float:left;
}

Answer 2

for one your innderdiv2 needs float: left; in the code you provided, but besides that it looks like you're experiencing the pains of the box-model. Your divs are indeed 30% and 70% width of the parent container, however they each have a 1px border, which causes them each to be 2px too large. Try using box-sizing: border-box;. I generally do something like this:
*,
*:before,
*:after {
box-sizing: border-box;
}

Answer 3

See here:
JSFiddle
The 1px borders push the divs past 100%, because they add to the overall width.
Use -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; on your inner divs so you can add attributes such as padding and borders without contributing extra to the dimensions.

Answer 4

Borders increases the size of the element you give it to.
Remove the borders and it should work like you want it to.
And you dont need the double-width.
#containerdiv {
width:100%;
}
#outerdiv {
height:300px;
background-color:blue;
position: relative;
}
#innerdiv1 {
height:300px;
float:left;
background-color:red;
width: 70%;
}
#innerdiv2 {
height:300px;
background-color:green;
width: 30%;
}
JSFiddle

Answer 5

on your innserdiv2 you can use a margin-left attribute as well to fix this...
#innerdiv2 {
height:300px;
border: 1px solid green;
width: 30%;
box-sizing:border-box;
margin-left:70%;
}
and you dont need to have a width:100% on #containerdiv. jsut have width:100% in #outerdiv.
your #innerdiv1 looks like
#innerdiv1 {
height:300px;
float:left;
border: 2px solid red;
width: 70%;
box-sizing:border-box;
}
this takes care of your border from overflowing as well outside the div. hopefully this helps. I know you have alrdy accepted an answer.