the div content growing outside the wrapper div

[seco]

here is my html divs

 

<div id="wrapper" >

  <div id="div1">

    <p>Content for  id "div1" Goes </p>

    <p> </p>

  </div>

  <div id="div2">

    <p> for  id "div2" Goes Here</p>

    <p> </p>

  </div>

</div>

 

and this is the css

 

 

#div1 {

width: 25%;

margin-top: 10px;

background-color: #9999FF;

margin-left: 5px;

float: left;

}

#div2 {

width: 70%;

margin-left: 27%;

margin-top: 10px;

background-color:#00FF99;

}

#wrapme {

background-color: #CCCCCC;

text-align: right;

width: 100%;

}

 

the div1 content is growing and go outside the wrapper div !!! otherwise the dive2 content not why??

 

thanks in advance.

[bronzemonkey]

It's because "div1" is floated. That pulls it out of the document flow and it will extend beyond the bottom of the wrapper if there is enough content. This is standard float behaviour. See http://www.phpfreaks.com/forums/index.php/topic,182099.msg816584.html#msg816584 and then take some time to read up about css.

[seco]

i remove the float property and now te div2 is lower that te div1 although i set the magin of the top is 10px only so how to both divs at the same top?

[seco]

all i want is to put both divs inside the wrapper and never grow outside it and one on the right and one on the left

[bronzemonkey]

I've already given you the answer in the link provided in my first post.

[seco]

ok i put a footer div and set the clear to both and now the right div can't go outside

but the div2 has margin and padding 10px and it's sticked to the top !!! why? while the div1 has the right maring and padding from the top.

 

and this only in firefox while in IE is shown probably

any idea?

 

thanks in advance.