Need help getting my 100% height layout to work

devnl Guest

Messages:: 31

Likes Received:: 0

Best Answers:: 0

Trophy Points:: 0

#1

Hi,

I am currently working on achieving the following layout using divs:

In this layout I want the red parts to always be 100% high, the green parts to be a preset height in pixels and the yellow parts filling up the rest of the page height. If content in either one of the yellow parts exceeds the page height the entire page can scroll (header etc included), as long as the red columns remain their full height.

Can anyone help me with this because I can't seem to get it to work as I want it to. Thanks in advance!

-devnl

devnl, Feb 22, 2009 IP

wd_2k6 Peon

Messages:: 1,740

Likes Received:: 54

Best Answers:: 0

Trophy Points:: 0

#2

What are the red parts, is it a page background, or some sort of left and right column, is anything going inside there?
Also what about the page width, is it going to be fixed to a certain px?

wd_2k6, Feb 22, 2009 IP

Lpe04 Peon

Messages:: 579

Likes Received:: 15

Best Answers:: 0

Trophy Points:: 0

#3

Create one large box (the red box) and put everything else inside with small left and right margins. That's what I would do.

Note: You can also make two large boxes. One that contains the header and sidebars inside the slightly larger one (the red one) with left and right margins.

Lpe04, Feb 22, 2009 IP

newcentury Well-Known Member

Messages:: 193

Likes Received:: 4

Best Answers:: 0

Trophy Points:: 108

#4

Use red as your body color or place all your tags inside a wrapper id, set its background-color to red, place a container inside wrapper and set margin to it like: margin:0px 5px;

newcentury, Feb 22, 2009 IP

wd_2k6 Peon

Messages:: 1,740

Likes Received:: 54

Best Answers:: 0

Trophy Points:: 0

#5

newcentury said: ↑

Use red as your body color or place all your tags inside a wrapper id, set its background-color to red, place a container inside wrapper and set margin to it like: margin:0px 5px;
Click to expand...

Or better still why not have 5px padding on your wrapper and scrap the container altogether!

wd_2k6, Feb 22, 2009 IP

devnl Guest

Messages:: 31

Likes Received:: 0

Best Answers:: 0

Trophy Points:: 0

#6

What I'm trying to get done is a bit harder then that I'm afraid. The white part in my design has a gradient background and the red columns will contain a shadow that runs along the left and right of my main content part.

Because the gradient stops somewhere halfway on the red columns I wanted to have the red columns contain an image of the shadow with the gradient and the rest of the red columns a background that is essentially the background color the gradient fades into with shadow. This background is then repeated for the rest of it's height.

Here's an image as a reference to what I mean:

http://www.dvolve.org/design.jpg

The entire thing does have a set width of 1000px. The red columns will be 9px wide each with the rest filling up the remaining 982px.

devnl, Feb 22, 2009 IP

wd_2k6 Peon

Messages:: 1,740

Likes Received:: 54

Best Answers:: 0

Trophy Points:: 0

#7

Right, what is the height of the red columns, do they need to be fixed at 100% and scroll when the user scrolls down, or the height of whatever the page is, or a fixed height?

wd_2k6, Feb 23, 2009 IP

devnl Guest

Messages:: 31

Likes Received:: 0

Best Answers:: 0

Trophy Points:: 0

#8

The footer should always snap to the bottom, so that the site is always at least 100% high (ofcourse when the content forces a scrollbar on the entire page the thing should scroll in its entirety).
The red columns should also always be at least 100% high or higher if a scroll is needed.

Does that clarify it?

devnl, Feb 23, 2009 IP

deathshadow Acclaimed Member

Messages:: 9,732

Likes Received:: 1,998

Best Answers:: 253

Trophy Points:: 515

#9

While you CAN do it using div's and some margin trickery, it starts to get a bit heavy on the hacks supporting IE6 and Opera... So my advice is going to fly in the face of what everyone else is going to tell you....

Use a table.
<!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"
	lang="en"
	xml:lang="en"
><head>

<meta
	http-equiv="Content-Type"
	content="text/html; charset=iso-8859-1"
/>

<title>
	baseline template
</title>

<style type="text/css">
* {
	margin:0;
	padding:0;
}

html, body {
	height:100%;
}

body {
	text-align:center; /* center #container in IE 5.x */
	font:normal 85%/125% verdana,helvetica,sans-serif;
}

