Reinspire

You are viewing an archived page from the 1st version of my site, but I've started over. You can find the latest content and design at www.reinspire.net, or read all about the relaunch here.

CSS Vertical Stretch

Update: Due to Microsoft’s release of IE 7, parts of this article have become outdated. Please be aware that the * html hack for IE 6 causes some issues in IE 7. As an alternative, the best way to apply CSS rules for IE 6 is to use a separate stylesheet that is only read by IE 6 (or lower). Please read my article “Serving Up IE Specific Stylesheets” for more information. To apply the same rules that are listed with a * html hack below, remove the * html portion of the CSS rule and put the rest in your IE 6 stylesheet. If you have any remaining questions, feel free to contact me.

An often asked question that I’ve come across frequently is how to make a page stretch the entire height of the browser window if there is not enough content to make it stretch.

In ‘the olden days’ it was easy to just make a table and give it a 100% width/height to make it take up the entire viewport of the browser. Well, those days are behind us now, so we need to create that same solution using only CSS.

It’s not particularly difficult to accomplish, but there are some intricacies to address when we try to make these techniques compatible with most browsers.

The Out-Dated Method

The old way of doing things was to just create table and give it a height of 100%.

<table width="750" height="100%">
    <tr>
        <td width="750" height="100%">
            <p>Content Here</p>
        </td>
    </tr>
</table>

The CSS Method

Common thinking would suggest that you’d just have to give the div a 100% height. The problem is that CSS needs to have the parent element’s height defined.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>CSS 100% Height Example</title>
</head>
<body>
    <div id="Content">
        <p>Content Goes Here</p>
    </div>
</body>
</html>

CSS:

html, body {
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    text-align: center;
}

First, we set the height of the html and body elements to 100%. This will ensure that Firefox/Mozilla/Opera render your Content layer’s height properly. (Remember, CSS requires the parent element’s height attribute to be set, that’s why we have to set the html and body element height). Next, I’ve removed the default margin and padding from the body of the page. Also, I’ve given the body a text-align property of center to create a centered layout.

#Content {
    margin: 0 auto;
    text-align: left;
    width: 750px;
    height: 100%;
    background: #CCC;
}

I’ve given the content layer a width of 750 pixels and a height of 100% of the viewport. The margin and text align properties are there to complete the centered layout. I’ve also added a background color so that you can see the effect of the 100% height.

Click here to see our example so far.

Centered Splash Page

For the most part, the most useful reason to have a 100% height layer is to center content vertically. This usually happens when creating a splash page, or a centered image.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>CSS 100% Height :: Splash Page</title>
</head>
<body>
    <div id="Container">
        <div id="Splash">
        </div>
    </div>
</body>
</html>

CSS:

html, body {
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    text-align: center;
    min-height: 400px; /* For Mozilla/Opera/Safari */
}

#Container {
    position: relative;
    margin: 0 auto;
    text-align: left;
    width: 750px;
    height: 100%;
}

#Splash {
    position: absolute;
    width: 750px;
    height: 400px;
    top: 50%;
    margin-top: -200px; /* Half of splash height */
    background: #CCC;
}

Click here to see the example.

More than enough content

Going back to our first example, what would happen if there was more than enough content to make the page stretch to 100% height? Well, that really depends on which browser you’re using. If you’re using IE, it should look fine because IE treats height as a minimum height and automatically expands. Firefox/Safari/Opera needs to have the minimum height explicitly set though, otherwise it just treats height as the height. If you’re using Firefox/Safari/Opera, click here to see what our first example would look like with ‘more than enough’ content.

The fix is very simple, but requires one small hack to accomodate for IE. The HTML code is exactly the same, but the CSS adds a few lines of code.

#Content {
    ...
    min-height: 100%;
    height: auto;
}

/* Hack for IE */
* html #Content {
    height: 100%;
}
/* End IE Hack */

First, I’ve changed ‘height: 100%;’ to ‘min-height: 100%;’ so that the layer will always be a minimum height of 100%. IE ignores the min-height property, so we don’t have to worry about it causing problems. Secondly, I’ve set the height of the layer to ‘auto’ which will cause it to automatically expand if there is more than enough content.

Thirdly, because I set the height to auto, I have to reset the height to 100% for IE.

Click here for the example. (Note: IE users will see no difference).

Notes:

These techniques use some CSS2 properties, which means that older browsers will not fully support these methods. Also, it means that IE5/Mac support is sketchy at best.

Posted in: CSS, CSS Tips, Web Development

Comments

Globally Recognized Avatar1. Jo - November 10, 2005, 1:41 PM

suppose you have a three column layout where all columns are layers, nicely wrapped by a wrapper div. How do you make the wrapper div stretch it’s height according to the column that has the biggest height?

