Home/ Questions/Q 8189997
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T03:28:17+00:00

My site is both css and html verified but on browser zoom alignment breaks.

  • 0

My site is both css and html verified but on browser zoom alignment breaks. I am not a css pro. Please tell me what css code need to be changed. Website is here

This is the styling for images used on 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;
    }

*This is styling for left and right columns.*

#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);
}
#contact_container > img
{
    padding-left:26%;
}
#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;
}
#content_container > hr
{
    width:80%;
    border-style:groove;
}
#contact_container > hr
{
    width:80%;
    border-style:groove;
}
#content_container > ul
{
    text-align:center;
}
#contact_container > ul
{
    text-align:center;
}

These are the 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;
}

Any kind of help is appreciated.
Even some good references will be helpful

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It’s not just on-zoom that this breaks. It also breaks when the browser width is changed. See screenshot here: https://i.stack.imgur.com/p0BXY.jpg

    You’ve got an interesting mixture of relative/absolute-positioned elements along with some floats. Your best bet would be to strip out those differing styles, get your content in the correct order (left to right) in your markup, and then take it from there.

    Here’s a really useful example of a fluid-width, three-column CSS layout, have a look at how it’s been done there (and read the attached article), that will really help you get your layout working well.

    http://www.maxdesign.com.au/articles/css-layouts/three-liquid/

    Good luck!

    • 0