problem with divs

[UnknownPlayer]

I have this code:

#content {
width:900px;
height:auto;
margin:auto;
border:solid 1px #000;
background-image:url(../images/img6.jpg);
background-repeat:repeat-x;
background-color:#FFF;
padding: 30px 10px 10px 10px; 
-moz-border-radius : 10px;
-webkit-border-radius : 10px;
}
.article {
width:300px;
height:200px;
-moz-border-radius : 5px;
-webkit-border-radius : 5px;
background-color:#CCC;
float:left;
margin:0 20px 20px 0;
position:relative;
}

<div id="content">
            <div class="article"></div>
            <div class="article"></div>
            <div class="article"></div>
</div>

 

But i got this:

 

This in red is problem, why articles are not in content div ?

And why content div is not height auto ?

[fugix]

can you tell me which divs belong to which boxes?

[UnknownPlayer]

This #content is that grey div behind the article divs, but  that content need to be height 100%.

When i put some other text in that content div, it works fine, but when there is article class it doesnt work..

Can you help ?

[fugix]

in the article class. take out the position relative.

[UnknownPlayer]

Still same

In attachment is website, chek out and tell me the error, if you can

Thanks

 

[attachment deleted by admin]

[cssfreakie]

try this:

 

#content {
width:900px; /* we don't set a height */
        overflow:hidden; /* but we do set this */
border:solid 1px #000;
background-image:url(../images/img6.jpg);
background-repeat:repeat-x;
background-color:#FFF;
padding: 30px 10px 10px 10px; 
-moz-border-radius : 10px;
-webkit-border-radius : 10px;
}

[UnknownPlayer]

Thanks.. it works now