p {
	padding:0 1em 1em;
}

#container {
	table-layout:auto;
	border-collapse:collapse;
	empty-cells:show;
	width:992px;
	height:100%;
	margin:0 auto;
	text-align:left;
	background:#FF0;
}

#leftSide,
#rightSide {
	width:9px;
	background:#F00;
}

#header {
	background:#0F0;
	border-bottom:1px solid #000;
	vertical-align:top;
}

h1 {
	padding:8px;
	font:bold 32px/34px verdana,helvetica,sans-serif;
}

#sidebar {
	width:200px;
	padding-top:1em;
	background:#EF0;
	vertical-align:top;
}

#content {
	padding-top:1em;
	text-align:left;
	background:#FE0;
	vertical-align:top;
}

#container #footer {
	vertical-align:bottom;
}

#footer div {
	padding:8px;
	background:#0F0;
	border-top:1px solid #000;
}

</style>

</head><body>

<table id="container">
	<tr>
		<td rowspan="3" id="leftSide"></td>
		<td colspan="2" id="header">
			<h1>Site title</h1>
		</td>
		<td rowspan="3" id="rightSide"></td>
	</tr><tr>
		<td id="sidebar">
			<p>SideBar stuff</p>
			<p>SideBar stuff</p>
			<p>SideBar stuff</p>
			<p>SideBar stuff</p>
		</td>
		<td id="content">
			<p>Some test content</p>
		</td>
	</tr><tr>
		<td colspan="2" id="footer">
			<div>
				Test footer content
			</div>
		</td>
	</tr>
</table>
	
</body></html>
Code (markup):
No ACTUAL hacks, validates Strict, CSS validates. Certainly some people will give you working examples that use DIV, these are going to need to trip haslayout for IE, fake min-height in IE, deal with the opera 100% height bug, and possibly even use -moz properties or assign display:table to non-table elements... and probably use MORE markup.

Then those same people will have the nerve to call using a table to divide data into rows and columns a hack. Give those people a dictionary. I normally do not advocate table based layouts, however this is a case where the table will do the job better and in less code.

I colored the 'content' area two different colors for the columns so you could see the division. You'll notice the pure yellow on the table is showing through below that when taller than the content - which is our 'solution' for your border between columns (from looking at your original) - I would apply a background-image tiled on #container to add that stripe, removing the backgrounds from #content and #sidebar once you've done so.

Hope this helps. You REALLY have your heart set on a non-table one, I can make one of those too, though it is less versatile since you have to fix the height of #footer.

deathshadow, Feb 23, 2009 IP

devnl Guest

Messages:: 31

Likes Received:: 0

Best Answers:: 0

Trophy Points:: 0

#10

Deathshadow, thanks for the help! I have a question though. I looked into this a bit and set the height of the #header to a fixed one (88px) which results in the header becoming, well, quite a bit bigger then 88px :rolleyes:

Also if I add another row (the blue one in the following code) and set that to a fixed 20px, it also shows up a lot bigger then it should.

Why is that happening?

<!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"
	lang="en"
	xml:lang="en"
><head>

<meta
	http-equiv="Content-Type"
	content="text/html; charset=iso-8859-1"
/>

<title>
	baseline template
</title>

<style type="text/css">
* {
	margin:0;
	padding:0;
}

html, body {
	height:100%;
}

body {
	text-align:center; /* center #container in IE 5.x */
	font:normal 85%/125% verdana,helvetica,sans-serif;
}

p {
	padding:0 1em 1em;
}

#container {
	table-layout:auto;
	border-collapse:collapse;
	empty-cells:show;
	width:992px;
	height:100%;
	margin:0 auto;
	text-align:left;
	background:#FF0;
}

#leftSide,
#rightSide {
	width:9px;
	background:#F00;
}

#header {
	background:#0F0;
	border-bottom:1px solid #000;
	vertical-align:top;
	height:88px;
}

h1 {
	padding:8px;
	font:bold 32px/34px verdana,helvetica,sans-serif;
}

#sidebar {
	width:200px;
	padding-top:1em;
	background:#EF0;
	vertical-align:top;
}

#content {
	padding-top:1em;
	text-align:left;
	background:#FE0;
	vertical-align:top;
}

#container #footer {
	vertical-align:bottom;
}

#footer div {
	padding:8px;
	background:#0F0;
	border-top:1px solid #000;
}

