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 to the CF scene
    Join Date
    Jun 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How to make box expand without overlay as content expands

    Hello all,
    I am very new to CSS and have a bit of an issue although I am pretty sure this is an easy fix. I have a website with the following CSS

    #container {
    position: center;
    width: 954px;
    height: auto;
    }

    #leftb {
    padding: 5;
    position: absolute;
    left: 0;
    height: auto;
    width: 234px;
    margin-top: 145px;
    text-align: left;
    }


    #leftb .nav {
    padding: 5;
    position: absolute;
    width: 234px;
    left: 0;
    background-color: #DCE6FB;
    margin-top: 24px;
    text-align: left;
    }

    #leftb .navbg {
    padding: 5;
    position: absolute;
    width: 234px;
    background-color: #184684;
    font-weight: bold;
    color: #FFFFFF;
    left: 0;
    text-align: left;
    }


    #leftb .mlist {
    padding: 5;
    position: absolute;
    width: 234px;
    left: 0;
    background-color: #DCE6FB;
    margin-top: 24px;
    text-align: left;
    }

    #leftb .mlistbg {
    padding: 5;
    position: absolute;
    width: 234px;
    background-color: #184684;
    font-weight: bold;
    color: #FFFFFF;
    left: 0;
    text-align: left;
    }

    and the html is here http://topbuypc.com/index.php?s=config

    I am trying to get the mailing list right under the navigation, and when the navigation expands with more links I would like the mailing list to move down with it. I can position the mailing list with margin-top: #px; but then I would have to change the number everytime I add more links to the navigation box. Please help, thanks everyone!

  • #2
    New Coder
    Join Date
    Dec 2009
    Posts
    96
    Thanks
    1
    Thanked 2 Times in 2 Posts
    I actually would suggest using a table layout, so you can use the cells for the menu's. That way, the menu's will move up and down depending on the amount of links in it. You can even center the layout if you wish.

    The way you've got it right now, the menu's are positioned on a specific place of the page, so you'd have to recalculate the position of the mailing list every time after adding a link. Do you know how to create a table layout?
    Last edited by Bar2aYunie; 06-15-2010 at 01:42 PM.

  • #3
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,954
    Thanks
    9
    Thanked 724 Times in 718 Posts
    There's no need at all for a table here.

    The problem with the css you've posted is that it's using a lot of absolute positioning. So if one of your elements gets bigger, you need to change the absolute position of all the other elements. If you remove the absolute positioning then the elements in the page will automatically align as they extend or shrink. That said, your link doesn't have the absolute positioning - so maybe you've already done that?

    You might also want to have a look here for a three column layout.


  •  

    Posting Permissions

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