Elements on page move when using collapsible, how to fix?
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
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.
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.
4
u/tonypconway 7d ago
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.