#bar {
	background:#00F;
	height:20px;
}

</style>

</head><body>

<table id="container">
	<tr>
		<td rowspan="4" id="leftSide"></td>
		<td colspan="2" id="header">
			<h1>Site title</h1>
		</td>
		<td rowspan="4" id="rightSide"></td>
	</tr>
	<tr>
		<td colspan="2" id="bar">
		</td>
	</tr>
	<tr>
		<td id="sidebar">
			<p>SideBar stuff</p>
			<p>SideBar stuff</p>
			<p>SideBar stuff</p>
			<p>SideBar stuff</p>
		</td>
		<td id="content">
			<p>Some test content</p>
		</td>
	</tr><tr>
		<td colspan="2" id="footer">
			<div>
				Test footer content
			</div>
		</td>
	</tr>
</table>
	
</body></html>

HTML:

devnl, Feb 23, 2009 IP

Stomme poes Peon

Messages:: 3,195

Likes Received:: 136

Best Answers:: 0

Trophy Points:: 0

#11

How much bigger is bigger? You did add 8px padding (all around) so it should be 88px plus 16px vertical padding = 104px.

Stomme poes, Feb 25, 2009 IP

devnl Guest

Messages:: 31

Likes Received:: 0

Best Answers:: 0

Trophy Points:: 0

#12

Well, I've removed all the paddings etc, even cleared all the content in the Header div, fixed it at 88px but my header ends up being about 200px high (the red part below) for some reason. I really have no clue why that is. Also for some reason my content part isn't stretching all the way down to the footer (see the black part in the following link). You can check out the following page to get an idea of what I mean and my current sourcecode:

http://www.dvolve.org/test/index.htm

devnl, Feb 25, 2009 IP

deathshadow Acclaimed Member

Messages:: 9,732

Likes Received:: 1,998

Best Answers:: 253

Trophy Points:: 515

#13

My bad, been a while and my brains still a bit foggy after my recent episode. Lemme look it over - I know IE is at fault since it should work just fine in FF/Opera/Saffy...

deathshadow, Feb 25, 2009 IP

deathshadow Acclaimed Member

Messages:: 9,732

Likes Received:: 1,998

Best Answers:: 253

Trophy Points:: 515

#14

I must be slipping... I can't remember how to make IE not do that... well, in the interim here's how to do it with DIV's... Just apply a faux-column image to #container to apply your side backgrounds and center column dividers.

<!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"
	lang="en"
	xml:lang="en"
><head>

<meta
	http-equiv="Content-Type"
	content="text/html; charset=iso-8859-1"
/>

<title>
	baseline template
</title>

<style type="text/css">
* {
	margin:0;
	padding:0;
}

html, body {
	height:100%;
}

body {
	text-align:center; /* center #container in IE 5.x */
	font:normal 85%/125% verdana,helvetica,sans-serif;
}

p {
	padding:0 1em 1em;
}

#container {
	width:976px;
	min-height:100%;
	overflow:hidden; /* wrap floats */
	margin:0 auto;
	padding:0 9px;
	text-align:left;
	background:#F00;
}

* html #container {
	/* 
		IE 6/earlier has no min-height, but will 
		incorrectly treat height as such if we turn overflow
		back to the default... Thankfully haslayout is
		already tripped, so floats will be wrapped in IE
		anyways.
	*/
	overflow:visible;
	height:100%;
}

h1 {
	padding:8px;
	font:bold 32px/34px verdana,helvetica,sans-serif;
	background:#0F0;
	border-bottom:1px solid #000;
}

#sidebar {
	float:left;
	width:200px;
	padding:16px 0 48px;
	background:#EF0;
}

#content {
	float:right;
	width:776px;
	padding:16px 0 48px;
	text-align:left;
	background:#FE0;
}

#footer {
	width:960px;
	height:16px;
	padding:8px;
	margin:-32px auto 0;
	overflow:hidden; /* just in case */
	font:normal 14px/16px arial,helvetica,sans-serif;
	background:#0F0;
	border-top:1px solid #000;
}

</style>

</head><body>

<div id="container">

	<h1>Site title</h1>
	
	<div id="content">
		<p>Some test content</p>
	</div>
	
	<div id="sidebar">
		<p>SideBar stuff</p>
		<p>SideBar stuff</p>
		<p>SideBar stuff</p>
		<p>SideBar stuff</p>
	<!-- #sidebar --></div>
	
