When Window Size Is Smaller Elements Overlap Eacho

Question

I have designed a website and am a little bit stumped right now.

If you view the website at:

http://www.noxinnovations.com/portfolio/charidimos/

If you change the size of the window you will notice the Navigation overlaps the logo/header.

Anyway to change this? What I want to do virtually is to make the window have a scroll bar appear if that is possible.

Any ideas?

Thank you :-D.

Answer 1

If you want your navigation not to overlap, you can do the following

#navigation {
width: 500px;
height: 100px;
padding-top: 52px;
position: fixed;    // CHANGE FROM RELATIVE TO FIXED
left: 770px;        // ADD THIS BIT OF POSITIONING (ADJUST AS NECESSARY)
float: right;       //REMOVE THIS FLOAT
text-align: center;
vertical-align: middle;

}

Answer 2

It's your width: 100%; in your #header element that's causing your strange overflow behavior. Place your #logo and #navigation elements inside of another div with a fixed height and width that sits inside of the #header, then give your #header the property overflow: hidden; and that should fix you right up.