Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 3 of 3

Thread: Relative DIVs

  1. #1
    Junior Member
    Join Date
    Jul 2005
    Posts
    1
    Member #
    10626
    Hi there, I'm a new web designer and I'm using photoshop.

    I created a new design, sliced it up, and put in DIVs and backgrounds so the contents could be expanded limitlessly. However, I'm having a problem with one of the DIV setups. I'm using "position:relative" which makes the table cell bigger as the div gets bigger of course, keeping the design intact. At the bottom of the page I have 2 boxes next to eachother, but the DIV on the left is pushing the DIV on the right down. Here is the code I have :
    Code:
    <td colspan="10" style="background:url('images/RepeaterSlice3.gif');background-repeat:repeat-y;" width="680" 
    
    height="100%" valign="top" align="justify">
    
    <!-- FORUM STATS BOX CONTENT -->
    <div style="position:relative; left:37px; width:291;">test</div>
    <!-- END -->
    <!-- AFFILIATES BOX CONTENT -->
    <div style="position:relative; left:359px; width:290;">test</div>
    <!-- END -->
          
          </td>
       </tr>
    And it displays as this :

  2.  

  3. #2
    Member Tristessa's Avatar
    Join Date
    Nov 2004
    Location
    Kingston, Ontario
    Posts
    94
    Member #
    8215
    align content to the top of the table

  4. #3
    Senior Member seanmiller's Avatar
    Join Date
    Sep 2003
    Location
    Glastonbury, UK
    Posts
    868
    Member #
    3263
    Liked
    1 times
    Remember what relatively positioned divs are... they are relative to where they *would* have been had the page been allowed to flow naturally.

    So, natural flow would be...

    test
    test

    You are positioning your divs to the right of where they would naturally be (ie. left: 99px), but nothing vertically... hence your positions are...

    .....>test
    ....................>test

    See what I mean?

    Now there's two solutions to this...

    a) You can add vertical alignment...
    Code:
            <div style="position: relative; left: 10px;">test</div>
            <div style="position: relative; left: 50px; bottom:18px;">test</div>
    b) Alternatively, change the natural flow. If your original code had said
    Code:
    <span>test</span><span>test</span>
    Then the natural flow would have been...
    test test
    Therefore you could simply change your divs to spans and adjust the left: values accordingly (the word "test" plus a space, for instance, may take up 30px)...
    Code:
            <span style="position: relative; left: 10px;">test</span>
            <span style="position: relative; left: 20px;">test</span>
    Best of luck,

    Sean


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 02:41 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com