Globally Recognized Avatar2. Jonathan Eckmier - November 12, 2005, 3:45 PM

Well, I’m assuming you’re using floating layers for your columns, and in that case you’d just want to have a div at the bottom (like a footer) that clears your floats. The footer would have to be inside the ‘wrapper’ layer.

The code would look like this:

#footer {
clear: both;
}

That will cause the wrapper to ‘stretch’. Hopefully that answers your question, but without really knowing your exact situation, it’s hard to give a definite response.

Globally Recognized Avatar3. tao - December 15, 2005, 5:48 PM

thanks you. this has helped me tremondously.

Globally Recognized Avatar4. Jonathan Eckmier - December 17, 2005, 6:07 PM

tao: You’re welcome, and thanks for letting me know. It’s always nice to know when my thoughts or solutions have been able to help people out.

Globally Recognized Avatar5. Qk@c - February 20, 2006, 12:12 PM

Hi!

I have a problem, maybe you could help me out.

I have a wrapper layer which contains two column layers, which are float to the left. I would like to use a background image in the left layer, while the content goes in the right one. My problem is that if the content (right) layer is bigger (contains more text) than the left one, then it doesn’t expand vertically, thus the background doesnt fill till the footer…

I tried several height things just to make it work, but didn’t succeed. Maybe you have some ideas.

Thanks in advance!

Globally Recognized Avatar6. Jonathan Eckmier - February 20, 2006, 12:25 PM

Qk@c: This is actually a very common question.

The technique I would suggest is called “Faux Columns” and is actually used on this site as well. Basically what you’ll want to do is set the background image on your container, rather than the column in question.

Take a look at this article over at A List Apart - it’s a great tutorial on how to implement this, and should be a good starting point for you.

Also, you’ll need a layer after your two column layers to clear your floats. Clearing your floats will tell the browser not to allow any other elements to sit to the left and/or right of your floating layers. Basically it will cause the containing layer to expand down to the bottom of your floating layers. The code would look like this:

HTML:

<div id="container">
<div id="column1"></div>
<div id="column2"></div>
<div id="clearfloats"></div>
</div>

CSS:

#clearfloats {
clear: both;
}

For more information on the CSS Clear Property, see the W3Schools definition.

Let me know if it helps, or if you have any other questions.

Globally Recognized Avatar7. Qk@c - February 21, 2006, 4:07 AM

Hi!

Thanks for your information! It works great, I used the “background cheating method”. :) A thin website-wide image, which I put as background of the 2-column-layer-holder layer. :) Then I set that extra layer too. It works fine, though Netscape can’t handle it. In Firefox and Opera it works well (let’s not talk about IE, that’s another case).

Tbh I don’t know if I should care about it, as I’m about to write standard CSS (and other) codes, I can’t help if the browser can’t display it correctly. I know there are hack’s for similar problems, but still…

Globally Recognized Avatar8. random visitor - February 21, 2006, 1:26 PM

Hi!
Thanks for the clarifying info about div stretching. Today alone I have visited too many sites while trying to find a decent tutorial for my problem.
Thanks!

Globally Recognized Avatar9. Jonathan Eckmier - February 21, 2006, 10:33 PM

Qk@c: I’m glad I could help you out. Let me encourage you though to try your best at making all of your sites compatible with as many browsers as possible, including IE. I know it can be frustrating sometimes, but Internet Explorer still has approximately 90% of the browser market share - so it’s tough to justify writing off that large of a user-base.

Internet Explorer should handle the Faux Columns technique just fine, so there might be something else that’s causing issues. If you’d like some pointers on your site, perhaps you could post the URL, or use the contact form to send it to me.

random visitor: You’re welcome! As I said to tao above , it’s always nice to know when I’ve been able to help people out, so thanks for posting!

Globally Recognized Avatar10. steveg! - May 20, 2006, 11:24 AM

Hey - I just wanted to say thanks for your tutorial. It has been a tremendous help!

Globally Recognized Avatar11. Jonathan Eckmier - May 20, 2006, 1:20 PM

Steve: You’re welcome! Feel free to take a look at some of the other CSS Tips I’ve written about. Thanks for posting!

Globally Recognized Avatar12. toby - May 29, 2006, 4:13 AM

ive got a question.

im doing an CSS assignment and i have a sidebar image that is right below the end of the navagation. it is in its own div and is absolute positioned, what i want is for that div to stretch from where its positioned to the bottom of the page when more text is added and forces the page to scroll. i also want the image to be aligned to the bottom of the div at all times.

any help cause ive gone through everything and nothings helping.

Globally Recognized Avatar13. Hengis - May 29, 2006, 4:47 AM

Thanks for you tutorial. Am am building for IE6 but find the column I am extending seems to hit the foot of the screen then stops stetching. When I scroll down the column has prematurly stopped. Is this the correct behaviour and is there a way to keep it going?.

