Div heights css

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Rinventive
    New Member
    • Mar 2008
    • 3
    #1

    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:

    [code=css]
    /************ PAGE LAYOUT *************** **************/

    html,body {

    float:left;
    background-image: url(images/background.png) ;
    background-repeat: repeat;
    height: 100%;
    margin:0;
    padding:0;

    }

    /************ HEADER *************** *************** ****/

    #header {

    float: left;
    width: 100%;
    height: 114px;;
    background-image: url(images/h_spacer.png);
    background-repeat: repeat-x;
    background-position: top;

    }


    #headerpic {

    background-attachment:fixe d;
    background-position: top, center;

    }


    /************ HORIZONTAL NAVIGATION BAR *************/

    #h_Nav {

    float: left;
    width: 100%;
    display: inline;

    background-color: rgb(60,60,60);

    margin-bottom: 3px;

    }

    /*********** LOGIN FORM *************** *************** ********/

    .Login {

    float: right;
    width: 100%;

    text-align: right;
    text-decoration: none;
    font-family: tahoma;
    font-size: 10;
    font-weight: bold;
    color: white;

    }

    .LoginButton {

    background-color: rgb(68, 84, 108);
    text-align: center;
    text-decoration: none;
    font-family: tahoma;
    font-size: 9;
    color: white;


    }

    .LoginTextbox {

    text-decoration: none;
    font-family: tahoma;
    font-size: 9;
    font-weight: bold;
    color: black;


    }




    /************ PAGE BODY *************** *************** ******/

    #border_left{
    float: left;
    width: 33px;
    height: 100%;
    background-image: url(images/border_left.png );
    background-repeat: repeat-y;
    background-position: top;

    }

    #border_right{
    float: left;
    width: 46px;
    height: 100%;
    background-image: url(images/border_right.pn g);
    background-repeat: repeat-y;
    background-position: top;

    }


    #ContentBody {

    float: left;
    width: 692px;
    height: 100%;
    background-color: rgb(255,255,255 );
    }


    #TextContent {

    background-color: rgb(255,255,255 );
    height: 100%;
    margin-top: 8px;
    margin-right: 8px;
    margin-bottom: 8px;
    margin-left: 8px;
    }


    /*********** VERTICLE NAVIGATION *************** ***************/

    #v_NavBody {

    float: left;
    width: 150px;
    height: 100%;
    background-color: rgb(69,147,216) ;

    }

    .v_Nav {

    background-color: rgb(0,0,0);
    text-decoration: none;
    font-family: tahoma;
    font-size: 12;
    font-weight: bold;
    color: white;

    }

    .v_SubNav {

    background-color: rgb(255,255,255 );
    text-decoration: none;
    font-family: tahoma;
    font-size: 12;
    font-weight: bold;
    color: black;


    }


    form {
    margin-top: -1em;
    margin-bottom: 0;
    display: inline;
    }
    [/code]

    Here is the page code:
    [html]
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Rewite c 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'><di v 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_righ t'></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
    Last edited by drhowarddrfine; Mar 15 '08, 08:39 PM. Reason: Please use code tags
    Tags: None
    • drhowarddrfine
      Recognized Expert Expert
      • Sep 2006
      • 7434
      #2
      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.

        Comment

        • Rinventive
          New Member
          • Mar 2008
          • 3
          #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.

            Comment

            • drhowarddrfine
              Recognized Expert Expert
              • Sep 2006
              • 7434
              #4
              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.

                Comment

                • Rinventive
                  New Member
                  • Mar 2008
                  • 3
                  #5
                  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 ?

                    Comment

                    Previous template Next
                    Working...