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?
<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;
}
