SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Thread: Sigh.

  1. #1
    masquerading Nick's Avatar
    Join Date
    Jun 2003
    Location
    East Coast
    Posts
    2,215
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Sigh.

    I can't believe I can't figure this out, it seems so easy I've read all the tutorials and stuff, but maybe i'm just stupid, it isn't working. I want to place one div beside another div, not using absolute positioning. Here is what I have - the right div though is going right, but under the left div.

    Code:
    #container {
    	width: 679px;
    	padding: 0; }
    
    #left {
    	width: 485px;
    	background-color: #8CA5AF;
    	border-left: 3px solid #71858D; }
    
    #right {
    	float: right;
    	width: 190px;
    	background-color: #7F969F;
    	font: 11px verdana;
    	color: 202E34; }
    Can someone please help me? I've tried some other stuff I have taken out now, none of it worked.
    Nick . all that we see or seem, is but a dream within a dream
    Show someone you care, send them a virtual flower.
    Good deals on men's watches

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,545
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    IE adds extra padding around floats which can stop them fitting into the space you've allocated. Looking at your layout theeasiest solution would be to float both the left and right and the problem goes away.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    #container {
     width: 679px;
     padding: 0; }
    #left {
     float:left;
     width: 485px;
     background-color: #8CA5AF;
     border-left: 3px solid #71858D; }
    #right {
     float: right;
     width: 190px;
     background-color: #7F969F;
     font: 11px verdana;
     color: 202E34;
    }
    </style>
    </head>
    <body>
    <div id="container"> 
      <div id="right">Right</div>
      <div id="left">Left</div>
    </div>
    </body>
    </html>
    Alternatively allow a little more space for the floats to fit or use a hack to reduce the right margin on the float.
    Code:
    * html #right {margin-right:-3px}
    The first solution would seem the best in this case.

    Paul

  3. #3
    masquerading Nick's Avatar
    Join Date
    Jun 2003
    Location
    East Coast
    Posts
    2,215
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks!
    Nick . all that we see or seem, is but a dream within a dream
    Show someone you care, send them a virtual flower.
    Good deals on men's watches


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •