By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,747 Members | 1,683 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,747 IT Pros & Developers. It's quick & easy.

Div heights css

P: 3
I am having problems with divs and height. I notice this is a very common problem, I have tried many of the fixes and I am still running into problems.

I am working on this page.

My problem is the Div columns will not stretch to 100%, or 100% seems to be the users screen height and not the content height. I would like all the columns to stretch to the height of the page content.

http://www.rewitec.ca/index.php?CategoryID=53

I am using an external style sheet.

Here is the code:

Expand|Select|Wrap|Line Numbers
  1. /************ PAGE LAYOUT *****************************/
  2.  
  3. html,body {
  4.  
  5. float:left;
  6. background-image: url(images/background.png);
  7. background-repeat: repeat;
  8. height: 100%;
  9. margin:0;
  10. padding:0; 
  11.  
  12. }
  13.  
  14. /************ HEADER **********************************/
  15.  
  16. #header {
  17.  
  18. float: left;
  19. width: 100%;
  20. height: 114px;;
  21. background-image: url(images/h_spacer.png);
  22. background-repeat: repeat-x;
  23. background-position: top;
  24.  
  25. }
  26.  
  27.  
  28. #headerpic {    
  29.  
  30. background-attachment:fixed;
  31. background-position: top, center;
  32.  
  33. }
  34.  
  35.  
  36. /************  HORIZONTAL NAVIGATION BAR *************/
  37.  
  38. #h_Nav {
  39.  
  40. float: left;
  41. width: 100%;
  42. display: inline;
  43.  
  44. background-color: rgb(60,60,60);
  45.  
  46. margin-bottom: 3px;
  47.  
  48. }
  49.  
  50. /*********** LOGIN FORM **************************************/
  51.  
  52. .Login {
  53.  
  54. float: right;
  55. width: 100%;
  56.  
  57. text-align: right;
  58. text-decoration: none;
  59. font-family: tahoma;
  60. font-size: 10;
  61. font-weight: bold;
  62. color: white;
  63.  
  64. }
  65.  
  66. .LoginButton {
  67.  
  68. background-color: rgb(68, 84, 108);
  69. text-align: center;
  70. text-decoration: none;
  71. font-family: tahoma;
  72. font-size: 9;
  73. color: white;
  74.  
  75.  
  76. }
  77.  
  78. .LoginTextbox {
  79.  
  80. text-decoration: none;
  81. font-family: tahoma;
  82. font-size: 9;
  83. font-weight: bold;
  84. color: black;
  85.  
  86.  
  87. }
  88.  
  89.  
  90.  
  91.  
  92. /************ PAGE BODY ************************************/
  93.  
  94. #border_left{
  95. float: left;
  96. width: 33px;
  97. height: 100%;
  98. background-image: url(images/border_left.png);
  99. background-repeat: repeat-y;
  100. background-position: top;
  101.  
  102. }
  103.  
  104. #border_right{
  105. float: left;
  106. width: 46px;
  107. height: 100%;
  108. background-image: url(images/border_right.png);
  109. background-repeat: repeat-y;
  110. background-position: top;    
  111.  
  112. }
  113.  
  114.  
  115. #ContentBody {
  116.  
  117. float: left;
  118. width: 692px;
  119. height: 100%;
  120. background-color: rgb(255,255,255);
  121. }
  122.  
  123.  
  124. #TextContent {
  125.  
  126. background-color: rgb(255,255,255);
  127. height: 100%;
  128. margin-top: 8px;
  129. margin-right: 8px;
  130. margin-bottom: 8px;
  131. margin-left: 8px;
  132. }
  133.  
  134.  
  135. /*********** VERTICLE NAVIGATION ******************************/
  136.  
  137. #v_NavBody {
  138.  
  139. float: left;
  140. width: 150px;
  141. height: 100%;
  142. background-color: rgb(69,147,216);
  143.  
  144. }
  145.  
  146. .v_Nav {
  147.  
  148.  background-color: rgb(0,0,0);
  149.  text-decoration: none;
  150.  font-family: tahoma;
  151.  font-size: 12;
  152.  font-weight: bold;
  153.  color: white;
  154.  
  155. }
  156.  
  157. .v_SubNav {
  158.  
  159.  background-color: rgb(255,255,255);
  160.  text-decoration: none;
  161.  font-family: tahoma;
  162.  font-size: 12;
  163.  font-weight: bold;
  164.  color: black;
  165.  
  166.  
  167. }
  168.  
  169.  
  170. form {
  171.   margin-top: -1em;
  172.   margin-bottom: 0;
  173.   display: inline;
  174.  } 
  175.  
Here is the page code:
[html]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Rewitec Canada</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href='style.css' rel='stylesheet' type='text/css'>
</head>
<body>


<div id='header'><div id='headerpic'><img src='images/header.png' alt='Rewitec Canada'></div></div>
<div id='border_left'></div>

<div id='v_NavBody'>TEXT</div>

<div id='ContentBody'>
<div id='h_Nav'>TEXT</div>
TEXT
</div>


<div id='border_right'></div>
</body>
</html>
[/html]

please take a look at this category on the page in both FF and IE.

Where am I going wrong

Thank you for any help
Mar 15 '08 #1
Share this Question
Share on Google+
4 Replies


drhowarddrfine
Expert 5K+
P: 7,435
When you use percentage, the question to ask is "Percent of what?" Normally it would be the percent of the containing/parent element. But, if so, what is the size of that parent? That needs a defined size and, if it, too, is in percent then...percent of what?

In your case, you show the html, body and other elements set to float. Floating removes that element from the normal flow and some of them may be losing their reference point. Try to let elements fall where they may without positioning them and decrease the need to float everything.

Your doctype is incorrect and IE will go into quirks mode. Use this one:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

These CSS errors need fixing.
Mar 15 '08 #2

P: 3
Thanks for the quick reply.

I'll fix these problems to the best of my ability. Wow changing the doctype has mixed everything up, this might take a bit.

Again thank you. I'm sure I'll be back with more questions shortly.
Mar 15 '08 #3

drhowarddrfine
Expert 5K+
P: 7,435
The reason things change is because we are changing the rules. No doctype means rendering in quirks, which is so 20th century. Current standards require the doctype I showed you. For more info, see the article about doctypes in the Howto section above.
Mar 15 '08 #4

P: 3
I have fixed the errors and the page is now layed out correctly in FF and IE.

The last problem I am have is how do I make my left and right borders and nav_body height relative to the content height.

I am new to css (I'm sure you noticed)

I'm not sure where to begin fixing this. I have removed the height: 100% from the body and this seems to allow the content div to stretch correctly, but leaves my #border_left, #border_right and #v_NavBody from showing..does not stretch to the content height.

Sorry to be such a newb with css, but I'm learning.

If the percent is based on the parent container, This means that I need to create a container that holds all the columns and have that stretch to fit the content? ....making all the columns stretch to fill this container ?
Mar 15 '08 #5

Post your reply

Sign in to post your reply or Sign up for a free account.