SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    Australia
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Setting height of a column

    I am working on a fixed width site that has a header and footer. The header is inside a container div and i have used paul's technique for putting a footer after the container div, clearing it..etc.

    I want to put a left column into the container div and have done so with a float. The only problem I have is that if I set the height of this left column float to 100% it is far too big in IE6. In firefox it will only show the colour of the float to the extent of the content inside it...so it may only be two lines of text high and then nothing. From my understanding, you can use a repeated image to fix the firefox problem but that still makes the column too big in IE6.

    Is there a way to get the left column to be only as high as needed to be inside the container div which is already 100%?

    I'm not sure how to attack this one and would really appreciate some guidance.

    Thanks.

    Brad.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I'd probably need to see the code to give a complete answer but perhaps if I explain whats happening it might help.

    You can really only use 100% height from the top of the window to the bottom of the window as this is your 100%. If you place an element half way down the page (or under a header) then thats where the 100% will start from and it will continue for a full 100% (the viewport height) until its passed the bottom of the window and continues until 100% is reached.

    This is of course relative to the parent based on 100% as well. If the parent was a set height in pixels then 100% should give you the exact height of the parent.

    However this is only ie's interpretation of 100% whereas mozilla will not render an elements height as a percentage of a parent whos height is also specified in percentage unless that parent is the body (phew!). What this means is that mozilla will inherit a 100% from html,body for the first container in the html (where the body is its parent) but subsequent nestings will not inherit this 100% (unlike ie) and will collapse to zero.

    I'm not sure that either browser is right or wrong but thats just the way it is and we have to work with it

    So the answer to your question is that you can't nest another 100% container inside another 100% container reliably. The best option is to use a repeating background gif on the parent to imitate the column and then just float your content over it.

    Of course if I saw your code I might be able to offer something else but it sounds like what I've said will still stand

    Paul

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    Australia
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul.
    Here is my index.php
    PHP Code:
    <!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">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link href="styles/printedvisions.css" rel="stylesheet" type="text/css">
    </head>

    <body>
    <!-- Start outer div -->
    <div id="outer">
        <?php include 'header.html';?>
        <?php include 'navigation.html';?>
        
        <div id="leftpanel">
        Left Panel
        </div>
        
        <div id="clearfooter"></div>
    </div> 
    <!-- End outer div -->

    <div id="footer"> 
      <?php include 'footer.html';?>
    </div>

    <div id="footerbreak"></div> <!-- Add space between bottom and browser. -->

    </body>
    </html>
    Here is the stylesheet.
    Code:
    /* CSS Document */
    /* commented backslash hack v2 \*/ 
    html, body {height:100%;} 
    /* end hack */
    
    body {
    padding:0;
    margin:0;
    text-align: center; /*Center the outer div*/
    color: #000000;
    }
    
    #outer {
    height:100%;
    min-height: 100%; /* for mozilla*/
    width: 760px;
    background: #FFF;
    margin: 10px auto -50px auto; /* -52px for bottom margin to allow for footer*/
    border: 1px solid #000;
    text-align:left; /*so outer isn't centered as body is*/
    }
    
    html>body #outer{height:auto;} /*for mozilla as IE treats height as min-height anyway*/
    
    /* -----< START HEADER STYLE >----- */
    #header {
    margin: 0 auto;
    width: 760px;
    height:100px;
    background-image: url(../images/headergrad.jpg);
    background-repeat: repeat-x;
    }
    
    #headerimage {
    float:left;
    width:238px;
    height:100px;
    background-image: url(../images/headerimage.jpg);
    background-repeat: no-repeat;
    }
    
    #companylogo {
    float: left;
    width: 240px;
    height: 30px;
    margin-top: 45px;
    background-image: url(../images/companylogo.jpg);
    background-repeat: no-repeat;
    }
    
    #webaddress {
    float: right;
    width: 173px;
    height: 18px;
    margin-top: 75px;
    background-image: url(../images/webaddress.jpg);
    background-repeat: no-repeat;
    }
    /* -----< END HEADER STYLE >----- */
    
    /* -----< START NAVBAR STYLE >----- */
    #navbar {
    margin: 0 auto;
    width: 760px;
    height:30px;
    background-image: url(../images/navgrad.jpg);
    background-repeat: repeat-x;
    border-top:1px solid #696969;
    border-bottom:1px solid #696969;
    }
    
    #navleftlinks {
    float: left;
    margin: 0px 0px 0px 5px;
    height:30px;
    }
    
    #navrightlinks {
    float: right;
    margin: 0px 5px;
    height:30px;
    }
    
    a.navlink, a.unlinked {
    line-height:28px; /*to ensure that text is centered vertically within the navbar*/
    font-family: arial, verdana;
    font-size: 11px;
    color: #363636;
    font-weight: bold;
    }
    
    a.navlink:link {
    font-family: arial, verdana;
    font-size: 11px;
    color: #363636;
    text-decoration: none;
    font-weight: bold;
    }
    
    a.navlink:visited {
    font-family: arial, verdana;
    font-size: 11px;
    color: #363636;
    text-decoration: none;
    font-weight: bold;
    }
    
    a.navlink:hover {
    font-family: arial, verdana;
    font-size: 11px;
    color: #FFF;
    text-decoration: none;
    font-weight: bold;
    }
    
    a.navlink:active {
    font-family: arial, verdana;
    font-size: 11px;
    text-decoration: none;
    font-weight: bold;
    }
    /* -----< END NAVBAR STYLE >----- */
    
    /* -----< START CONTENT STYLE >----- */
    #leftpanel {
    float:left;
    text-align:left;
    margin: 0px 0px 0px 0px;
    padding: 0px;
    width: 230px;
    height: 100%;
    background: #658CA3;
    display:inline; /*ie fix*/
    }
    /* -----< START CONTENT STYLE >----- */
    
    
    /* -----< START FOOTER STYLE >----- */
    #clearfooter {
    clear:both;
    margin: 0px;
    padding: 0px;
    height:40px;}/*needed to make room for footer*/
    
    #footer {
    width:760px;
    clear:both;
    height:50px;
    margin: 0px auto 0px;
    background: #316684;
    border-bottom:1px solid #000;
    text-align:center;
    position:relative;
    }
    
    #footerbreak {
    width:760px;
    height:10px;
    margin: 0px auto;
    background: #FFF;
    }
    
    * html #footer {/*only ie gets this style*/
    \height:52px;/* for ie5 */
    he\ight:50px;/* for ie6 */
    }
    
    a.footer, a.copyright {
    color: #FFF;
    font-family: arial, verdana;
    font-size: 10px;
    color: #FFF;
    line-height:100%;
    }
    
    a.footer:link {
    font-family: arial, verdana;
    font-size: 11px;
    color: #FFF;
    text-decoration: none;
    font-weight: bold;
    }
    
    a.footer:visited {
    font-family: arial, verdana;
    font-size: 11px;
    color: #FFF;
    text-decoration: none;
    font-weight: bold;
    }
    
    a.footer:hover {
    font-family: arial, verdana;
    font-size: 11px;
    color: #363636;
    text-decoration: none;
    font-weight: bold;
    }
    
    a.footer:active {
    font-family: arial, verdana;
    font-size: 11px;
    text-decoration: none;
    font-weight: bold;
    }
    /* -----< END FOOTER STYLE >----- */
    It has some includes in it with php. I can see that the #outer is 100% so the #leftpanel will most likely inherit 100% of the height of the #outer - the browser window size. Is it possible to accomplish a panel that just fills in the balance of the #outer or am I splitting hairs and should I just be happy with this.

    I guess as it is mainly a pixel based fixed width site I shouldn't have too much to worry about. I should just set up the height in pixels and put the content inside it...but if the user changes the text sizes of their browser will I run into trouble with text being cut off inside the panel?

    Thanks.

    Brad.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Well I could do it with some complicated negative margins and floating (or thick borders as per doug livingstones layout) etc but that would make it awkward and theres a simple solution in just repeating the background in #outer instead.

    Make yourself an image the same width and color as left panel and 5px high (230px x 5px). This image is then repeated on the left side of outer which is the only element on the page that can hold 100% height.

    Code:
    #outer {
    height:100%;
    min-height: 100%; /* for mozilla*/
    width: 760px;
    background: #FFF url(leftpanel.gif) repeat-y left top;
    margin: 10px auto -50px auto; /* -52px for bottom margin to allow for footer*/
    border: 1px solid #000;
    text-align:left; /*so outer isn't centered as body is*/
    }
    Then theres no need for any background color in leftpanel. Leftpanel will just float on top. This is the easiest and most cross browser way to do this.

    If you can't use this method for some reason or other (maybe you are using outer for a bg image already) then shout and I'll show you some other method

    Paul


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •