CODEWITHSUNDEEP
htmlcss
Jason Kelly
Jason Kelly

Reputation: 2645

Container Div with 2 inner Divs is breaking into outer div

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>

Upvotes: 0

Views: 725

Answers (5)

Sai
Sai

Reputation: 1949

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.

Upvotes: 0

web-tiki
web-tiki

Reputation: 103760

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;
}

Upvotes: 1

Arbitur
Arbitur

Reputation: 39081

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

Upvotes: 0

cclark413
cclark413

Reputation: 435

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.

Upvotes: 0

Josh Rutherford
Josh Rutherford

Reputation: 2723

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;
}

Upvotes: 0

Related Questions