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?


.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.

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.

It's the natural behavior of divs to stack on top of each other, which you've changed by using position:absolute; .
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.

Sorry I forgot to thank you guys for your replies. Thanks! It's working for me fine now:D