如何扩展div的正确宽度？

Question

I want to expand the right width of a div to 100% (look at the screenshot, my div is red), I have tried with:

HTML example:

<header>
    <nav>
        <ul>
            <li>Menu</li>
            <li>Menu</li>
            <li>Menu</li>
        </ul>
    </nav>
    <aside>
        <h1>Logo</h1>
    <aside>
</header>

CSS:

header {
    width: 1024px;
    height: 395px;
    margin: 0 auto;
}

nav {
    height: 60px;
    width: 690px;

    position: absolute;
    top: 20px;
    right: 0;

    background:red;
}

This works fine but when i try to zoom out (ctrl -) the menu navigation list go out from the container. The logo remains centered but nav not.

Thanks for any help!
and sorry for my bad english.

Answer 1

I think you are looking for this: jsfiddle . Put position: relative to your header. After that your nav's positioning will behave relative to your header. And for the correct alignment change your nav's top: 20px to top: 0 .

Answer 2

If you want that red bar will always extend to the right margin of window, even if you enlarge and narrow the Browser window, you can set width of this bar to a very high value (for example 500%). This will extend bar a lot to right but will add an horizontal scrollbar. So set the following to simply hide overflow:

html,body
{
   overflow-x:hidden;
}