can't stop a div from moving

[tarraxahum]

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. 

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

[Melooon]

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!

[tarraxahum]

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  )

[Melooon]

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!)

[tarraxahum]

  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!