CSS Layout

HTML & CSS
1

Hi Guys, I’ve a newbie… Wanted to know why my header,main content and the Footer Area doesn’t stretch till the end of the browser when the browser is minimized. Here’s attached a screenshot. Here’s my HTML and CSS code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<head>
<link rel="stylesheet" type="text/css" href="style3.css" />
<title>
  Document Title
</title>
</head>

<body>

<div id="container">
	<div id="header">This is the header Content</div>
	<div id="mainContentWrapper">
	<div id="mainContent">This is the main Content </div> <!-- End mainContent -->
	</div>
</div> <!-- End container -->
<div id="footer">This is the Footer Area</div> <!-- End Footer -->

</body>
</html>

* {
margin: 0;
padding: 0;
}

#header{
background-color:red;
height:150px;
width:100%;
}

#mainContentWrapper{
background-color:#FF0;
}

#mainContent {
height:400px;;
width:1002px;
}

#footer {
background-color:#0F0;
height:300px;
width:100%;
}
2

Hi Welcome to Sitepoint :slight_smile:

Your code above is doing exactly as you have told it and the elements have a height of 150px, 400px and 300px respectively exactly as you have specified. What else did you expect to happen?

CSS does what you tell it (most of the time) and if you set fixed heights on your containers then that’s what you get:) I don’t see how your question relates to the viewport and what it has to do with your code above. The code above has nothing to do with how tall the viewport is and will not react to it except to apply vertical scrollbars when the content is below the fold.

It is unlikely that your approach of fixed heights is going to be of any use to you as CSS is mainly about letting content dictate the height of elements and not setting them in stone to begin with unless its for a fxed height image or similar. For text content you should let the page grow and shrink with the content.

I think that you may be looking for a sticky footer approach but that is not as simple and straight forward as it may seem. See the CSS Faq (in my sig) for a link to the sticky footer faq for more information on how this is achieved. The drawback is that the footer must be a fixed height.

When designing with css you should let the content dictate to some extent how the page will behave so get some html structure and content in place first and then you can decide how to display it. Try to let things live and breathe on the page and don’t confine fluid text to fixed height elements as that is a recipe for disaster.

Maybe if you can explain what you really need then we can point you in the right direction a little better :slight_smile:

3

Hi Sir! Thank you for your reply! =) Sorry for the confusion, I was actually referring to the width of the site. Basically I wanted to stretch the red,yellow and green areas all to the way to the right edge of the browser. But as the thumbnail shows, it doesn’t extend all the way. I have set the main content width to 1002 pixels, is this the one causing the background to stop before reaching the edge of the browser. I hope I’m not too confusing you! =) Thanks

4

You’ve set some things to width: 100%. That’ll mean “100% of viewport” so not greater when scrolling.

Do you get what you want with header and footer if you simply remove the width declarations?

and do you get what you want if you set the wrapper to min-width = themaincontent’s width? (or container’s min-width to maincontent’s width?)

5

Hi,

OK I see what you mean and as Stomme mentioned above you will need ot set a min-width equal to the largest element in the page on containers that do not have a fixed width.

e.g.


#container,#footer{min-width:1002px;}
6

Thanks guys! It works! :slight_smile: I am just curious to why the footer area doesn’t stretch up to the edge of the browser if I don’t specify the min-width. Isn’t setting it to 100% sufficient? Thanks!

7

hi
use this…


overflow:hidden;
min-width:..px;
8

Hi,

You have to think about what you are asking the browser to do in a logical way.:slight_smile:

First of all you tell it you want the element to be 100% wide. Assuming that there is no parent of the element set to anything different then you get an element that stretches horizontally from browser edge to browser edge (it does not stretch outside the browser edge).

Now somewhere in your page you have an element with a fixed pixel width that at some stage sticks outside the viewport (hence the horizontal scrollbar you see). This area outside the viewport refers to anything greater than 100% but the element in question is set to only 100% wide (or auto) and cannot possibly reach to 150% or 200% magically. The element is 100% of the viewport width and remains that width while you scroll into the area that is greater than 100%.

The solution is therefore to ensure that any fluid width percentage containers have a min-width equivalent to the largest fixed width element on your page if it concerns you that you get blank space when horizontally scrolling.

To put it simply a percentage width container bases its width on the containing block which is the viewport in your case. When you close the window the container’s width gets smaller and smaller. The fact that something else sticks out of the viewport is of no concern to that element.:slight_smile: