CODEWITHSUNDEEP
htmlcss
GeekedOut
GeekedOut

Reputation: 17185

Layout background and foreground don't adjust at the same rate when browser increases/decreases

I have this test page that I am working from:

128.48.204.195:3000

The problem I am having is with the yellow bar across the top. If you make your browser narrow enough, the yellow bar stops being adjusted with the rest of the screen, and the blue buttons begin sticking out of the page and the yellow bar.

How can I make the yellow bar and the buttons adjust at the same rate and not have things stick out?

Upvotes: 0

Views: 42

Answers (1)

Loktar
Loktar

Reputation: 35319

Change .nav width to 100%. Then it will always fill its content. You had a static size set, so once the containing element was smaller it would keep its size thus sticking out.

.nav_bar .nav {
    width: 100%;
    height: 40px;
    margin: 0 auto;
    position: relative;
    z-index: 20;
}

Or like Thirtydot pointed out below you can remove width altogether.

Upvotes: 1

Related Questions