Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Sep 2006
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Positioning Problem

    I thought I finally had a grasp of how relative and absolute positioning worked, then I stumbled upon this problem. How do I give to divs a relitive position when they share the same parent/container? The second one always get's pushed down. Here's an example:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
      <title>Untitled Document</title>
    <style type="text/css">
    
    #wrap {
      width: 760px;
      margin: auto;
    }
    
    #header {
      background: #000;
      width: 760px;
      height: 250px;
    }
    
    #box1 {
      background: #0000ff;
      width: 150px;
      height: 100px;
      position: relative;
      left: -200px;
    }
    
    #box2 {
      background: #ff0000;
      width: 150px;
      height: 100px;
      position: relative;
      top: 10px;
      left: 810px;
    }
    
    </style>
    </head>
    
    <body>
      <div id="wrap">
        <div id="header">
          <div id="box1"></div>
    
          <div id="box2"></div>
        </div>
      </div>
    </body>
    </html>
    The red box should only be hanging 10px below the top of the black one. I don't want to use absolute positioning because it causes the appearance of the horizontal scroll bar on lower resolution screens. It should appear that both the red and blue boxes are not being fully displayed under 800x600 resolution (and no horizontal scroll bar to see the rest).

    Hope that all makes sense. It seems like a simple problem that has an easy fix. I just don't know what it is and I couldn't find the answer on my own. Thanks for the help.

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    It would appear that you are going for an overlapping effect. To do this you need to use absolute positioning. One problem you might have run into is the boxes not staying with the header. The solution to this is make the header position:relative;. An absolutely positioned element will use the nearest relatively positioned element as its reference.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    <style type="text/css">
    
    #wrap {
      width: 760px;
      margin: auto;
    }
    
    #header {
      background: #000;
      height: 250px;
      position: relative;
    }
    
    #box1 {
      background: #00F;
      width: 150px;
      height: 100px;
      position: absolute;
      top: 10px;
      left: -75px;
    }
    
    #box2 {
      background: #F00;
      width: 150px;
      height: 100px;
      position: absolute;
      top: 10px;
      right: -75px;
    }
    </style>
    </head>
    <body>
    <div id="wrap">
    	<div id="header">
    		<div id="box1"></div>
    		<div id="box2"></div>
    	</div>
    </div>
    </body>
    </html>
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New Coder
    Join Date
    Sep 2006
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I figured it out. I needed to use float: left on both boxes. Here's the code:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
      <title>Untitled Document</title>
    <style type="text/css">
    
    #wrap {
      width: 760px;
      margin: auto;
    }
    
    #header {
      background: #000;
      width: 760px;
      height: 250px;
    }
    
    #box1 {
      background: #0000ff;
      width: 150px;
      height: 100px;
      position: relative;
      left: -200px;
      float: left;
    }
    
    #box2 {
      background: #ff0000;
      width: 150px;
      height: 100px;
      position: relative;
      top: 10px;
      left: 660px;
      float: left;
    }
    
    </style>
    </head>
    
    <body>
      <div id="wrap">
        <div id="header">
          <div id="box1"></div>
    
          <div id="box2"></div>
        </div>
      </div>
    </body>
    </html>
    Thanks for the help though. I'm sure that will clear up other problems in the future.


  •  

    Posting Permissions

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