Website breaks on browser zoom

HTML & CSS
1

my website is uploaded at here as you see divs are all over the place and condition gets worst on browser zoom.

The main content part(menu and slider) have styling such that they do not allow anything on there left.

styling for images used in the title bar

#title {
    height : 90px;
    background : #f3f4f5;
    text-decoration : none;
    }
    #title > img.tp {
    float : right;
    }
    #title > img.redzone {
    padding-top : 1%;
    margin-left:15%;
    }
    #title > img.ctoc {
    float : left;
    }
    #title > img.fp {
    position:absolute;
    float:left;
    margin-left:6%;
    margin-top:10px;
    }

styling for the left and right column

#contact_container {
position:absolute;
width : 15%;
margin-left:4.5%;
margin-top:30px;
float:left;
height : auto;
padding-top:2%;
background-image : url(img/transparent.jpg);
}

#content_container {
position:absolute;
padding-top : 2%;
margin-top:30px;
width : 15%;
float:right;
margin-left : 80%;
background-image : url(img/transparent.png);
text-align : center;
}

general styling for menu and slider


#gallery {
border : #ccc solid 1px;
background : #ffffff url(img/panel.jpg) repeat-x bottom center;
width : 920px;
overflow : hidden;
}
#menu2 {
list-style : none;
width : auto;
height : 43px;
background : #014464;
border : #002232 solid 1px;
margin-top : 30px;
margin-right : auto;
margin-bottom : 5px;
margin-left : auto;
padding-left : 30px;
}

How to style images such that there alignment does not change on browser zoom. Any kind of help is appericiated

2

[font=verdana]I hate to tell you this, but zooming isn’t the problem here. The problem is that the design is totally and utterly broken. For me, at 100% it has so much overlap and missing content that it is unreadable. It’s only if I zoom out to 60% that it actually fits together, but of course by then everything is too small to be readable. Maybe if you’ve got an absolutely massively wide monitor and your window maximised then it will fit, but for most people that won’t be the case.

Your design is just too wide, and because it’s got absolutely positioned elements and set widths on everything, it has nowhere to go when given a window that isn’t wide enough, so everything gets layered up. You’ll get just the same effect if you narrow your window as if you zoom in.

Usually when a design has gone as badly wrong as this, it’s easiest to scrap it completely and start over. (I don’t mean scrap the outcome you’re going for, but to scrap the code and CSS). Think about where each of the sections is supposed to be, and how you want the site to change with larger or smaller windows (or as you zoom in/out). Try to avoid absolute positioning wherever possible, because it’s often a problem.[/font]

3

Thanks a lot for replying. It would be helpful if you post me some reference links which I could use as guidelines while redesigning the website.

4

Really, and basic book or other resource on CSS will be of use. I would suggests books. The main thing to understand here is that position: absolute should almost never be used for page layout. It’s only appropriate in very small doses, for special little items. For main page layout, use things like floats.