Search code examples
htmlcsswidth

CSS width 100% limited to browser window (it doesn't extend to right scrolling area)

This site is full-width and adapts to the size of the browser window. However, once the browser window is smaller than the content displayed, the title gets cut off once you scroll to the right.

The default width of 100% seems to be working for the width of the browser window only, not the width of the page! The same also seems to apply on the vertical axis.

Example

#title
{
  height: 50px;
  color: white;
  background-color: #404040;
}
#content
{
  width: 800px;
  background-color: #f0f0f0;
}
<div id="title">
    TITLE
</div>
<div id="content">
    CONTENT
</div>

Actual result

This is what it looks like when the page is scrolled to the left

1

2

(For the sake of simplicity and privacy, content irrelevant to the question is censored.)

Solution

  • After fiddling a lot with positioning, I eventually came up with something.

    body
{
    position: absolute;
    min-width: 100%;
    min-height: 100%;
}

#menu-background
{
    z-index: -1;
    position: absolute;
    width: 250px;
    height: 100%;
    background-color: #404040;
}

    and the menu background HTML

    <div id="menu-background"></div>

    <body> needs absolute positioning, otherwise the table of the content div will overflow out of the content div. Also, it needs a min-width of 100% to cover both cases: Either the window is smaller, or it's larger.

    The menu works the same way, except that it is a single <div> that spans the entire page.

    This solution works perfectly for both X and Y (menu and title) stretching and background color.