div under one another

[MDanz]

here's my code.. the divs aren't listing below one another.

<div id="headerfront">//phpcode</div>
<div class="qclass">
//php code
</div>
<div id="amount" class="aclass">
//phpcode
</div>

#headerfront {
display:block;
 position:absolute; width:100%; top:0px; left:0px; height:115px; text-align:center; background-image:url("headerbackground.jpg"); }

.qclass {
display:block;
width:1000px;
margin:0 auto;
}
.aclass {
display:block;
margin:0 auto;

}

how do i get the divs to list under one another? they all seem to start at the top. there are a collection of elements in the php code.. so unordered list is not appropriate.

[MDanz]

nvm the above... this is the most important. I know how to list now. It just seems when i try to position elements inside a div, it effects everything outside the container div.

How do i layout elements within a div without effecting everything outside the container div? this has been frustrating me, everything on the page seems to get effected.

i want the div (question) and the div (answer) next to each other..... i thought position:relative does this since it changes position from the container div.

The below code has the div(answer) below the div(question). I put top:0px; and position:relative assuming they both start at the top of the container div.

<div id="adult">
	<?php echo "<ul><li>test1</li></ul>";  ?>
	</div>
	<div id="qanda">
	<?php  echo "
<div id='questions'>
 <ul id='questionsul'>
 <li><font color='#FFFFFF' face='Century Gothic' size='5px'>QUESTION</font><font color='#FFFFFF' face='Arial' size='5px'>?</font></li>
 </ul>
</div>

<div id='answers'>
 <ul id='answersul'>
  <li><font color='#D99C29' face='Century Gothic' size='5px'><a href='answer.php?id=1&search=$search' style='text-decoration:none' class='Options6'>Answer</a></font></li>
 </ul>
</div>
 

";  ?>
	</div>
<div id="amount"">
	<?php echo "<ul><li>test3</li></ul>";;  ?>
		
	</div>
		<div id="results">
	<?php echo "<ul><li>test4</li></ul>";  ?>
	</div>
	<div id="contributing">
	<?php echo "<ul><li>test5</li></ul>";  ?>
	</div>
	<div id="advert">
	<?php echo "<ul><li>test6</li></ul>";  ?>
	</div>
	</div></div>

CSS

#questions{
position:relative;
top:0px;
text-align:left;

}

#answers{
position:relative;
top:0px;
text-align:right;


}


#adult{
width:700px;
margin:0 auto;

}

#qanda {
width:700px;
margin:0 auto;
}

#amount {

width:700px;
margin:0 auto;
}

#results {
width:700px;
margin:0 auto;

}

#contributing {
width:700px;
margin:0 auto;

}
#advert {
width:700px;
margin:0 auto;

}

[JoshJ47]

use the float style, float the question div left, and the answer div right