Member Avatar for 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.

  • 2 Contributors
  • 2 Replies
  • 305 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by JoshJ47

Dani AI

Generated

MDanz's posts point to two separate layout causes. The header is absolutely positioned, which takes it out of the normal flow so later blocks can overlap its area. Position:relative does not remove an element from the flow (it only offsets its box), so top:0 won’t create side‑by‑side columns. Make the header non‑absolute (static/relative) or give the next container a top padding/margin equal to the header height if absolute positioning is required.

For side‑by‑side question/answer columns, 's float idea is valid but needs a container that "contains" floats; otherwise following content will be affected. A compact approach is to float the two columns and add a clearfix (or use overflow:auto on the parent). Example:

/* contain floats on the parent */
#qanda { width:700px; margin:0 auto; overflow:auto; }

/* columns */
#questions { float:left; width:60%; box-sizing:border-box; }
#answers   { float:right; width:35%; box-sizing:border-box; }

/* clearfix alternative */
.clearfix::after { content: ""; display: table; clear: both; }

/* ensure later sections start below the floats */
#amount, #results { clear:both; }

Modern alternatives: use display:flex on #qanda and let flex handle widths and alignment (no floats, no clears). Also check markup for errors — post #2 contains an extra double‑quote in the id="amount" attribute which can break parsing and produce weird layout. Use the browser inspector to view computed positions, avoid deprecated <font> tags (use CSS font-family/color), and validate HTML when layout behaves unexpectedly.

Member Avatar for 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;

}
Member Avatar for JoshJ47

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.