I havn’t yet looked at some javascipt onLoad scripts that might do the job - are these a good idea?

TIA

Hengis

Globally Recognized Avatar14. Jonathan Eckmier - May 29, 2006, 2:40 PM

Toby: My suggestion would be to make sure that the parent div has its height set to 100%. (This would make sure that the parent div stretches the entire length of the page). What I would do from there is use absolute positioning, but make sure you use bottom positioning instead of top (bottom: 0;). I’m not sure if this completely answers your question, but I’d be happy to take a look at your site if you post the URL (or send it to me using my contact form).

Hengis: You shouldn’t need Javascript to accomplish any of this, as CSS offers better ways to do it anyways. I’d also caution against using Javascript for your core design elements as it will make them unavailable for users who have Javascript disabled. Without looking at your site and its code though, it’s really hard for me to say what the problem might be, because it could be any number of issues. I’ll give the same advice as I gave Toby, post the URL of your site or send it to me and I’d be happy to take a look at it for you.

Globally Recognized Avatar15. Robin Meeuwsen - May 31, 2006, 3:06 AM

I’m having similar problems with a page that I’m building but I can’t get it to work. The page consists of three divs. In IE everything looks fine but in FF the content of the 2nd div runs right over the 3rd div. It should push the 3rd div further below. Below a simple example of what I mean.

CSS:

html, body {
height: 100%;
min-height: 100%;
margin: 0px;
}
#father {
height: 90%;
min-height: 90%;
width: 500px;
}
#son {
background-color: #6633FF;
height: auto;
min-height: auto;
width: 500px;
}
#grandson {
height: 10%;
min-height: 10%;
background-color: #CCFF33;
width: 500px;
}

HTML:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<link href="css.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="father">
<div id="son">
<p>son</p>
<p>son</p>
<p>son</p>
<p>son</p>
<p>son</p>
<p>son</p>
<p>son</p>
<p>son</p>
<p>son</p>
<p>son</p>
<p>son</p>
<p>son</p>
<p>son</p>
<p>son</p>
<p>son</p>
<p>son</p>
<p>son</p>
<p>son</p>
<p>son</p>
<p>son</p>
<p>son</p>
<p>son</p>
<p>son</p>
</div>
</div>
<div id="grandson">
<p>grandson</p>
</div>
</body>
</html>

Can you give me a hint?

Kind regards,

Robin MEEUWSEN

Globally Recognized Avatar16. Jonathan Eckmier - May 31, 2006, 10:04 AM

Robin: It’s because you’re not setting the height of your ‘Father’ div to auto for Firefox. I mentioned something about this in the article about what happens when there’s more than enough content in Firefox.

Try adding this to your CSS:

html>body #father {
height: auto;
}

That should point your in the right direction. Let me know how it goes!

Globally Recognized Avatar17. Robin Meeuwsen - June 1, 2006, 3:42 AM

This seems to do the trick. Thanks!

Robin

Globally Recognized Avatar18. Shep - June 9, 2006, 2:47 PM

Thanks Jonathan, some very useful tips here. I’m having trouble in FF though. I’ve got my height expanding 100% in IE, but not in FF :(

Will this technique only work under certain doctypes? I’m using:

<!doctype html public "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

My code looks like:


---HTML---
<body>
<center>
<div id='container'>What is wrong with me?</div>
</center>
</body>

---CSS---
html {
height:100%;
}
body {
height:100%;
margin:0px;
padding:0px;
background:#ffffff url(/images/bg-rptr.gif);
font:11px arial, sans-serif;
}
#container {
width:757px;
min-height:100%;
height:auto;
background:#ffffff;
text-align:left;
}

---IE conditional Stylesheet---
#container {
height:100%;
}

Do you see something I’m not seeing? Any reason this shouldn’t be stretching to 100% in FF as well?

Globally Recognized Avatar19. Shep - June 9, 2006, 3:28 PM

Well, I narrowed it down to the center tag. It must be considered a block element? I set its height to 100% and it works fine now… I understand how to set margins to 0,auto and text align for IE, but the center tag seems so much cleaner and I rarely use it for anything else.

Feel free to delete the post unless you think it is informative!

Globally Recognized Avatar20. Jonathan Eckmier - June 11, 2006, 10:06 PM

Shep: Yes, the center tag is considered a block level element, however it is also considered to be a deprecated (or obsolete) tag.

The problem you were experiencing was just that the div’s direct parent element’s height was not set to 100%, and for the vertical stretch to work properly all parent element’s need to have their height set to 100%.

I’d also encourage you to not use the center tag, as there are many ways to center your content using CSS. It’s up to you of course, but I’d suggest not using deprecated tags. Those tags are purely presentational, which is a job for your CSS, not your XHTML.

