Home Entrance Everyone Wiki Search Login Register

Welcome, Guest. Please login or register. - Thinking of joining the forum??
April 24, 2024 - @168.09 (what is this?)
Forum activity rating: Four Star Posts: 51/1k.beats Unread Topics | Unread Replies | Own Posts | Own Topics | Random Topic | Recent Posts
News: :ha: :pc: Hello Melonland! :pc: :happy:

+  MelonLand Forum
|-+  World Wild Web
| |-+  ✁ ∙ Web Crafting
| | |-+  ☔︎ ∙ I need Help!
| | | |-+  can't stop a div from moving


« previous next »
Pages: [1] Print
Author Topic: can't stop a div from moving  (Read 433 times)
tarraxahum
Full Member ⚓︎
***


Xx_O_o_xX

SpaceHey: Friend Me!
StatusCafe: tarraxahum
iMood: tarraxahum
Matrix: Chat!

View Profile WWW

First 1000 Members!Joined 2022!
« on: June 08, 2023 @628.62 »

I think at this point I just need a permanent thread like "why does nothing remain where I tell it to be?!" 'cause it's the same old story

Anywho, wanted to update my Tumblr theme, found a nice template but it was all messed up on my screen resolution, so I re-did the positioning the same way I programmed divs on my websites (through the display:inline-block stuff)

Except only two out of three divs remain where they should be when changing screen resolution, and the third one, despite seemingly having all the same css qualities, is jumping all over the page and I give up. The fact that it's not my code initially only makes it more confusing.

Help.  :drat:

The page is here, the css is right in the source code 'cause tumblr. The one that gives me trouble is "sidebar2". I just want it to be stuck in a fixed position like the other two (optimization be damned for now) T_T

the relevant css fragments separately (hopefully it gets pasted okay):

Spoiler
Code
#wrapper{
width: 1000px;
position: absolute;
display: block;
}
 
#sidebar{
    display: inline-block;
padding:-10px;
width:300px;
float:left;
    position: relative;
    left: 5px;
    top: 60px;
text-align:center;
height:610px;
{block:ifnotleftsidebarbgcover}
background-repeat:repeat;
{/block:ifnotleftsidebarbgcover}
{block:ifleftsidebarbgcover}
background-size: cover;
{/block:ifleftsidebarbgcover}
background-color:{color:left sidebar};
background-image: url('{image:left sidebar bg img}');
border:{text:container border size}px {select:container border} {color:container border};
}
 
#sidebar2{
    display: inline-block;
width:300px;
padding:-10px;
float:right;
clear:both;
    position: relative;
    left:50px;
    top:60px;
text-align:center;
height:610px;
{block:ifnotrightsidebarbgcover}
background-repeat:repeat;
{/block:ifnotrightsidebarbgcover}
{block:ifrightsidebarbgcover}
background-size: cover;
{/block:ifrightsidebarbgcover}
background-color:{color:right sidebar};
background-image: url('{image:right sidebar bg img}');
border:{text:container border size}px {select:container border} {color:container border};
}
 
#sidebar3{
width:282.5px;
padding:-10px;
text-align:center;
height:275px;
{block:ifnotsideboxesbgcover}
background-repeat:repeat;
{/block:ifnotsideboxesbgcover}
{block:ifsideboxesbgcover}
background-size: cover;
{/block:ifsideboxesbgcover}
background-color:{color:side boxes};
background-image: url('{image:side boxes bg img}');
border:{text:side boxes border size}px {select:side boxes border} {color:side boxes border};
}
 
#sidebar4{
width:282.5px;
padding:-10px;
text-align:center;
height:275px;
{block:ifnotsideboxesbgcover}
background-repeat:repeat;
{/block:ifnotsideboxesbgcover}
{block:ifsideboxesbgcover}
background-size: cover;
{/block:ifsideboxesbgcover}
background-color:{color:side boxes};
background-image: url('{image:side boxes bg img}');
border:{text:side boxes border size}px {select:side boxes border} {color:side boxes border};
}
 
#content{
    display: inline-block;
background:{color:container};
background-image: url('{image:container bg img}');
    {block:ifcontainerbgcover}
background-size: cover;
    background-repeat: no-repeat;
    {/block:ifcontainerbgcover}
border:{text:container border size}px {select:container border} {color:container border};
width:528.5px;
position: relative;
    top: 60px;
    left: 350px;
padding:5px;
height:600px;
overflow-y:scroll;
}
[close]

https://pastebin . com/bURHptBa <--- and here's the original code just in case, if checking what exactly I re-made helps
Logged



"Why change the past, when you can own this day?" (c)
Melooon
Hero Member ⚓︎
*****


