website layout

[rajesh_26]

http://epds.telangana.gov.in/FoodSecurityAct/

this website is responsive but when iam zooming in and zooming out all html elements are messing up
any one any sugesstions are appreciated thanks in advance

[ryantroop]

In particular, I believe you are talking about the header image --

You have it set to width 100% which means on a 1980 width screen, you image (which is 948px) gets stretched to over double its size. You cant just set width to 100% without a container that has a max size of the image, or that scales vertically to match the horizontal shift (but with jpg, even doing that will cause artifacting/blurring).

You will likely need another container around the image that has the width 100%, and then center the image within that container - that way the image stays its intended size (or a fixed size), and the container will grow around it and fill up the extra space as needed based on the browser's (and user's monitor) size.

[rajesh_26]

When i am zomming in and out all divs are going wrong positions
and the webpage looking different in chrome ,mozilla and IE when i visiting this page particularly at 50% view in IE and chrome

[ryantroop]

This is because you are using floats for your layout.

Now, this is very difficult to give you good advice on how to approach this for a couple reasons... the biggest being, I do not know your requirements, your time frame, nor your target audience (including what browser support you need). There are SO many options on how to do this, but what you are looking for is called the "holy grail" layout (google it). You will have to pick the solution that fits your needs.

There are plenty of examples on how to accoplish it, and keep the content responsive.