Neither div nor span aligning within container div

[aditiverma27]

Hi,

I have a container div, which contains two divs, which need to appear side by side. Everything is fixed width, but the two divs are appearing with a line break. I tried to fix this by converting them into spans, but even then they appeared with a line break.

The style sheet properties for these are

#container{
    width:992px;
    background-image:url(../images/content_background.png);
    background-repeat:repeat-y;
    padding-top:27px;
    margin-left:auto;
    margin-right:auto;
}
 
#div1{
    width:45.31em;
    margin-left:2.31em;
    margin-bottom:0.94em;
}
 
#skyscraper160x600{
    width:10.00em;
    height:37.75em;
    margin-right:27px;
}
 
 

I have tried everything, such as setting float properties for the two, display:inline for #container, but nothing works. Can some one please tell me how to fix this.

[Dormilich]

display: inline; or float should have worked. the only thing preventing that (I can imagine) is that the width of the two divs is too large (you define 992px for the parent and 57.62em*+27px for both divs, that’s absolute vs. relative units)

if 1em* exceeds 16.7px the divs won’t fit

*- roughly the size of 00 or the letter M

[AutumnsDecay]

div1 should have float:left
skyscraper should have float:right

Try this, and give your divs a pixel amount for the width to ensure they're not too large for the containing div. Even doing a test of 400px in width for both, with float left and float right respectively on each child div, should give you some results.

[drhowarddrfine]

if 1em* exceeds 16.7px the divs won’t fit

*- roughly the size of 00 or the letter M

'Tis not. On the web, 1em is equal to the current font size. If the current font size is 16px, then 1em=16px.

[aditiverma27]

Hi,

Thanks guys for your response..I fixed it by removing the #container all together...as #container was wrapped inside #containerwrap, I just included a clear:both in #containerwrap, and made #div1 float:left, and #skyscraper float:right. That seems to have fixed it...I still did not understand why the floats were being ignored when the two divs were inside #container..thanks again..:)