473,322 Members | 1,806 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,322 software developers and data experts.

Div heights css

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
4 1425
drhowarddrfine
7,435 Expert 4TB
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
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
7,435 Expert 4TB
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
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

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

Similar topics

1
by: Tyler Carver | last post by:
I am trying to create a table that 100% of the viewport with three rows. The top and bottom rows have a fixed height and the center row I want to take up the rest of the space. This work fine in...
1
by: Tyler Carver | last post by:
I am trying to create a table that is 100% of the viewport with three rows. The top and bottom rows have a fixed height and the center row I want to take up the rest of the space. This work fine...
3
by: cpt | last post by:
I read that if one uses "table-layout:fixed" then table rendering is speeded by setting row height. All my rows are 285 px high. 1) Is this true? 2) If true, how does one set row-height for the...
7
by: lauren quantrell | last post by:
A while back I got a requirement for the client to be able to adjust the relative heights of two subforms by click-dragging the mouse and I came up with a kludge solution using a border control...
1
by: Beringer | last post by:
Does anybody know a way to get the heights of the various lines of text in a RichTextBox? I'm not sure if "height" is the proper term. But what I'm getting at is that if you set the font size...
1
by: tshad | last post by:
Why are the text box heights of the input/file type textbox for uploading files a smaller height than a normal textbox? They have the exact same font and the same size font. But the heights...
2
by: sfeher | last post by:
Hi All, I am having trouble big times figuring out a way of forcing a DIV to be in synch with another DIV's height in a (mostly vertically) fluid layout in a web app context. The first one has...
7
by: hestres | last post by:
Hello, I'm having trouble figuring out how to make sure that all my DIVs in this layout are of the same height. Here's an example of a page where I'm having this problem: ...
5
by: =?Utf-8?B?bWljaGFlbCBzb3JlbnM=?= | last post by:
I want to be able to increase or decrease row heights of a populated DataGridView from the keyboard. I set up a test program with menu items to increase and decrease, assigned shortkey keys...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.