Entrance Chat Gallery Guilds Search Everyone Wiki Login Register

Welcome, Guest. Please login or register. - Thinking of joining the forum??
October 03, 2025 - @984.00 (what is this?)
Activity rating: Four Stars Posts & Arts: 53/1k.beats Unread Topics | Unread Replies | My Stuff | Random Topic | Recent Posts Start New Topic  Submit Art
News: :4u: ~~~~~~~~~~~  :4u: Guild Events: PowerPC Activity Week!

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


« previous next »
Pages: [1] Print
Author Topic: why are these elements out of alignment?  (Read 365 times)
fairyrune
Casual Poster ⚓︎
*
View Profile WWW


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

Guild Memberships:
Artifacts:
Joined 2025!
« on: September 21, 2025 @749.26 »

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.



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" ☼
IndigoGolem
Jr. Member ⚓︎
**
View Profile WWW


⛺︎ My Room

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

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

fairyrune
Casual Poster ⚓︎
*
View Profile WWW


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

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

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" ☼
akchizar
Newbie ⚓︎
*
View Profile WWW

⛺︎ My Room

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

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
Casual Poster ⚓︎
*
View Profile WWW


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

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

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" ☼
Pages: [1] Print 
« previous next »
 

Melonking.Net © Always and ever was! SMF 2.0.19 | SMF © 2021 | Privacy Notice | ~ Send Feedback ~ 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