CODEWITHSUNDEEP
htmlcsslayoutoverflow
ARV
ARV

Reputation: 6867

CSS/HTML - overflow in a single column layout on browser resizing

I am trying to get a single column layout to work. The page has three sections, a header area, a content area, and a footer area. Each of the sections have different background images that I want to span the entire width of the viewable area on user's screens. I have split the sections into divs as shown in the following code so that the content area in the middle can grow as the content grows.

My problem is that as I increase the size of the text by pressing ctrl + in the browser (Chrome), the carousel portion overflows the background area. Given below are screenshots of before and after resizing.

The HTML/CSS code mockup is simple, but I am not able to figure out why the overflow happens. Any ideas? I am a newcomer to CSS/XHTML - are there any other standard ways of achieving what I am trying to accomplish?

Before resizing

After resizing

<html>
<head>
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>

<div id="header_container">
    <div id="header">
        Header text
    </div>
</div>

<div id="content_container">
    <div id="content">
        The content

        <div id="carousel">
        The carousel
        </div>

        <div id="clear_div">
        </div>
    </div>
</div>

<div id="footer_container">
    <div id="footer">
        The footer
    </div>
</div>

</body>
</html>

Here is the CSS for the HTML:

#header_container {
    width: 100%;
    background-color: green;
}

#header {
    width: 960px;
    margin: auto;
}

#content_container {
    width: 100%;
    background-color: lightblue;
}

#content {
    width: 960px;
    margin: auto;
    position: relative;
}

#carousel {
    float: right;
    width: 300px;
    height: 200px;
    background-color: red;
}

#clear_div {
    clear: both;
}

#footer_container {
    width: 100%;
    background-color: lightgray;
    clear: both;
}

#footer {
    width: 960px;
    margin: auto;
}

Upvotes: 0

Views: 851

Answers (1)

Alexey Ivanov
Alexey Ivanov

Reputation: 8236

The problem is that "width: 100%;" of #content_container (blue background) is computed not from actual content width, but from browser window width. So the moment then window width become less than #content width (fixed at 960px), #content starting to came out from background.

Example:

  1. You browser window width is 500px.
  2. #content_container, #header_container and #footer_container "width: 100%" also become 500px.
  3. #content width = 960px, which is 440px more than #content_container width.
  4. So right side of #content come out from #content_container for 440px.

Then you increase size in browser same thing happens (#content width become more than #content_container width).

You can fix it, for example, by adding property "min-width: 960px;" to #content_container, #header_container and #footer_container so they will be always same width or more.

EDIT: See live example with min-width: http://jsfiddle.net/Xqtuh/

Upvotes: 1

Related Questions