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

  • 2 Contributors
  • 2 Replies
  • 85 Views
  • 12 Hours Discussion Span
  • Latest Post Latest Post by davy_yg

Dani AI

Generated

is right that taking columns out of the normal flow fixes the overlap, but the root problem here is using negative top margins to "place" the second column. Negative margins tie the two columns together so when one expands (accordion opens) the other is dragged down. Replace that fragile positioning with a layout method that keeps both columns anchored at the same top edge.

A simple, modern fix is to wrap the two columns and use Flexbox so they stay top-aligned while each column grows independently:

.faq-columns {
  display: flex;
  align-items: flex-start; /* keeps both columns pinned to the top */
  gap: 20px;
}

.faq {
  width: 250px;
  box-sizing: border-box;
}

If legacy support requires floats, float both column blocks and add a clearfix on the wrapper so the wrapper contains the floats instead of relying on negative margins:

.faq-wrapper::after {
  content: "";
  display: table;
  clear: both;
}

Troubleshooting checklist: remove the negative top margin first, then test; inspect with browser devtools to see which element changes height or margin when the accordion opens; ensure the accordion toggles height/internals (not the column container position); and avoid absolute positioning for long content because it removes elements from flow and breaks responsiveness.

For reference on modern layout approaches see MDN's Flexbox guide: Flexbox basics.

This keeps both columns visually "static" under the title and prevents one column's expand/collapse from shifting the other.

Recommended Answers

All 2 Replies

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

Thanks. If you could please also help on this topic

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.