2 Replies Latest reply: May 30, 2007 9:26 AM by BruceCSI2 RSS

    Divs not lining up properly

    BruceCSI2 Community Member
      This one always gets me and I can't figure it out. I have 3 divs, one container and 2 "columns" that reside inside the container, and the 2 columns are supposed to line up next to each other. However, the right column div always drops down below the left column, even though it should be next to it. In fact, it even drops below the wrapper div. Here's the code:
      ------------------------------------
      body {
      text-align:center;
      margin:0 auto;
      background-color:#666666;
      }
      #wrapper {
      text-align:left;
      width:750px;
      border:1px solid #000;
      background-color:#fff;
      }
      #leftcolumn, #rightcolumn {
      font-family:Arial, Helvetica, sans-serif;
      font-size:small;
      color:#000;
      border:2px dotted #ccc;
      position:relative;
      margin-left:25px;
      width:300px;
      }
      #rightcolumn {
      float:right;
      background-color:#0CF;
      margin-right:25px;
      }

      -->
      </style>
      </head>

      <body>
      <div id="wrapper">
      <div id="leftcolumn">This is the left column.</div>
      <div id="rightcolumn">This is the right column.</div>
      </div>
      </body>
      -------------------------------------------
      Note that the page is for an intranet site, behind a firewall so I can NOT post a link to it. Sorry. Any help would be appreciated.
        • 1. Re: Divs not lining up properly
          Newsgroup_User Community Member
          float your left column.

          #leftcolumn {
          float: left;
          }


          Add a clearing <br> as below to wrap the wrapper around the two floated
          <divs>.

          <div id="wrapper">
          <div id="leftcolumn">This is the left column.</div>
          <div id="rightcolumn">This is the right column.</div>
          <br style="clear: both;">
          </div>


          You dont need position: relative; for either the left or right <div>
          unless you are intending to insert something within them that is
          absolutely positioned.




          BruceCSI2 wrote:

          > This one always gets me and I can't figure it out. I have 3 divs, one container
          > and 2 "columns" that reside inside the container, and the 2 columns are
          > supposed to line up next to each other. However, the right column div always
          > drops down below the left column, even though it should be next to it. In fact,
          > it even drops below the wrapper div. Here's the code:
          > ------------------------------------
          > body {
          > text-align:center;
          > margin:0 auto;
          > background-color:#666666;
          > }
          > #wrapper {
          > text-align:left;
          > width:750px;
          > border:1px solid #000;
          > background-color:#fff;
          > }
          > #leftcolumn, #rightcolumn {
          > font-family:Arial, Helvetica, sans-serif;
          > font-size:small;
          > color:#000;
          > border:2px dotted #ccc;
          > position:relative;
          > margin-left:25px;
          > width:300px;
          > }
          > #rightcolumn {
          > float:right;
          > background-color:#0CF;
          > margin-right:25px;
          > }
          >
          > -->
          > </style>
          > </head>
          >
          > <body>
          > <div id="wrapper">
          > <div id="leftcolumn">This is the left column.</div>
          > <div id="rightcolumn">This is the right column.</div>
          > </div>
          > </body>
          > -------------------------------------------
          > Note that the page is for an intranet site, behind a firewall so I can NOT
          > post a link to it. Sorry. Any help would be appreciated.
          >

          • 2. Re: Divs not lining up properly
            BruceCSI2 Community Member
            Thanks, Os! It's always the simple stuff that gets me...