How do I get divs that won't move upon using different screen sizes or zooming

Question

I am trying to make a that won't move or distort when I move from one computer to another tablet.

Here is my CSS.

.container_12,.container_16 {
margin-left:auto;
margin-right:auto;
width:960px;
}

.grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,.grid_10,.grid_11,.grid_12,.grid_13,.grid_14,.grid_15,.grid_16 {
display:inline;
float:left;
margin-left:10px;
margin-right:10px;
border: 1px solid black;
}

.container_1 .grid_1{
width: 300px;
margin: 0 0 0 300px;

}

This is all going to be used later.

This is the html:

<div class="container_1">
<div class="grid_1">

test<br> test<br>test
</div>
</div>

I decided to use tables on my site, bad idea, I'd like something that is scalable, and so far DIVs aren't doing it for me.

What am I missing?

When I use the zoom in/out function, the test 'box' moves around with the border. I tried switching from integers to percentages, no luck. I tried goofing around with the 960 layout, which is where I am now. Been at this for the last 6 hours. no such luck. Thank you so much!

Answer 1

You've to create a cross-browser responsive design with HTML5 & CSS3 media queries.

OVERVIEW

The page's container has a width of 980px which is optimized for any resolution wider than 1024px. Media query is used to check if the viewport is narrower than 980px, then the layout will turn to fluid width instead of fixed width. If the viewport is narrower than 650px, it expands the content container and sidebar to fullwidth to form a single column layout.

You can read this basic tutorial at webdesignerwall.com