If you need to know how to center your layouts, take a look at my post on CSS Centered Layouts.

Anyways, sorry for taking so long to get back to you, it’s been a very full weekend for me - but I’m glad I could help you out none the less!

Globally Recognized Avatar21. Djoaniel - June 21, 2006, 4:10 AM

This tutorial has been very very helpful. Its the cure for the long itch I have since I ditched the tables.

Thanks a lot. Knowledge is for those who seek it. Its for everyone.

Globally Recognized Avatar22. Ã�ï&Acir - June 21, 2006, 11:50 AM

Hello,

We have a problem putting a div with a background image:
- at the top of the page (starting at pixel 0)
AND
- with scrollbars for the content when it stretches to more than one-page-height.

Our Configuration is:


<body>
<div id="external_wrap">
<div id="wrap">
<div class="header"></div>
</div>
<div class="wrap-faux-l">
<div class="wrap-floats">
<div class="content">
...
...
</div>
</div>
</div>
</div>
</body>

and in our css we also have:

html, body {
height: 100%;
min-height: 100%;
margin: 0px;
}
/* Hack for IE */
* html #external_wrap {
height: 100%;
}
/* End IE Hack */

html>body #external_wrap {
height: auto;
}

#external_wrap {
position: fixed;
top: 0;
min-height:100%;
height:auto;
width:1016px;}

#wrap {
height: 100%;}

#wrap-faux-l {
position:relative;
height: 100%; }

.wrap-floats {
height: 100%; }

.content {
height: 100%;}

We have tried various methods but we can not get in FF to get the page to stretch (to have vertical scrollers) using absolute positioning.
And with relative positioning we get the scrollers but we also get a gap at the top of the page (the background image of wrap_external div does not start at the top of the page)…

Any help would be GREATLY appreciated.
Thanks.

Globally Recognized Avatar23. Jonathan Eckmier - June 21, 2006, 1:48 PM

Djoaniel: You are very welcome, thanks for letting me know that it’s been helpful for you!

Unreadable Name: First thing you’ll want to do is add a padding value of 0 to your body element, that’ll get rid of the gap at the top of the page.

html, body {
height: 100%;
min-height: 100%;
margin: 0;
padding: 0;
}

That may be all you need if you switch back to relative positioning. Let me know if it helps.

Globally Recognized Avatar24. Futal - June 26, 2006, 10:05 AM

With W3C-compatible browsers (i.e. not IE), one can also use for the inside box the following properties:

position: absolute;
top: 0;
bottom: 0;

Globally Recognized Avatar25. Greg - July 3, 2006, 7:09 PM

I have a total of four divs in a page. The first div is the master div which goes the whole height of the page. The other three are nested at equal levels to each other. The first and last nested divs are to stretch the full width of the width the page and I want the middle div to force the page to stretch to 100% of the height. Using the examples on this page I have been able to come close but there is always somewhat of a vertical scroll bar.

.css file:
html, body {
height: 100%;
}

body {
margin: 0;
padding: 0;
text-align: center;
}

#Main {
margin: 0 auto;
text-align: center;
width: 100%;
min-height: 100%;
height: 100%;
background: #169573;
}

#Top {
margin: 0 auto;
text-align: center;
width: 100%;
background: #367591;
}

#Content {
margin: 0 auto;
text-align: left;
width: 750px;
min-height: auto%;
height: 100%;
background: #CCC;
}

#Bottom {
margin: 0 auto;
text-align: center;
width: 100%;
background: #abc;
}

/* Hack for IE, Reset to 100% height */
* html #Content {
height: 100%;
}
/* End IE Hack */
*********************************
.html file:
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<link rel="stylesheet" href="test.css" type="text/css">
<html>
<head>
<title>CSS 100% Height :: Splash Page</title>
</head>
<body>
<div id="Main">
<div id="Top">Top div test</div>
<div id="Content">
Testing to see if this works
</div>
<div id="Bottom">Bottom div test</div>
</div>
</body>
</html>

Thank you in advance for a great resourse and well written tutorial.

Greg

Globally Recognized Avatar26. Jonathan Eckmier - July 4, 2006, 5:44 PM

Greg: The reason you’re getting the scrollbar is because of your header and footer. Basically the browser is seeing your content div at 100% height and a header and footer added to that.

What you’ll need to do to get around that is to give your content div relative positioning and move your header/footer inside the content div. You’ll then need to use absolute positioning to get your header and footer to rest at the top and bottom of your content div. Finally, you’ll then need to use top and bottom margins on the top and bottom elements in your content div to make room for the header and footer.

For more information check the w3schools website:
CSS Positioning
CSS Padding

Let me know if that helps you out!

Also, you’ll need to move your DOCTYPE declaration to the very top line of your HTML as that is the only valid location for that declaration.

