how to make boxes stay in the same place when window shrinks???

Hello everyone,

on my home page http://motorbikecentral.com/

on my screen the boxes in the right bar are all in the right place but when i go onto my laptop (smaller screen) and the boxes go into the side and a slide bar at the bottom comes up

i really need this to stop, can someone help me with the css please to stop this from happening

#rightbar {
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: ;
    margin-right: ;
   
    padding: 0px;
    width: 30%;
    text-align:center;
    min-height: 200px;
    float: left;
}
#adv {
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: auto;
    margin-right: auto;
    padding: 2px;
    border:1px solid grey;
    float: left;
    width: 335px;
}
#follow {
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: auto;
    margin-right: auto;
    padding: 2px;
    border:1px solid grey;
    float: left;
    width: 335px;
}
#feeds {
float: left;
}

HTML:

 

on top of the invalid CSS (you can't just leave a value entry like you did on the margins), you're using percentage width, which ends up based on screen width. IF you want fixed content to not go changing it's position, that rightbar either needs a fixed width, or at the very least an elastic one.

In general though, your page is built with flawed/broken methodologies... mulitple H1's (which yes 5 allows, but only with 5's allegedly useful structural tags), multiple ID's (ID's are unique, you can only use them ONCE in the markup), bold tags doing heading's job, bold tags inside a heading for no readon, headings around non-heading content, elements like IFRAME and attributes like TARGET that have no business in modern markup, static style inlined in the markup, multiple DIV for no good reason, incomplete/inaccessible forms, lack of media type on your CSS embed, uselessly vague name attributes, stupid javascript tricks doing label's job, invalid values on your IMG tag's width and height attributes...

... and that's before we even talk about the pointless use of the HTML 5 doctype since, to be frank, you've basically got HTML 3.2 there.

Placing that image? Least of your issues.

 

okay, well im really new to coding, do you think you would be able to help me?

 

#main {
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: auto;
    margin-right: auto;
    padding: -2px;
    width: 70%;
    min-height: 500px;
    background-color: white;
    float: left;
}
#latestcontent {
    width: 50%;
    max-height: 50px;
}
#newposts {


}
#newestpostleft {
    margin-top: 0px;
    margin-bottom: 0px;
    float: left;
    width: 70%;
}
#newestpostright {
    margin-top: 0px;
    margin-bottom: 0px;
    float: right;
    width: 30%;
}
#rightbar {
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
    width: 30%;
    background-color: #fff;
    text-align:center;
    min-height: 100px;
    float: left;
}
#adv {
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: auto;
    margin-right: auto;
    padding: 2px;
    background-color: #fff;
    border:1px solid grey;
    float: right;
    width: 335px;
}
#follow {
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: auto;
    margin-right: auto;
    padding: 2px;
    background-color: #FFF;
    border:1px solid grey;
    float: right;
    width: 335px;
}
#feeds {
margin-left: auto;
margin-right: auto;
border:1px solid grey;
background-color: #FFF;
float: right;
}

Code (markup):

Well with the changes I did, this fixed with me. I tested it both ways: full screen, and window mode, and both were perfect. So let me know if it worked.

Edit: You may be wondering why there's more CSS provided. Well the CSS is from your actual website, and since the problem wasn't just the div's you provided, I had to code my way up into your #main.

 

position:fixed will do the job.