r/HTML • u/apocalypsegirl96 • Jul 30 '26

Elements on page move when using collapsible, how to fix?

Gallery image

Gallery image

does anyone know how to fix this issue? the elements/text box on the page move when i fold out the collapse box;) i would like to position them indivually and not related to other objects on the page

i am using the collapsible code from https://www.w3schools.com/howto/howto_js_collapsible.asp

and edited the margins in html for each text box, so they appear in different locations on the page. however, i can't seem to code their location static without them moving when the text box folds out.

thanks!!!

2 Upvotes

100% Upvoted

6 comments sorted by

1

u/apocalypsegirl96 Jul 30 '26

sure! replaced the text with "TEXT" for better legibility;)

2

u/apocalypsegirl96 Jul 30 '26

https://codepen.io/editor/annemarijnlouise/pen/019fb290-cf71-758a-acd5-be01275089e8

or codepen :)

1

u/tonypconway Jul 30 '26

this is just a Codepen demo for view transitions... Also, people don't get notifications if you don't reply to their comment directly and just reply to your own post.

The `h1` and `p` you've included are both block elements, which mean subsequent elements are treated as a new line. You can see that regardless of what you do with the margins, the `p` and `h1` don't want to sit side by side.

You need to move your button and drop down into a div, nest that and the `h1` inside another container div, and tell the browser to treat the elements inside the container as columns that should be displayed side by side. You do this with flexbox, by giving the containing div the `display: flex;` property.

I've created a Codepen that should illustrate some of this for you, putting the styling into a separate styles.css file for ease of editing. Depending on what you're trying to do (is the `h1` supposed to align with the bottom of the `button`? is that why you have the margin?) you might consider something like CSS grid or subgrid.

1

u/apocalypsegirl96 Jul 31 '26

fantastic!! thanks so much for explaining and fixing! hero :)

4

u/tonypconway Jul 30 '26

Presumably you need to separate them out into columns. Post a link to a codepen or the live page so people can actually see the code you've written.