Globally Recognized Avatar27. Greg - July 5, 2006, 2:33 PM

Wow very cool!

One other small question is that the top div was displaying behind the content div so I used z-index to bring it to the forefront. Is this the best and most compatible way of doing that?

Thanks again for your invaluable help.

Greg

Globally Recognized Avatar28. Jonathan Eckmier - July 5, 2006, 9:56 PM

Greg: You’re very welcome, I’m glad I could help.

Also, to answer your other question, yes, using the z-index property is the best way and is perfectly acceptable CSS.

Globally Recognized Avatar29. Steph - August 14, 2006, 6:13 PM

I’m having a similar problem to the above, however the solutions are not working for me - I must be missing something.

I have a container with two columns. I have used a background image on the container to add a background to the left column. I have assigned min-height:100% to the body, html and container, but FF is treating the min-height as 100% of the visible screen instead of expanding.

The page, The css (full)

Excerpt from css:

html>body #container { height: auto;}

html { height: 100%; min-height: 100%; }

body { height: 100%; min-height: 100%; margin:0px auto; padding: 0px;...}

div#container { width: 770px; margin: 0px auto; padding: 0px 0px 45px 0px; text-align: center; height: 100%; height: auto !important; min-height: 100%; background-image: url('/images/container_background.jpg'); background-repeat: repeat-y; background-color:#FFFFFF;}

It works fine in IE, need it to stretch in FF. I’ve tried adding a clear div but it didn’t make a difference. I tried (just to see what would happen):

#clearfloats {
clear: both;
width: 768px;
height: 200px;
border: solid 1px #000000;
}

I inserted this after my column div’s, in the container div. It worked fine in IE, however FF plopped it bellow the footer div (which is bellow the container div!)

Any suggestions?

Globally Recognized Avatar30. Jonathan Eckmier - August 14, 2006, 7:11 PM

Steph: You don’t need to have min-height set for either the html or body element, so you can take those out. Also in your container div, take out the ‘height:auto !important;’ part as that is being taken care of when you use the child selector:

html>body #container {
height: auto;
}

Give that a try and let me know if it helps.

Globally Recognized Avatar31. Steph - August 15, 2006, 9:13 AM

Thank you for responding. Unfortunately that had no effect.

I’m using: <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>

Would a different one help?

Globally Recognized Avatar32. Steph - August 15, 2006, 1:11 PM

I figured it out. I added a z-index value to the left and right columns and removed the float from the right column. Now the menu is floating above the main content instead of beside.

Globally Recognized Avatar33. Kevin - August 17, 2006, 1:30 PM

It seems such a simple thing - I want an image tag to fill up a table data element. I have a GIF of a bracket that I want to expand vertically within a TD when I have it span multiple rows. Based on database information, I may need to span 3, 4, or many rows with a “title” cell on the left, therefore, I don’t know the height of the cell because it will render based on the browser window size. I want to have a bracket in that TD to show that all the rows are related.

I’ve tried every combination of height parameters I can think of. My latest trial has me here:

style=”height: expression(document.getElementById(’F1’).style.height);”

For some reason, I can’t get IE to return ANY attributes from the style object. I’ve tried simple javascript alerts to see what is returned.

var obj = getElementById(’F1’);
obj.id returns a value
obj.style.height does not.

Any thoughts?

Thanks a lot.

Globally Recognized Avatar34. Jonathan Eckmier - August 17, 2006, 11:04 PM

Steph: Glad you figured out what was going on! More often then not you’ll run into the “I just don’t know!” issues with CSS because of inheritance (meaning one element’s style is affecting another in some way).

Kevin: I’m not entirely sure what you’re asking me, but I’ll take a shot anyways.

If you’re using an img tag for your gif image, you could just use the img tag’s built in height attribute and set it to 100%:

<img src="..." height="100%" width="your_image_width" />

I would advise against using Javascript to size your image as it will only work for users who have Javascript enabled. The other thing is that I believe Javascript won’t return style values that haven’t previously been set. Meaning that if you don’t explicitly set your height, you won’t be able to read it using Javascript’s object.style.height variable.

