Artifacts Gallery Guilds Search Wiki Login Register

Welcome, Guest. Please login or register. - Thinking of joining?
June 06, 2026 - @175.41 (what is this?)
Activity rating: Four Stars Posts & Arts: 73/1k.beats Random | Recent Posts | Guild Recents
News: ozwomp is requesting your location :ozwomp: [Agree] Guild Events: Happy Pride Month Fibre Artists!

+  MelonLand Forum
|-+  Life & The Web
| |-+  ✁ ∙ Web Crafting
| | |-+  ☔︎ ∙ I need Help!
| | | |-+  why are these elements out of alignment?


« previous next »
Pages: [1] Print Embed
Author Topic: why are these elements out of alignment?  (Read 1271 times)
fairyrune
Full Member ⚓︎
***
View Profile WWWArt


we live to make the impossible possible!
⛺︎ My Room
iMood: fairyrune
Matrix: Chat!

Guild Memberships:
Artifacts:
Dino FossilJoined 2025!
« on: September 21, 2025 @749.26 » Embed

ahhhh i feel like i'm goin crazy!!!

i have some html for my index page i'm setting up and i'm trying to make a big, main div set the width for all elements under it. like the main div would be 950px, and if i set everything under it to 100%, then it'd also be 950px.

but it's out of alignment!!

how is this happening?? i am entirely self taught on scraps of code and old knowledge so i imagine i'm forgetting something important.

https://files.catbox.moe/k5tvuw.png

hopefully, this shows what i mean!!
« Last Edit: September 21, 2025 @955.66 by fairyrune » Logged

☾ "you want to run - i'll run with you" ☼
https://files.catbox.moe/ivdca8.gifhttps://files.catbox.moe/qlgdtd.gifhttps://files.catbox.moe/ji1nvt.gifhttps://files.catbox.moe/9ypmrn.gifhttps://files.catbox.moe/3im96c.gif
IndigoGolem
Sr. Member ⚓︎
****
View Profile


What's personal text?
⛺︎ My Room

Artifacts:
Joined 2025!
« Reply #1 on: September 21, 2025 @843.84 » Embed

I'm pretty sure setting the height of <html> doesn't do anything. You'd want to set the height (and width, if that's not just 100%) of the <body>. And height doesn't like to just work in my experience, you have to use different units like vh (view height, percent of the window's height) or px (pixels). That said, i also didn't think you could set a background image by styling <html> and you made that work. So feel free to not listen to me, i don't know what i'm doing.

Since the width of the flexbox and mainbox are supposed to be 950px, you could try just setting that in px. That will make the site harder to use on very small screens, but i think anything bigger than a cell phone or NDS should still display it fine.

And i think i see your problem. The mainbox is set to be 400px wide in index.css. Changing that to 100% makes it take up the full flexbox, at least here in LibreWolf (and Firefox).
Logged

-Indigo, Anve Ozo %
fairyrune
Full Member ⚓︎
***
View Profile WWWArt


we live to make the impossible possible!
⛺︎ My Room
iMood: fairyrune
Matrix: Chat!

Guild Memberships:
Artifacts:
Dino FossilJoined 2025!
« Reply #2 on: September 21, 2025 @954.70 » Embed

And i think i see your problem. The mainbox is set to be 400px wide in index.css. Changing that to 100% makes it take up the full flexbox, at least here in LibreWolf (and Firefox).

ohhh i should add a bit more to my main post, i think. the problem is that the flexbox's right border isn't aligning with the titlebar, and the image between them is also out of alignment. (there's a dozen ways i could style the image there i know  :cry: )

my only guess is. perhaps the padding...? i had issues with that adjusting the width. but it wouldn't explain the image - i checked and the image has no stray transparency sitting at the left side... ?!

also: i have NO idea where that height came from. that's bizarre LOL why did i put that there? who knows. but you're correct, it doesn't seem to do anything!
Logged

☾ "you want to run - i'll run with you" ☼
https://files.catbox.moe/ivdca8.gifhttps://files.catbox.moe/qlgdtd.gifhttps://files.catbox.moe/ji1nvt.gifhttps://files.catbox.moe/9ypmrn.gifhttps://files.catbox.moe/3im96c.gif
akchizar
Newbie ⚓︎
*
View Profile WWW

⛺︎ My Room

Artifacts:
Joined 2025!
« Reply #3 on: September 22, 2025 @991.64 » Embed

You've got a box-sizing issue! Your image's width is set without considering its padding (which is 5px on either side). If you set its box-sizing to border-box (as your following div is), it should line up again.
Logged
fairyrune
Full Member ⚓︎
***
View Profile WWWArt


we live to make the impossible possible!
⛺︎ My Room
iMood: fairyrune
Matrix: Chat!

Guild Memberships:
Artifacts:
Dino FossilJoined 2025!
« Reply #4 on: September 23, 2025 @618.03 » Embed

You've got a box-sizing issue! Your image's width is set without considering its padding (which is 5px on either side). If you set its box-sizing to border-box (as your following div is), it should line up again.

bless you!! adding box-sizing: border-box to all the affected elements sorted it! thank you :) padding is my NEMESIS lol  :drat:
Logged

☾ "you want to run - i'll run with you" ☼
https://files.catbox.moe/ivdca8.gifhttps://files.catbox.moe/qlgdtd.gifhttps://files.catbox.moe/ji1nvt.gifhttps://files.catbox.moe/9ypmrn.gifhttps://files.catbox.moe/3im96c.gif
Pages: [1] Print Embed 
« previous next »
 

Melonking.Net © Always and ever was! SMF 2.0.19 | SMF © 2021 | Privacy Notice | Send Feedback | Supporters ♥ Forum Guide | Rules | RSS | WAP | Mobile


MelonLand Badges and Other Melon Sites!

MelonLand Project! Visit the MelonLand Forum! Support the Forum
Visit Melonking.Net! Visit the Gif Gallery! Pixel Sea TamaNOTchi
MelonLand @000

Want to Login or Join ?

Minecraft: Online
Join: craft.melonking.net