I'm having troubles with the website I'm making. When zooming out, the navigation bar's contact us link is going to the bottom. Each link is set to specific width so I can make it full horizontal but it seems complicated to specify width.

The content which is 800px at size is divided into two div tags, left is 399px(floated left), right 400px(floated right) and the remaining 1px is for the white border located at the center. The problem for the content is just like the navigation bar. The right part is going at the bottom.

This is the site http://angelickp.byethost24.com/AliceAcademy.php.

Recommended Answers

All 6 Replies

I found out what the problem is. When zooming out, the border at the center is resizing. The navigation bar contains lots of border so it messes up too when zooming out. How to prevent this? I really need the border.

What browser are you having this problem in?

Regards
Arkinder

Mozilla Firefox and Internet Explorer.

zoom is not an appropriate or useful test
users set the basefont to their specifications/requirements and expect that websites are current enough in code compliance to adjust around them
current best practice it to use em or % as layout tools
cease using px, the problem will disappear

800px columnn looks ridiculous on this 2600px monitor
800px pushes offscreen in small displays/portable devices

commented: very helpful +3

zoom is not an appropriate or useful test
users set the basefont to their specifications/requirements and expect that websites are current enough in code compliance to adjust around them
current best practice it to use em or % as layout tools
cease using px, the problem will disappear

800px columnn looks ridiculous on this 2600px monitor
800px pushes offscreen in small displays/portable devices

Do you mean i'll use % for image, border size etc.?

He means use em or % for everything. Keep in mind that the actual value outputted by the em unit is based on font size.

An example for the % unit.

div#container {
    border-color: white white -moz-use-text-color;
    border-style: solid solid none;
    border-width: 10px 10px 0;
    margin-left: auto;
    margin-right: auto;
    overflow: auto;
    width: 69%; /* Instead of the 800px you were using */
}

Regards
Arkinder

commented: very helpful +3
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.