Stop elements from shifting when resizing window

Question

I've built a header bar for my page. It consists of the element and inside are some elements, , . I can lay everything out nicely but when I resize the browser window everything starts to move and overlap in the header. Giving the header, or even the body a fixed with like "width: 1000px" solves this, but that is screen-size dependent.

How can I have my page such that any resizing of the browser window causes scroll bars to appear to view the hidden content, and where this would NOT be dependent on a hard-wired resolution in pixels.

Answer 1

Give your main div (often your wrap div) a min-width: ...px .

Like this:

<div class="wrap">
    <div class="header">...</div>
    <div class="content">...</div>
</div>

.wrap {
     width: 95%;
     min-width: 900px;
}

In the example above, the wrapper div will always be at least 900px. When the window gets resized to a smaller width, the scrollbars will appear.

If the screen is bigger than 900px, the div will have a 95% width.