<!-- #container --></div>

<div id="footer">
	Test footer content
</div>
	
</body></html>

Code (markup):

This one I actually (*** SHOCK ***) tested in IE6/newer. IE5.x it will screw up because of the broken box model - oh wells.

Only real drawback is the height of the footer MUST remain fixed.

deathshadow, Feb 25, 2009 IP

devnl Guest

Messages:: 31

Likes Received:: 0

Best Answers:: 0

Trophy Points:: 0

#15

Deathshadow, thanks for all the help so far, but this div layout has some drawbacks in achieving what I want Seeing as how the entire container now has only 1 background, I cannot get my shadows to work decently in combination with the gradient. That's why the table layout was perfect (except for the weird heights). There I had different cells for the shadows which I could give their own background and put an image in to achieve the gradient shadow effect as in the link in my previous post Fixing both the header and the footer isn't going to be a problem, I'll be doing that anyway.

EDIT:

Better yet, if it's easier to leave out the footer alltogether I'm fine with that too.

devnl, Feb 26, 2009 IP

risoknop Peon

Messages:: 914

Likes Received:: 24

Best Answers:: 0

Trophy Points:: 0

#16

No need for table... as far as I understand correctly what you are trying to achieve.

Use a simple margin hack: http://ryanfait.com/sticky-footer/

Works in all recent browsers as far as I know (IE6+).

risoknop, Feb 26, 2009 IP

risoknop Peon

Messages:: 914

Likes Received:: 24

Best Answers:: 0

Trophy Points:: 0

#17

About red parts... just use a background image for that, or add left and right border to both wrapper and footer divs

risoknop, Feb 26, 2009 IP

deathshadow Acclaimed Member

Messages:: 9,732

Likes Received:: 1,998

Best Answers:: 253

Trophy Points:: 515

#18

Since you are working on a fixed width, for your shadows can't you just make the two side areas AND the content area backgrounds a single image tiled on the Y axis? Basically extend Faux-columns to apply the shadows as well... That's how I was thinking it would be handled.

Do you have a image of basically what it is you are trying to do? The 'actual' images for the page, not just the simple block layout?

deathshadow, Feb 26, 2009 IP

devnl Guest

Messages:: 31

Likes Received:: 0

Best Answers:: 0

Trophy Points:: 0

#19

Because my background is essentially a gradient I cannot do a Y axis tiling background image as far as I know because the shadow would be on both gradient as the background-color. At some point the gradient stops and the background-color takes over, which I can probably never do right with a Y axis tiling BG..Here's a link to how it's kind of going to be:

http://www.dvolve.org/test/index.htm

devnl, Feb 26, 2009 IP

risoknop Peon

Messages:: 914

Likes Received:: 24

Best Answers:: 0

Trophy Points:: 0

#20

I don't see a problem there. Just put your divs inside a wrapper div. Set an Y axis tiling background image for wrapper div (to create the shadow) and use a little padding on the sides so background colors of other divs (content, sidebar) won't cloak the shadow.

You really don't need table for this.

I would make a quick example for you but I'm a little busy now.

risoknop, Feb 26, 2009 IP

Log in or Sign up

Advertising (learn more)

Need help getting my 100% height layout to work

devnl Guest

wd_2k6 Peon

Lpe04 Peon

newcentury Well-Known Member

wd_2k6 Peon

devnl Guest

wd_2k6 Peon

devnl Guest

deathshadow Acclaimed Member

devnl Guest

Stomme poes Peon

devnl Guest

deathshadow Acclaimed Member

deathshadow Acclaimed Member

devnl Guest

risoknop Peon

risoknop Peon

deathshadow Acclaimed Member

devnl Guest

risoknop Peon

Log in or Sign up

Advertising (learn more)

Need help getting my 100% height layout to work

devnl Guest

wd_2k6 Peon

Lpe04 Peon

newcentury Well-Known Member

wd_2k6 Peon

devnl Guest

wd_2k6 Peon

devnl Guest

deathshadow Acclaimed Member

devnl Guest

Stomme poes Peon

devnl Guest

deathshadow Acclaimed Member

deathshadow Acclaimed Member

devnl Guest

risoknop Peon

risoknop Peon

deathshadow Acclaimed Member

devnl Guest

risoknop Peon

Useful Searches