Neither div nor span aligning within container div

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • aditiverma27
    New Member
    • Jul 2010
    • 3

    Neither div nor span aligning within container div

    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

    Code:
    #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
    Recognized Expert Expert
    • Aug 2008
    • 8694

    #2
    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
    Last edited by Dormilich; Jan 8 '11, 12:32 PM.

    Comment

    • AutumnsDecay
      New Member
      • Mar 2008
      • 170

      #3
      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.

      Comment

      • drhowarddrfine
        Recognized Expert Expert
        • Sep 2006
        • 7434

        #4
        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.

        Comment

        • aditiverma27
          New Member
          • Jul 2010
          • 3

          #5
          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..tha nks again..:)

          Comment

          Working...