column location

[davy_yg]

Hi, I am building two columns:

page-practice-area.php

<div id="faq1">
<p class="question">> FIAT JUSTITIA RUAT CAELUM</p>

<div class="answer-wrapper"><p class="answer">        
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eros risus, vulputate vel iaculis vel, luctus ac arcu. Vestibulum metus ligula, dignissim nec viverra a, interdum ut magna. Donec dignissim hendrerit ligula ultricies aliquam. Aliquam mattis tristique magna, et feugiat erat pulvinar vel. Aliquam adipiscing tempor purus vitae porta. Morbi varius condimentum nisl, nec tincidunt elit elementum et. Proin et velit erat. Duis sed fermentum elit. Maecenas a neque mi. In elementum, sapien a sodales ornare, nibh orci commodo dui, a pretium elit lorem et urna. Suspendisse in mollis turpis. Aliquam suscipit lacinia felis in pellentesque. 
</p></div>
<hr width="240">

<p class="question">> FIAT JUSTITIA RUAT CAELUM</p>

<div class="answer-wrapper"><p class="answer">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eros risus, vulputate vel iaculis vel, luctus ac arcu. Vestibulum metus ligula, dignissim nec viverra a, interdum ut magna. Donec dignissim hendrerit ligula ultricies aliquam. Aliquam mattis tristique magna, et feugiat erat pulvinar vel. Aliquam adipiscing tempor purus vitae porta. Morbi varius condimentum nisl, nec tincidunt elit elementum et. Proin et velit erat. Duis sed fermentum elit. Maecenas a neque mi. In elementum, sapien a sodales ornare, nibh orci commodo dui, a pretium elit lorem et urna. Suspendisse in mollis turpis. Aliquam suscipit lacinia felis in pellentesque. 
</p></div>
<hr width="240">

<p class="question">> FIAT JUSTITIA RUAT CAELUM</p>
       
<div class="answer-wrapper"><p class="answer">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eros risus, vulputate vel iaculis vel, luctus ac arcu. Vestibulum metus ligula, dignissim nec viverra a, interdum ut magna. Donec dignissim hendrerit ligula ultricies aliquam. Aliquam mattis tristique magna, et feugiat erat pulvinar vel. Aliquam adipiscing tempor purus vitae porta. Morbi varius condimentum nisl, nec tincidunt elit elementum et. Proin et velit erat. Duis sed fermentum elit. Maecenas a neque mi. In elementum, sapien a sodales ornare, nibh orci commodo dui, a pretium elit lorem et urna. Suspendisse in mollis turpis. Aliquam suscipit lacinia felis in pellentesque. 
</p></div>
<hr width="240">       
       
<p class="question">> FIAT JUSTITIA RUAT CAELUM</p>

<div class="answer-wrapper"><p class="answer">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eros risus, vulputate vel iaculis vel, luctus ac arcu. Vestibulum metus ligula, dignissim nec viverra a, interdum ut magna. Donec dignissim hendrerit ligula ultricies aliquam. Aliquam mattis tristique magna, et feugiat erat pulvinar vel. Aliquam adipiscing tempor purus vitae porta. Morbi varius condimentum nisl, nec tincidunt elit elementum et. Proin et velit erat. Duis sed fermentum elit. Maecenas a neque mi. In elementum, sapien a sodales ornare, nibh orci commodo dui, a pretium elit lorem et urna. Suspendisse in mollis turpis. Aliquam suscipit lacinia felis in pellentesque. 
</p></div>
<hr width="240">
</div>

<div id="faq2">
<p class="question">> FIAT JUSTITIA RUAT CAELUM</p>
						
<div class="answer-wrapper"><p class="answer">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eros risus, vulputate vel iaculis vel, luctus ac arcu. Vestibulum metus ligula, dignissim nec viverra a, interdum ut magna. Donec dignissim hendrerit ligula ultricies aliquam. Aliquam mattis tristique magna, et feugiat erat pulvinar vel. Aliquam adipiscing tempor purus vitae porta. Morbi varius condimentum nisl, nec tincidunt elit elementum et. Proin et velit erat. Duis sed fermentum elit. Maecenas a neque mi. In elementum, sapien a sodales ornare, nibh orci commodo dui, a pretium elit lorem et urna. Suspendisse in mollis turpis. Aliquam suscipit lacinia felis in pellentesque. 
</p></div>      
<hr width="240">
</div>

style.css

#faq1 {
	margin: 0 0 0 10px;
	width: 250px;
}

#faq2 {
	margin: -200px 0 0 300px;
	width: 250px;
}

Question is: why whenever I click the subtitle and open the scroll down, the next column text also moving downward ? My goal is to keep both of them remains static close to the red border under the practice area title.

web link

[simplypixie]

Because to display 2 columns next to each other and independent of each other you need to float at least one of them. For example

#faq1 {
float: left;	
margin: 0 0 0 10px;
	width: 250px;
}

#faq2 {
	margin: -200px 0 0 300px;
	width: 250px;
}

[davy_yg]

Thanks. If you could please also help on this topic