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 4 of 4
  1. #1
    Senior Member Jasoncw's Avatar
    Join Date
    Jan 2004
    Location
    Detroit, MI, United States
    Posts
    254
    Member #
    4401
    i'm having trouble with my div positioning for some reason. I have three relativly positioned divs, a top bar (that has a width of 100%, and my navigation goes there), a content div, and then a bottom bar. They are positioned relativly to make them line up better with other things, but they should all line up with themselves.

    my problem is that the bottom bar is either not showing up at all, and some of the text from the content is falling off the bottom of the page (ie) and that the content div ends too short, but the bottom bar shows up (mozila).

    <div id="bar-top">
    some links
    </div>

    <div id="content">

    <span class="column_right">
    images are floated right.
    </span>
    enough text to make the page scroll

    </div>

    <div id="bar-bottom"> some stuff</div>
    #bar-top {
    position: relative;
    top: 54px;
    z-index: 2;
    width: 100%;
    height: 20px;
    }

    #content {
    height: 450px;
    position: relative;
    top: 54px;
    }

    #bar-bottom {
    width: 100%;
    height: 20px;
    position: relative;
    top: 54px;
    }
    i left out the actual content, and all of the presentational stuff.

    Thanks for all the help :classic:
    Jason

  2.  

  3. #2
    Senior Member
    Join Date
    Dec 2003
    Posts
    1,274
    Member #
    4362
    Forget about the relative positionment, and use a container div:
    Code:
    <div id="container">
    <div id="bar-top"> 
    some links
    </div>
    
    <div id="content">
    
    <span class="column_right">
    images are floated right.
    </span>
    enough text to make the page scroll
    
    </div>
    
    <div id="bar-bottom"> some stuff</div>
    </div>
    Code:
    #bar-top {
    z-index: 2;
    height: 20px;
    }
    #content { 
    height: 450px; 
    }
    #bar-bottom {
    height: 20px;
    }
    #container {
    /* I don't know if you want to center align this on the page, or how much width you want it, so change this to your needs */
    }
    I removed the "width:100%" because DIVs already take up all the horizontal space available by default

  4. #3
    Senior Member Jasoncw's Avatar
    Join Date
    Jan 2004
    Location
    Detroit, MI, United States
    Posts
    254
    Member #
    4401
    thanks! it works perfectly now. It makes me happy becuase this is my first design that is 100% compatibale with all browsers. And it only uses css for the layout, and it will be all xhtml too. thanks!
    Jason

  5. #4
    Senior Member
    Join Date
    Dec 2003
    Posts
    1,274
    Member #
    4362

    Seems like more and more people are learning how to kick tables in the ***, it's not so difficult as it seems.


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 06:06 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com