Help Elements Overflowing?

[kaninchen]

Hey, I'm in need of some help. I have contained the three photos and "buttons" in their own container, but when I go to place another container beside them, it instead positions itself below the parent element, totally away from it? I want it all contained within the outermost box. They're not on different lines or anything, I checked a whole lot of things, so I don't know what's the culprit here. I'm not experienced whatsoever, so I'm wondering if the mistake may be more obvious to the trained eye. Here is what the code is so far:

Spoiler

[border=2px outset grey; padding:0; margin:auto; width:50%; max-width:500px; min-width:240px; height:420px; background: #a0a0a4;][border=0; padding=0; box-sizing:border-box; margin:0; width:100%; height:fit-content; line-height:10px; background:#000080; font-size:20px;][font=VT323]Processing. . . . [/font][/border][comment] images below [/comment] [border=0px; height:390px; max-width:180px; margin-left:10px;][border="2px outset grey; padding-left:30px; margin-top:-15px; max-width:100px; height:150px; background:URL('https://kpopping.com/documents/bd/1/1333/Joy-Hello-1st-Special-Album-teasers-documents-1.jpeg') 80% 20%;background-size:cover;"][/border] [border="2px outset grey; padding-left:30px; margin-left:20px; margin-top:-150px; max-width:100px; height:150px; background:URL('https://kpopping.com/documents/bd/1/1333/Joy-Hello-1st-Special-Album-teasers-documents-1.jpeg') 80% 20%;background-size:cover;"][/border] [border="2px outset grey; padding-left:30px; margin-left:40px; margin-top:-170px; max-width:100px; height:150px; background:URL('https://kpopping.com/documents/bd/1/1333/Joy-Hello-1st-Special-Album-teasers-documents-1.jpeg') 80% 20%;background-size:cover;"][/border][comment] outfit, mood, location, whatever just keep it short [/comment][border='2px outset grey; box-sizing:border-box; height:30px; width:100%; line-height:0px; padding=0; margin-top:13px; display:inline-block; font-size:15px; font-family:"VT323"; color:black;']outfit: link here[/border] [border='2px outset grey; box-sizing:border-box; height:30px; width:100%; line-height:0px; padding=0; margin-top:3px; display:inline-block; font-size:15px; font-family:"VT323"; color:black;']mood: peachy![/border] [border='2px outset grey; box-sizing:border-box; height:30px; width:100%; line-height:0px; padding=0; margin-top:3px; display:inline-block; font-size:15px; font-family:"VT323"; color:black;']location: in ur desktop[/border][/border][border=2 px outset grey; width:60%; height:300px;][/border] [/border]

here is how it looks otherwise:

Processing. . . .

outfit: link here

mood: peachy!

location: in ur desktop

edit: you cannot see where the container ended up without me typing down here,
like this.

 

[Ambiloquous]

Processing. . . .

outfit: link here

mood: peachy!

location: in ur desktop

Spoiler: Code

[border=2px outset grey; padding: 0; margin: auto; width: 50%; max-width: 500px; min-width:240px; height:420px; background: #a0a0a4;][border=0; box-sizing:border-box; margin:0; width:100%; height: fit-content; line-height:10px; background:#000080; font-size:20px; color: white;][font=VT323]Processing. . . . [/font][/border][comment] images below [/comment] [border=0px; display: inline-block; height:330px; max-width:180px; margin-left:10px;][border="2px outset grey; padding-left:30px; margin-top:-15px; max-width:100px; height:150px; background:URL('https://kpopping.com/documents/bd/1/1333/Joy-Hello-1st-Special-Album-teasers-documents-1.jpeg') 80% 20%;background-size:cover;"][/border] [border="2px outset grey; padding-left:30px; margin-left:20px; margin-top:-150px; max-width:100px; height:150px; background:URL('https://kpopping.com/documents/bd/1/1333/Joy-Hello-1st-Special-Album-teasers-documents-1.jpeg') 80% 20%;background-size:cover;"][/border] [border="2px outset grey; padding-left:30px; margin-left:40px; margin-top:-170px; max-width:100px; height:150px; background:URL('https://kpopping.com/documents/bd/1/1333/Joy-Hello-1st-Special-Album-teasers-documents-1.jpeg') 80% 20%;background-size:cover;"][/border][comment] outfit, mood, location, whatever just keep it short [/comment][border='2px outset grey; box-sizing: border-box; height: 30px; width:100%; line-height: 0px; margin-top:13px; display:inline-block; font-size:15px; font-family: "VT323"; color: black;']outfit: link here[/border] [border='2px outset grey; box-sizing: border-box; height: 30px; width: 100%; line-height: 0px; margin-top:3px; display: inline-block; font-size:15px; font-family:"VT323"; color:black;']mood: peachy![/border] [border='2px outset grey; box-sizing:border-box; height:30px; width:100%; line-height:0px; margin-top:3px; display:inline-block; font-size:15px; font-family:"VT323"; color:black;']location: in ur desktop[/border][/border][border=2px outset grey; display: inline-block; width: 56%; height:300px;][/border][/border]

Is this what you want? If so, it's because in the container holding the images and buttons, you didn't add display: inline-block. Adding it to the next container only makes that one display in line, which would be after the one that's not in line. Another reason is that the width: 60% is too wide for the remaining space in the outermost container. The max I could make it while keeping it in the window was 56%. (Also your button/image holding container is too long for the outside container — as seen below — and padding=0 doesn't actually do anything; you're returning to the default padding which is something like 10px, I think. In the container that's out of bounds, you put a space between the 2 and px as well.)

The red block is the original container holding buttons and images.

Processing. . . .

outfit: link here

mood: peachy!

location: in ur desktop

boop boop, here's some text

 

[kaninchen]

that's exactly it, thank you! ah, i had a feeling it was something to do with inline but i didn't know it had to be like that! thank you very much, back to the drawing board.... thanks again :*)