If you are in fact trying to use the CSS method, you’ll need to set the parent element’s height (in this case the <td> element I think) first. This really isn’t much of an option for you because (as you said) you don’t know the height of the table data cell, so I’d suggest using a background image and tiling it vertically. You’ll then need to add 2 elements (one for the top of your ‘bracket’ and one for the bottom. So essentially you would end up with 3 separate images for your ‘bracket.’ You could then give your table data cell relative positioning and then absolutely position the top/bottom images of your ‘bracket’ inside the table data cell.

Here’s some code to go along with my suggestion (I’ll write the appropriate style information in-line, but you could move it later).

...
<td style="position: relative; background: url(YOUR_BRACKET_MIDDLE_IMAGE) repeat-y;">
<div style="position: absolute; left: 0; top: 0; width: BRACKET_TOP_IMAGE_WIDTH; height: BRACKET_TOP_IMAGE_HEIGHT; background: url(YOUR_BRACKET_TOP_IMAGE) no-repeat;"></div>
<div style="position: absolute; left: 0; bottom: 0; width: BRACKET_BOTTOM_IMAGE_WIDTH; height: BRACKET_BOTTOM_IMAGE_HEIGHT; background: url(YOUR_BRACKET_BOTTOM_IMAGE) no-repeat;"></div>
...

Hope that helps!

Globally Recognized Avatar35. Konrad Strzelecki - August 18, 2006, 10:07 AM

I modified css so it could stretch the div horizontaly. Unfortunately, when i put very wide object (wider than window) into the content layer, the leyer didn’t stretch in FF f.e. i have no background when i scroll right. Could you help me to solve this problem please. I would be grateful for any help.
P.S.
I’m already using faux column technique so and I can’t define background-image/color again for body.


html, body {
height: 100%;
width: 100%;
}

body {
margin: 0;
padding: 0;
text-align: center;
}

#Content {
margin: 0;
text-align: left;
min-height: 100%;
height: auto;
min-width: 100%;
width: auto;
background: #CCC;
}

/* Hack for IE, Reset to 100% height */
* html #Content {
height: 100%;
width: 100%;
}
/* End IE Hack */

Globally Recognized Avatar36. Jonathan Eckmier - August 18, 2006, 12:04 PM

Konrad: I’m not sure if this will work or not, but you could try changing the body css to have min-width: 100%; and width: auto;. Alternatively, you could try making your background image wider to accommodate the oversized content.

Globally Recognized Avatar37. Otto Rask - August 23, 2006, 12:43 PM

Good read. Stumbled upon this at the right time as I’m going to redesign my site soon and it uses this.

Thanks a lot. :D

Globally Recognized Avatar38. Jonathan Eckmier - August 24, 2006, 11:43 AM

Otto: You’re welcome!

Globally Recognized Avatar39. Martin Whelan - August 30, 2006, 6:47 PM

I have a site where the first half of the site has 1 column then changes to three columns. I have followed your tutorial and have set my container to 100% in hieght. I have then set my three columns to a 100 as well. The problem is you need to scroll as the bottom three columns will need to fit into the browser I just need to know how I can fit them into the bottom half.

Thanks
M

Globally Recognized Avatar40. Jonathan Eckmier - August 30, 2006, 11:27 PM

Martin: Unless your 2 sections are an exact combined height adding up to 100% (ie 50%/50% or 40%/60%), you wont be able to achieve what you’re trying easily. I would suggest using the ‘Faux Columns’ method (explained here) or a combination of the Faux Columns method and the method I have talked about here.

You could just set the height of your container and let the column background image (applied to your container div) do the rest. Just make sure that the first part of your page completely covers up your background image. (You won’t even need to worry about setting any height value for the 2 sections of your page). Hope this helps you out.

Globally Recognized Avatar41. Rob - August 31, 2006, 3:31 PM

I have a small question. I don’t think this exact one has been asked before.

CSS is great, but one thing that really puzzles me is the following:

You have a basic layout with a bar at the top, a middle section which is vertically expandable and a bar at the end of it all.

Piece of cake right? In CSS you make four div’s:

.Wrapper {
width: 500px;
display: block;
background: red;
}
.Top {
height: 100px;
width: 500px;
display: block;
background: blue;
}
.Middle {
width: 500px;
display: block;
background: green;
}
.Bottom {
height: 100px;
width: 500px;
display: block;
background: yellow;

Because the middle one doesn’t have a height set, you can put text in it and it will expand. You will get something like this: http://www.berenland.com/cssscreenshot1.jpg

But, and here’s the big problem. When I put two other layers inside the middle one and position them like this:

.left {
width: 100px;
display: block;
background: yellow;
position: absolute;
left: 10px;

.right {
width: 100px;
display: block;
background: yellow;
position: absolute;
left: 120px;

The other layers will not expand with them when I put text inside!

Check it out: http://www.berenland.com/cssscreenshot2.jpg

I noticed that when I didn’t give the layers a position, the problem doesn’t occur, but I have to position them because I want a two-column layout.

Really strange… I kind of fixed this problem by leaving the bottom bar out and placing a repeating background image in the body, but that should not be the way to go… I want a bar at the bottom, after all the content.

Can someone explain to me what I’m doing wrong?

Globally Recognized Avatar42. Jonathan Eckmier - September 5, 2006, 8:20 PM

Rob: The problem you’re having may be better solved by using floats. Check out the following resources and let me know if they help.

Faux Columns, CSS Float Property, In Search of the Holy Grail

However, the reason you’re having trouble is that when you use absolute positioning, you take the element out of the natural flow of the document.

There are a couple ways you may be able to get around this. Try adding “position: relative;” to the parent div (which in your case I believe was called “Middle”). If that doesn’t work you could try changing absolute to relative (CSS Positioning) on your 2 columns.

Globally Recognized Avatar43. Otto Rask - September 7, 2006, 12:04 PM

Hello, it’s me again.

Otherwise this is working great, but I’m stuck with a footer bar.

Yes it’s in the bottom, but has the same problem as the containers that stop just under the screen if there’s too much content (I’ve addressed those thanks to your tips on this article), but the footer sticks in the place when there’s too much content…

I’m using:

'position: absolute; bottom: 0;'

Is this the right way to do it?

I’ve tried ‘top: 100%;’, ‘top: auto;’, and some other things, but I can remember they didn’t work properly…

Thanks for your time. :)

- OJR.

Globally Recognized Avatar44. Jonathan Eckmier - September 9, 2006, 1:14 PM

Otto: Try adding ‘position: relative;’ to your footer layer’s parent div. Let me know if that works for you.

I’m just taking a guess right now because it’s hard to say when I haven’t seen your code. Hopefully this works out for you though.

Globally Recognized Avatar45. Robin Meeuwsen - September 9, 2006, 5:14 PM

Can you help me out once more? I’m again trying to implement your “more than enough content and stretch” but I cant’t get it to work. I have a page which consists of 6 divs: wrapper, header, menu, content, left and right. The content div has to stretch the whole page and when the contents of left and/or right go beyond that than content has to stretch also.

html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Le meiller des petites annonces!</title>
<link href="css/main.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="menutop">
<a href="#">se connecter</a>
<a href="#">s'inscrire</a>
</div>
<div id="content">
<div id="left">
<p>Linkermenu...</p>
<p>vxcvxc</p>
<p>vcx</p>
<p>v</p>
<p>cxv</p>
<p>c</p>
<p>xv</p>
<p>c</p>
<p>v</p>
<p>c</p>
<p>v</p>
<p>cxv</p>
<p></p>
<p>xcv</p>
<p></p>
<p>cv</p>
<p>c</p>
<p>xv</p>
<p>cx</p>
<p>v</p>
<p>cx</p>
<p>v</p>
<p>cv</p>
<p>xc</p>
<p>v</p>
<p>c</p>
<p>v</p>
<p>c</p>
<p>v</p>
</div>
<div id="right">
<p>Content</p>
</div>
</div>
</div>
</body>
</html>

css:

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
height: 100%;
}
html {
height: 100%;
}
* html #content #left #right #wrapper {
height: 100%;
}
#wrapper {
width: 760px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
border: 1px solid #3366CC;
min-height: 100%;
height: auto;
}
#header {
background-image: url(../img/top.gif);
height: 100px;
width: 760px;
}
#menutop {
background-image: url(../img/bgmenutop.gif);
height: 45px;
width: 760px;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #3366CC;
border-bottom-color: #3366CC;
line-height: 45px;
}
#menutop a {
text-decoration: none;
background-image: url(../img/bulletzwart.gif);
background-repeat: no-repeat;
background-position: left center;
padding-left: 20px;
margin-left: 10px;
color: #FFFFFF;
font-weight: bold;
text-transform: uppercase;
font-size: 12px;
}
#menutop a:hover {
background-image: url(../img/top.gif);
}
#content {
background-image: url(../img/bg.gif);
background-repeat: repeat;
width: 760px;
min-height: 100%;
height: auto;
}
#left {
float: left;
width: 180px;
min-height: 100%;
height: auto;
}
#right {
float: right;
width: 580px;
min-height: 100%;
height: auto;
}

Thanks in advance!

Robin Meeuwsen

Globally Recognized Avatar46. Jonathan Eckmier - September 10, 2006, 12:22 AM

Robin: The problem you’re having is because you’re using floating columns. You have to do something that’s called “Clearing” your floats.

Add this code to your CSS and you should be fine:

#content:after {
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden;
}

There is a bug in Internet Explorer that automatically causes a container with floated elements to expand to contain those elements, but it’s not the way it should be rendered. By rule, you should always clear your floats.

For more information on clearing floats and why you need to do it, check out these articles:

How To Clear Floats Without Structural Markup, Clearing floats, Simple Clearing of Floats

You’ll notice that there are several different methods to use and each one is just fine for most cases. I prefer the method on the Position Is Everything site (which is where the code I gave you above comes from) because it doesn’t introduce any additional markup in your HTML and it also explicitly tells the element to clear its floats.

Globally Recognized Avatar47. Robin Meeuwsen - September 10, 2006, 2:09 AM

Jonathan,

Thanks for your help. It works. The only thing I’m left with now is that #content which contains a background has to fill up the screen even though there is not enough content.