So many stars!

SpaceHey: Friend Me!
StatusCafe: melon
iMood: Melonking
Itch.io: My Games

View Profile WWW

First 1000 Members!spring 2023!Squirtle!!!!MIDI WarriorMIDI Warrior1234 Posts!OzspeckCool Dude AwardRising Star of the Web AwardMessage BuddyPocket Icelogist!OG! Joined 2021!The Smallest Ozwomp Known To ManBug!
« Reply #1 on: June 08, 2023 @639.18 »

You have "float: right" on #sidebar2 (the one that's moving) - float: right means it will always stick to the right side of the browser, meaning it will move if the browser is resized (since everyone resizes browsers from the right) - sooooo you need to change float: right to float: left! That will mess up your layout, but u can fix that by spacing things out with "left: 330px" or whatever distance you want it to be from the left side of the screen. (It will still snap to the bottom if your screen is not wide enough)



Also looking at ur code.. you might wanna do some research into CSS inheritance/cascading - you've got a lot of duplicate codes that might be making things more confusing for yourself!

For those who don't know: the C in CSS means Cascading - this means that things at the top "fall" down onto things under them:
So if you do
Code
<div id="my-div1"></div>
<div id="my-div2"></div>

<style>
#my-div1, #my-div2 {
  color: red;
}

#my-div2 {
  background-color: green;
}
</style>
Both divs will have red text, but only #my-div2 will have a green background - this is SUPER useful because it means you should never have to write the same value twice and you can make much cleaner style code!
Logged


everything lost will be recovered, when you drift into the arms of the undiscovered
tarraxahum
Full Member ⚓︎
***


Xx_O_o_xX

SpaceHey: Friend Me!
StatusCafe: tarraxahum
iMood: tarraxahum
Matrix: Chat!

View Profile WWW

First 1000 Members!Joined 2022!
« Reply #2 on: June 08, 2023 @645.32 »

Is there any way no make it NOT snap to bottom even if the screen is small? Like the #content one currently doesn't

Also yeah I figured the rest of the code is probably messy as well - that's 'cause it's not mine! (Well, mine is usually also messy, but you get it). Thanks, I should probably look through it more closely later.

(Also thank you for always helping out with these, you're a savior  :4u: )
Logged



"Why change the past, when you can own this day?" (c)
Melooon
Hero Member ⚓︎
*****


So many stars!

SpaceHey: Friend Me!
StatusCafe: melon
iMood: Melonking
Itch.io: My Games

View Profile WWW

First 1000 Members!spring 2023!Squirtle!!!!MIDI WarriorMIDI Warrior1234 Posts!OzspeckCool Dude AwardRising Star of the Web AwardMessage BuddyPocket Icelogist!OG! Joined 2021!The Smallest Ozwomp Known To ManBug!
« Reply #3 on: June 08, 2023 @648.01 »

Is there any way no make it NOT snap to bottom
So you have a #wrapper (which ushualy means its intended to wrap everything) - but only the first #sidebar is in it, the #content and #sidebar2 are not! So if you put all of them in the #wrapper and then give it a fixed width, that will stop it from snapping (That also might actually fix your first issue - and it would allow you to centre everything if you wanted!)
Logged


everything lost will be recovered, when you drift into the arms of the undiscovered
tarraxahum
Full Member ⚓︎
***


Xx_O_o_xX

SpaceHey: Friend Me!
StatusCafe: tarraxahum
iMood: tarraxahum
Matrix: Chat!

View Profile WWW

First 1000 Members!Joined 2022!
« Reply #4 on: June 08, 2023 @654.49 »

 :ohdear: welp no wonder I couldn't style it in relation to the wrapper if it wasn't even in it (WHY wasn't it in the wrapper...)

Thank you Melon!  :ozwomp:
Logged



"Why change the past, when you can own this day?" (c)
Pages: [1] Print 
« previous next »
 

Vaguely similar topics! (3)

Moving Eyeballs!

Started by dotmidiBoard ⁇ ∙ Tutorials

Replies: 4
Views: 920
Last post June 07, 2023 @645.73
by ToxicMolly
Should we stop writing long posts?

Started by Icey!Board ✑ ∙ Writers Corner

Replies: 9
Views: 964
Last post March 07, 2023 @423.50
by Guest
FromSoftware / Soulsborne Games

Started by sigBoard ♖ ∙ Video Games

Replies: 5
Views: 523
Last post March 09, 2023 @990.24
by Guest

Melonking.Net © Always and ever was! SMF 2.0.19 | SMF © 2021, Simple Machines | Terms and Policies Forum Guide | Rules | RSS | WAP2


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