|
Getting <div> to stretch 100% height HELP!
10-26-2008, 05:10 AM
|
Getting <div> to stretch 100% height HELP!
|
Posts: 29
Name: Dave
|
Ok,
So I've read several articles regarding getting <div>'s to stretch 100% height. I seen you have to have body or the parent container's height defined in order for it to understand how to apply the correct height to the containing div. Seems to make sense, but I can't seem to get the code to function correctly. I'm using a template from DW (please excuse comments) and I'm trying to get the sidebar div to stretch the length of the page. DW even tells me my sidebar div has a height of 100% when I select the div in design view. Can anyone tell me why it isn't spanning the whole container? Any help is greatly appreciated. Thanks!
html page
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Template</title>
<link href="styling.css" rel="stylesheet" type="text/css">
</head>
<body class="twoColLiqLtHdr" leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" rightmargin="0">
<div id="container">
<div id="header">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td>
<img src="http://www.webmaster-talk.com/images/banner_top.png" border="0" />
</td>
<td width="780px" bgcolor="#800517"></td>
</tr>
<tr>
<td>
<img src="http://www.webmaster-talk.com/images/banner_middle.png" border="0" />
</td>
<td width="780px" bgcolor="#FDD017"></td>
</tr>
</table>
<!-- end #header --></div>
<div id="sidebar1">
<img src="http://www.webmaster-talk.com/images/banner_side.png" border="0" />
<table cellpadding="4" cellspacing="0" border="0">
<tr>
<td width="145" bgcolor="#800517" align="right">
Link 1
</td>
<td width="1" bgcolor="#FDD017">
</td>
</tr>
<tr>
<td width="145" bgcolor="#800517" align="right">
Link 2
</td>
<td width="1" bgcolor="#FDD017">
</td>
</tr>
<tr>
<td width="145" bgcolor="#800517" align="right">
Link 3
</td>
<td width="1" bgcolor="#FDD017">
</td>
</tr>
<tr>
<td width="145" bgcolor="#800517" align="right">
Link 4
</td>
<td width="1" bgcolor="#FDD017">
</td>
</tr>
<tr>
<td width="145" bgcolor="#800517" align="right">
Link 5
</td>
<td width="1" bgcolor="#FDD017">
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" height="100%">
<tr>
<td height="100%" bgcolor="#800517"><img src="http://www.webmaster-talk.com/images/spacer.gif" border="0" /></td>
<td bgcolor="#FDD017"><img src="http://www.webmaster-talk.com/images/spacer.gif" border="0" /></td>
</tr>
</table>
<!-- end #sidebar1 --></div>
<div id="mainContent">
<h1>Main Content</h1>
<p>My main content goes here.</p>More content here, and here, and here, and here, and here.
<h2>Sub Content</h2>
<p>More content goes here.</p>More content here, and here, and here, and here, and here.
<!-- end #mainContent --></div>
<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
<div id="footer">
<p>Footer</p>
<!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>
css page
HTML Code:
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
width: 100%;
height: 100%;
margin-left: 0;
margin-right: 0;
margin-bottom: 0;
margin-top: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
}
.twoColLiqLtHdr #container {
width: 100%; /* this will create a container 80% of the browser width */
height: 100%;
min-height: 100%;
background: #FFFFFF;
/* margin: 0 auto; the auto margins (in conjunction with a width) center the page */
/* border: 1px solid #000000; */
text-align: left; /* this overrides the text-align: center on the body element. */
}
.twoColLiqLtHdr #header {
background: #DDDDDD;
/* padding: 0 10px; this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
}
.twoColLiqLtHdr #header h1 {
margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}
/* Tips for sidebar1:
1. since we are working in percentages, it's best not to use padding on the sidebar. It will be added to the width for standards compliant browsers creating an unknown actual width.
2. Space between the side of the div and the elements within it can be created by placing a left and right margin on those elements as seen in the ".twoColLiqLtHdr #sidebar1 p" rule.
3. Since Explorer calculates widths after the parent element is rendered, you may occasionally run into unexplained bugs with percentage-based columns. If you need more predictable results, you may choose to change to pixel sized columns.
*/
.twoColLiqLtHdr #sidebar1 {
height: 100%;
min-height: 100%;
float: left;
width: 18%; /* since this element is floated, a width must be given */
/* background: #EBEBEB; the background color will be displayed for the length of the content in the column, but no further */
/* padding: 15px 0; top and bottom padding create visual space within this div */
}
.twoColLiqLtHdr #sidebar1 h3, .twoColLiqLtHdr #sidebar1 p {
margin-left: 10px; /* the left and right margin should be given to every element that will be placed in the side columns */
margin-right: 10px;
}
/* Tips for mainContent:
1. the space between the mainContent and sidebar1 is created with the left margin on the mainContent div. No matter how much content the sidebar1 div contains, the column space will remain. You can remove this left margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends.
2. to avoid float drop at a supported minimum 800 x 600 resolution, elements within the mainContent div should be 430px or smaller (this includes images).
3. in the Internet Explorer Conditional Comment below, the zoom property is used to give the mainContent "hasLayout." This avoids several IE-specific bugs.
*/
.twoColLiqLtHdr #mainContent {
margin: 0 20px 0 19%; /* the right margin can be given in percentages or pixels. It creates the space down the right side of the page. */
}
.twoColLiqLtHdr #footer {
padding: 0 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
background:#DDDDDD;
}
.twoColLiqLtHdr #footer p {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}
/* Miscellaneous classes for reuse */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
float: left;
margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
Last edited by davie_gravy; 10-26-2008 at 05:12 AM..
|
|
|
|
|
10-26-2008, 08:35 AM
|
Re: Getting <div> to stretch 100% height HELP!
|
Posts: 1,670
Name: Stefan
Location: London, UK
|
Surprisingly, this is one of the hardest things in HTML, 100% heights.
I recommend you read the sticky of this topic to help you. Pretty much what I would say is said in that thread and it's hyperlinks.
I know its not really my business, but I strongly urge you to convert your tables into divs |
|
|
|
|
10-27-2008, 02:50 AM
|
Re: Getting <div> to stretch 100% height HELP!
|
Posts: 29
Name: Dave
|
I read that topic before I posted. I was following this article http://www.webmasterworld.com/forum83/200.htm - apparently it can be done and I've followed directions accordingly, but still no results. Can anyone get a div to stretch height 100%?
Also, you recommend I change all my tables to div's? Why's that?
Last edited by davie_gravy; 10-27-2008 at 02:51 AM..
|
|
|
|
|
10-27-2008, 07:43 AM
|
Re: Getting <div> to stretch 100% height HELP!
|
Posts: 3,987
Name: Abel Mohler
Location: Asheville, North Carolina USA
|
Good Lord... why is this even an issue any more? Why tables for layout is stupid.
__________________
I build web things. I work for the startup
Please login or register to view this content. Registration is FREE
.
|
|
|
|
|
10-27-2008, 08:42 PM
|
Re: Getting <div> to stretch 100% height HELP!
|
Posts: 29
Name: Dave
|
Ah ha. I see now. Thanks for the link.
|
|
|
|
|
10-29-2008, 12:14 AM
|
Re: Getting <div> to stretch 100% height HELP!
|
Posts: 29
Name: Dave
|
Ok,
So I'm learning more about div's and css, but I'm still having trouble getting my sidebar div to stretch 100% height. My structure is a header, siderbar, mainContent, and footer div all containted within container div, which is in the body. Now when I set my sidebar height to a pixel amount, it fills the free space, but when I set height to 100%, it never fills the area. I'm trying to get it to grow as mainContent grows. I have the body and container heights all set to 100%. I've followed every example I could find on the net regarding this and still can't get it to work. Can anyone tell me why it's not filling 100% height? Please excuse the table use, I'm still figuring out how to substitute css for table functionality.
Here's my code
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Web Designs</title>
<link href="styling.css" rel="stylesheet" type="text/css">
</head>
<body class="twoColLiqLtHdr" leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" rightmargin="0">
<div id="container">
<div id="header">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="http://www.webmaster-talk.com/images/banner_top.png" border="0" />
</td>
<td bgcolor="#800517" width="100%"></td>
</tr>
<tr>
<td>
<img src="http://www.webmaster-talk.com/images/banner_middle.png" border="0" />
</td>
<td bgcolor="#FDD017" width="100%"></td>
</tr>
</table>
<!-- end #header --></div>
<div id="sidebar1">
<div id="links">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
</div>
<!-- end #sidebar1 --></div>
<div id="mainContent">
<h1>Main Content</h1>
<p>My main content goes here.</p>More content here, and here, and here, and here, and here.
<h2>Sub Content</h2>
<p>More content goes here.</p>More content here, and here, and here, and here, and here.
<!-- end #mainContent --> </div>
<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
<div id="footer">
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<img src="http://www.webmaster-talk.com/images/banner_bottom_middle.png" border="0">
</td>
<td bgcolor="#FDD017" width="100%"></td>
</tr>
</table>
<!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>
Here's my css
HTML Code:
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
border: 0;
width: 100%;
height: 100%;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
}
.twoColLiqLtHdr #container {
width: 100%; /* this will create a container 80% of the browser width */
height: 100%;
padding: 0;
/* min-height: 100%; */
background: #FFFFFF;
margin: 0;
/* border: 1px solid #000000; */
text-align: left; /* this overrides the text-align: center on the body element. */
}
.twoColLiqLtHdr #header {
/* padding: 0 10px; this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
padding: 0;
background: #800517;
font-family: 100% Verdana, Arial, Helvetica, sans-serif;
font-size: 5px;
float: top;
margin: 0;
border: 0;
}
.twoColLiqLtHdr #header img {
padding: 0;
margin: 0;
}
/*--------------------------------------------*/
.twoColLiqLtHdr #links ul {
list-style-type:none;
}
.twoColLiqLtHdr #links li {
padding: 4px;
display:block;
}
.twoColLiqLtHdr #links {
padding: 0;
height: 100%;
text-align:right;
}
/*----------------------------------------------*/
.twoColLiqLtHdr #sidebar1 {
height: 100%;
float: left;
padding: 0;
background-color: #800517;
border-right: 9px solid #FDD017;
width: 153px; /* since this element is floated, a width must be given */
/* background: #EBEBEB; the background color will be displayed for the length of the content in the column, but no further */
/* padding: 15px 0; top and bottom padding create visual space within this div */
}
/* Tips for mainContent:
1. the space between the mainContent and sidebar1 is created with the left margin on the mainContent div. No matter how much content the sidebar1 div contains, the column space will remain. You can remove this left margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends.
2. to avoid float drop at a supported minimum 800 x 600 resolution, elements within the mainContent div should be 430px or smaller (this includes images).
3. in the Internet Explorer Conditional Comment below, the zoom property is used to give the mainContent "hasLayout." This avoids several IE-specific bugs.
*/
.twoColLiqLtHdr #mainContent {
padding: 0;
margin: 0 20px 0 19%; /* the right margin can be given in percentages or pixels. It creates the space down the right side of the page. */
}
.twoColLiqLtHdr #footer {
font-family: 100% Verdana, Arial, Helvetica, sans-serif;
font-size: 5px;
padding: 0;
margin: 0;
/* padding: 0 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
}
/* Miscellaneous classes for reuse */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
float: left;
margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
Last edited by davie_gravy; 10-29-2008 at 12:20 AM..
|
|
|
|
|
10-29-2008, 02:39 PM
|
Re: Getting <div> to stretch 100% height HELP!
|
Posts: 10,017
Location: Tennessee
|
Save yourself a LOT of hair pulling and aggravation - try the Faux Columns method instead: http://www.alistapart.com/articles/fauxcolumns/
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!
Please login or register to view this content. Registration is FREE
Please login or register to view this content. Registration is FREE
|
|
|
|
|
10-29-2008, 04:29 PM
|
Re: Getting <div> to stretch 100% height HELP!
|
Posts: 29
Name: Dave
|
Cheers for the link! I'm going to try creating a slice and repeating the image along the y-axis.
|
|
|
|
|
10-31-2008, 02:02 AM
|
Re: Getting <div> to stretch 100% height HELP!
|
Posts: 29
Name: Dave
|
Ok,
I'm still stuck on getting sidebar div to stretch in accordance with my mainContent. I have my body set to 100% height, my container set 100% height, and my sidebar set 100% height. The sidebar is using a image slice that I repeat along the y-axis. It grows, but it doesn't grow in accordance to the content. It seems like I'm missing something small. I've tried everything I could think of and nothing has produced the results I'm wanting. It always seems to leave some sort of gap or I get something else out of wack. I also notice my body or my container div don't encompass all my other divs or there's some sort of weird overflow behavior happening. Could someone possibly tell me why I'm seeing the results I am or suggest a solution? I just want the sidebar to stretch in accordance with my mainContent.
I've set borders on all my divs to help illustrate what might be causing the problem.
body is black
container is blue (contains all other divs)
header is green
sidebar is red (has a thick orange right border to match design)
mainContent is yellow
footer is purple
Any help is greatly greatly appreciated!!
index
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Template Web Design</title>
<link href="styling.css" rel="stylesheet" type="text/css">
</head>
<html>
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" rightmargin="0">
<div id="container">
<div id="header">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="http://www.webmaster-talk.com/images/banner_top.png" border="0" />
</td>
<td bgcolor="#800517" width="100%"></td>
</tr>
<tr>
<td>
<img src="http://www.webmaster-talk.com/images/banner_middle.png" border="0" />
</td>
<td bgcolor="#FDD017" width="100%"></td>
</tr>
</table>
<!-- end #header --></div>
<div id="sidebar1">
<img src="http://www.webmaster-talk.com/images/banner_side.png" border="0" />
<div id="links">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
</div>
<!-- end #sidebar1 --></div>
<div id="mainContent">
<h1>Main Content</h1>
<p>My main content goes here.</p>More content here, and here, and here, and here, and here.<p>The list goes on...<p> The list goes on...<p>The list goes on...<p>The list goes on...<p>The list goes on...<p>The list goes on...<p>The list goes on...<p>The list goes on...<p>The list goes on...<p>The list goes on...<p>The list goes on...
<h2>Sub Content</h2>
<p>More content goes here.</p>More content here, and here, and here, and here, and here.
<!-- end #mainContent --> </div>
<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
<div id="footer">
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<img src="http://www.webmaster-talk.com/images/banner_bottom_middle.png" border="0">
</td>
<td bgcolor="#FDD017" width="100%"></td>
</tr>
</table>
<!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>
css
HTML Code:
html, body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #FFFFFF;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
width: 100%;
border: 2px solid black;
height: 100%;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
}
#container {
width: 100%; /* this will create a container 80% of the browser width */
height: 100%;
border: 2px solid blue;
padding: 0;
/* min-height: 100%; */
background: #FFFFFF;
margin: 0;
/* border: 1px solid #000000; */
text-align: left; /* this overrides the text-align: center on the body element. */
}
#header {
/* padding: 0 10px; this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
padding: 0;
background: #800517;
font-family: 100% Verdana, Arial, Helvetica, sans-serif;
border: 2px solid green;
font-size: 5px;
float: top;
margin: 0;
}
#sidebar1 {
float: left;
padding: 0;
height: 100%;
border: 2px solid red;
background: url(images/vert_slice.png);
background-repeat:repeat-y;
border-right: 9px solid #FDD017;
width: 153px; /* since this element is floated, a width must be given */
/* background: #EBEBEB; the background color will be displayed for the length of the content in the column, but no further */
/* padding: 15px 0; top and bottom padding create visual space within this div */
}
#mainContent {
padding-left: 10px;
background: #FFFFFF;
border: 2px solid yellow;
/* margin-left: 17%; */
margin: 0 0 0 16%; /* the right margin can be given in percentages or pixels. It creates the space down the right side of the page. */
}
#footer {
font-family: 100% Verdana, Arial, Helvetica, sans-serif;
font-size: 5px;
background: #800517;
border: 2px solid purple;
padding: 0;
margin: 0;
/* padding: 0 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
}
#header img {
padding: 0;
margin: 0;
}
/*--------------------------------------------*/
#links ul {
list-style-type:none;
}
#links li {
padding: 4px;
display:block;
}
#links {
padding: 0;
height: 100%;
text-align:right;
}
/*----------------------------------------------*/
/* Miscellaneous classes for reuse */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
float: left;
margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
Last edited by davie_gravy; 11-04-2008 at 11:38 PM..
|
|
|
|
|
10-31-2008, 02:29 PM
|
Re: Getting <div> to stretch 100% height HELP!
|
Posts: 10,017
Location: Tennessee
|
You didn't like the faux columns method ?
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!
Please login or register to view this content. Registration is FREE
Please login or register to view this content. Registration is FREE
|
|
|
|
|
10-31-2008, 06:40 PM
|
Re: Getting <div> to stretch 100% height HELP!
|
Posts: 29
Name: Dave
|
Would it work for my solution? I have a header, sidebar, and footer, and faux columns calls for me to set a background image on the body... how would I see it? Plus I would want my header and footer on top in order show over it. Also I would have to use absolute positioning wouldn't I? I want this template to scale to resolution as well. In essence, to grow to the right and down using image slices to fill in the void.
|
|
|
|
|
11-02-2008, 10:08 PM
|
Re: Getting <div> to stretch 100% height HELP!
|
Posts: 10,017
Location: Tennessee
|
Quote:
|
Would it work for my solution?
|
Yes.
Quote:
|
and faux columns calls for me to set a background image on the body
|
No, it does not. You could set it as a background on any container, not just the Body.
Quote:
|
Plus I would want my header and footer on top in order show over it.
|
And they would do just that.
Quote:
|
Also I would have to use absolute positioning wouldn't I?
|
Absolutely NOT. There's no reason or need for AP for Faux columns.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!
Please login or register to view this content. Registration is FREE
Please login or register to view this content. Registration is FREE
|
|
|
|
|
11-04-2008, 02:51 AM
|
Re: Getting <div> to stretch 100% height HELP!
|
Posts: 29
Name: Dave
|
LadynRed: Cheers! I got it to work and fill the column along the y-axis. Setting the image caused the body to stretch 100%, which it wasn't doing before, even though I had height set to 100%. Appreciate the help so much!
So I have one more problem. I find that my site looks great in FF, but in IE, I get some extra margin outside my div. I've attached an image of my site with the problem occurring in the header. It also occurs when I use images in my div's. It throws everything off. Any help is greatly appreciated!
http://img142.imageshack.us/img142/9...kgroundvl6.jpg |
|
|
|
|
11-04-2008, 03:52 AM
|
Re: Getting <div> to stretch 100% height HELP!
|
Posts: 6
|
So this is the solution:
html,body {
height: 100%;
}
div#test {
height: 100%;
}
|
|
|
|
|
11-04-2008, 02:00 PM
|
Re: Getting <div> to stretch 100% height HELP!
|
Posts: 29
Name: Dave
|
That is what many suggested, but I never could get it to work correctly. The only method I could get to work was the faux columns method mentioned earlier in this thread.
|
|
|
|
|
11-04-2008, 02:50 PM
|
Re: Getting <div> to stretch 100% height HELP!
|
Posts: 10,017
Location: Tennessee
|
Dave,
I can't tell what's going on in IE from an image. Is that code you posted still relevant ?
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!
Please login or register to view this content. Registration is FREE
Please login or register to view this content. Registration is FREE
|
|
|
|
|
11-04-2008, 02:56 PM
|
Re: Getting <div> to stretch 100% height HELP!
|
Posts: 29
Name: Dave
|
Here's the updated code
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Template Web Design</title>
<link href="styling.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="images/banner_top.jpg" border="0" />
</td>
<td bgcolor="#800517" width="100%"></td>
</tr>
<tr>
<td>
<img src="images/banner_middle.png" border="0" />
</td>
<td bgcolor="#FDD017" width="100%"></td>
</tr>
</table>
<!-- end #header --></div>
<div id="sidebar1">
<!-- <img src="images/banner_side.png" border="0" /> -->
<div id="links">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
</div>
<!-- end #sidebar1 --></div>
<div id="mainContent">
<h1>Main Content</h1>
<p>My main content goes here.</p>More content here, and here, and here, and here, and here.<p>The list goes on...</p><p> The list goes on...</p><p>The list goes on...</p><p>The list goes on...</p><p>The list goes on...</p><p>The list goes on...</p><p>The list goes on...</p><p>The list goes on...</p><p>The list goes on...</p><p>The list goes on...</p><p>The list goes on...</p>
<h2>Sub Content</h2>
<p>More content goes here.</p>More content here, and here, and here, and here, and here.
<!-- end #mainContent --> </div>
<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
<div id="footer">
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<img src="images/banner_bottom_middle.png" border="0" />
</td>
<td bgcolor="#FDD017" width="100%"></td>
</tr>
</table>
<!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>
HTML Code:
html, body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #FFFFFF;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
width: 100%;
background-image:url(images/vert_slice.png);
background-repeat:repeat-y;
height: 100%;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
}
#container {
width: 100%; /* this will create a container 80% of the browser width */
height: 100%;
padding: 0;
/* min-height: 100%; */
background: #FFFFFF;
margin: 0;
/* border: 1px solid #000000; */
text-align: left; /* this overrides the text-align: center on the body element. */
}
#header {
/* padding: 0 10px; this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
padding: 0;
background-image:url(images/slice.png);
background-repeat:repeat-x;
font-family: 100% Verdana, Arial, Helvetica, sans-serif;
font-size: 5px;
float: top;
margin: 0;
}
#sidebar1 {
float: left;
padding: 0;
height: 100%;
background-image:url(images/vert_slice.png);
background-repeat:repeat-y;
/* border-right: 9px solid #FDD017; */
width: 161px; /* since this element is floated, a width must be given */
/* background: #EBEBEB; the background color will be displayed for the length of the content in the column, but no further */
/* padding: 15px 0; top and bottom padding create visual space within this div */
}
#mainContent {
padding-left: 10px;
background: #FFFFFF;
/* margin-left: 17%; */
margin: 0 0 0 16%; /* the right margin can be given in percentages or pixels. It creates the space down the right side of the page. */
}
#footer {
font-family: 100% Verdana, Arial, Helvetica, sans-serif;
font-size: 5px;
background: #800517;
padding: 0;
margin: 0;
/* padding: 0 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
}
#header img {
padding: 0;
margin: 0;
}
/*--------------------------------------------*/
#links ul {
list-style-type:none;
}
#links li {
margin-right: 8px;
padding: 4px;
display:block;
}
#links {
padding: 0;
height: 100%;
text-align:right;
}
/*----------------------------------------------*/
/* Tips for mainContent:
1. the space between the mainContent and sidebar1 is created with the left margin on the mainContent div. No matter how much content the sidebar1 div contains, the column space will remain. You can remove this left margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends.
2. to avoid float drop at a supported minimum 800 x 600 resolution, elements within the mainContent div should be 430px or smaller (this includes images).
3. in the Internet Explorer Conditional Comment below, the zoom property is used to give the mainContent "hasLayout." This avoids several IE-specific bugs.
*/
/* Miscellaneous classes for reuse */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
float: left;
margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
BTW, thank you for your help so far! |
|
|
|
|
11-04-2008, 03:11 PM
|
Re: Getting <div> to stretch 100% height HELP!
|
Posts: 10,017
Location: Tennessee
|
Well, one thing you need to do is put in the width and height dimensions on your header images. Otherwise you're going to have to define a height for #header.
You also need to clear your floats - add clear:both to #footer
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!
Please login or register to view this content. Registration is FREE
Please login or register to view this content. Registration is FREE
|
|
|
|
|
11-04-2008, 04:31 PM
|
Re: Getting <div> to stretch 100% height HELP!
|
Posts: 29
Name: Dave
|
Defining a width and height on my header helped reduce some extra pixels outside the div, but it's still off a hair throwing the alignment off and the same with my footer. I added the clear: both to the footer, but I didn't see any change. EDIT: Got it fixed! Thanks LadynRed for all your help!
Last edited by davie_gravy; 11-04-2008 at 11:37 PM..
|
|
|
|
|
11-05-2008, 03:04 PM
|
Re: Getting <div> to stretch 100% height HELP!
|
Posts: 10,017
Location: Tennessee
|
You're welcome, glad you got it 
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!
Please login or register to view this content. Registration is FREE
Please login or register to view this content. Registration is FREE
|
|
|
|
|
« Reply to Getting <div> to stretch 100% height HELP!
|
|
|
| Thread Tools |
Search this Thread |
|
|
|
Posting Rules
|
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
HTML code is Off
|
|
|
|