Thanks in advance!

Robin Meeuwsen

Globally Recognized Avatar48. Travis Cable - September 12, 2006, 11:50 AM

I am positioning my footer div at the bottom of the page via the following code:


html { height: 100%; min-height: 100%;}

body { color: black; font-size: 0.8em; font-family: Verdana, Arial, Helvetica, sans-serif; background-color: white; margin: 0; height: 100%; min-height: 100%;}

#outer { background-color: #f3f3f3; position: relative; height: 100%; visibility: visible; }

.footer { background-color: orange; visibility: visible; padding: 5px 10px; position: absolute; bottom: 0; border-top: 2px solid #33

The problem arises when there is more content before the footer than fits on the page. The footer stays on top at the bottom of the initially viewable area, while the content continues under and below the footer.

I know that setting the html, body and #outer to height: auto; will solve this, but then the footer will not stay fixed to the bottom at 100%. Any fix here?

Link to my page

You are amazing, by the way!

Globally Recognized Avatar49. Jonathan Eckmier - September 12, 2006, 11:44 PM

Travis: You’ll need to add ‘position: relative;’ to your outer div. You also don’t need to set min-height on your html or body element. All you’ll need is to set your outer div’s height to auto and min-height to 100%. You’ll need to keep the height: 100%; on your html and body elements though.

Try that and let me know if you have any success.

Globally Recognized Avatar50. Rob Eardley - September 15, 2006, 1:54 PM

You are a life saver. I have been banging my head against a brick wall for the last week trying to figure this out! Very concise tutorial and your layout is clean and green (nice one).

p.s. please ignore my site, I haven’t switched to a div based layout yet :)

Globally Recognized Avatar51. Stig - September 27, 2006, 1:16 PM

Hi Jon, interesting tutorial! I’ve been hunting for a nice vertical stretch piece for a while. I have a tangentially related question: is there a way to have one nested div among many stretch to fill the remaining viewport area?

I have a container div that’s 100% high and within the container are 5 nested divs stacked on top of one another. Four of them are displaying marvelously, but I need the bottom-most div to stretch to fill the remainder of the viewport. I’ve hunted far and wide and I can’t seem to find anything like this, is it possible?

Globally Recognized Avatar52. Jonathan Eckmier - September 28, 2006, 11:23 PM

Rob: You’re welcome, and thanks for the compliments. I’m glad my article was able to help you out. Also, don’t be ashamed of your table based layout… everyone needs to start somewhere and it seems like you’re already on your way to fully boarding the ‘standards train’ anyways. Just keep working at improving your skills and learning as much as you can!

Stig: There’s really no easy way of doing this unless you’re able to set the heights of all the DIVs so that they add up to 100%. My suggestion would be to have a container inside your DIV with 100% height and give it 100% height as well. Then, add all your nested DIVs inside that container and allow the rest of your content to fill up the remainder. Hopefully that makes sense, let me know if it doesn’t.

Globally Recognized Avatar53. Tokenizer - October 28, 2006, 2:49 PM

Thanks Buddy!
I didn’t know 100% was valid in CSS.

Globally Recognized Avatar54. Jonathan Eckmier - October 28, 2006, 9:34 PM

Tokenizer: You’re welcome! Thanks for your comment.

Globally Recognized Avatar55. P4R - November 5, 2006, 11:27 AM

Hi, I have read all of the comments and your answers, but cant get an answer for my problem. See, I have a two column website using floats, I used the clear method which works great. My problem is, I want to make it so that when one side stretches farther than the other, the shorter side will automatically stretch with it. I tried height: 100%; and that didnt help. My example is at www.2sided.net See How one side is longer than the other, I want the shorter side to stretch as far as the longer side.

Thanks

Globally Recognized Avatar56. Jonathan Eckmier - November 6, 2006, 3:14 PM

Hey P4R, what you’ll need to do is to use the ‘Faux Columns’ method that I’ve referred others to. You can read all about it at www.alistapart.com/articles/fauxcolumns/. Let me know if that helps you out ok?

Globally Recognized Avatar57. P4R - November 7, 2006, 7:28 PM

Thanks, that helped me a little bit. I still wish css had a way to extend 100% like tables can, but tables are outdated, and I only code using css now.

Globally Recognized Avatar58. Jonathan Eckmier - November 8, 2006, 11:25 PM

P4R: Yes, tables are outdated for layout purposes. They still have their uses (for tabular data) as I’m sure you know. It’s great that you’ve jumped to the ‘CSS or nothing’ camp and once you get used to it, you’ll never want to go back.

« October 2005 »

Sun Mon Tue Wed Thu Fri Sat
      1
2345678
9101112131415
16171819202122
23242526272829
3031     

Search this site

Latest Entries

Hot Topics