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 4 of 4
  1. #1
    New Coder
    Join Date
    Sep 2010
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Keeping div underneath preceding divs automatically?

    Hi everyone.
    I'm trying to create a FAQ page. Each question's answer has its own div. Each div just contains the text (the answer to the question) and it has a grey border around it. The page is plain white.
    My question is, is it possible for me to style all the divs in such a way that they automatically go underneath the one before it? I currently have all of them positioned absolutely. The problem with this is, I'd like to be able to change the questions and answers without having to cause problems with the way the divs are positioned. As things stand, every time I change the text of one div (thus making it either shorter or longer), that div starts to overlap with others because their positions haven't been altered accordingly. (I hope that makes sense?)

    For example, if I add more text to the answer in the second div, then the second div will then overlap the third div, because the third div is still in the same place as before. Is there a way to make things so that, when I (for example) add text to the second div, the third div will stay underneath the second div instead of being overlapped by it?

    Code:
    .q1box{
    position: absolute;
    top: 440px;
    left: 135px;
    max-width: 1070px;
    border: 1px solid #AAA;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    behavior:url(../br/border-radius.htc);
    background-color: #fff;
    border-radius: 10px;
    }
    
    .q2box{
    position: absolute;
    top: 740px;
    left: 135px;
    width:1070px;
    max-width: 1070px;
    border: 1px solid #AAA;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    behavior:url(../br/border-radius.htc);
    background-color: #fff;
    border-radius: 10px;
    }
    
    .q3box{
    position: absolute;
    top: 1002px;
    left: 135px;
    width:1070px;
    max-width: 1070px;
    border: 1px solid #AAA;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    behavior:url(../br/border-radius.htc);
    background-color: #fff;
    border-radius: 10px;
    }
    Thanks for any help.

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    The issue here is your use of absolute positioning - which when used like this has precisely this (major) downside - if you change one thing you have to change everything.

    Easier to get rid of the absolute positioning and let the page "flow" normally - then if you add something at the top of the page, everything else shifts down to accommodate it automatically.

    If this doesn't make sense, post a link to your page so we can see your current set up.

  • #3
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,990
    Thanks
    15
    Thanked 233 Times in 233 Posts
    It's the natural behavior of divs to stack on top of each other, which you've changed by using position:absolute; .
    Code:
    body {width: 1070px;margin: 0 auto}
    .qbox{
    position: relative;
    border: 1px solid #aaa;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    behavior:url(../br/border-radius.htc);
    background-color: #fff;
    border-radius: 10px;
    }
    That might be closer to what you want to do. You can give the divs individual IDs and all the same class qbox, to simplify the coding too.

  • #4
    New Coder
    Join Date
    Sep 2010
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry I forgot to thank you guys for your replies. Thanks! It's working for me fine now


  •  

    Posting Permissions

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