SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Apr 2003
    Location
    Lubbock, Texas
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Fluid Height for Content

    How do I make this page stretch with the content? I have read some articles on this, but I still can't get the footer and the two border divs to expand.

    The CSS file is here

    Any suggestions are appreciated.

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

    If you want your height to be fluid then there is no point in setting a height for it as mozilla will restrict the height to the setting stated. IE will expand the div to accommodate more text as it treats height as though it were minimum height. If you want the element to expand then leave the height out and it will default to auto.

    Following content will only flow logically when following a static element. Therefore if your content is placed absolutely then it is removed from the flow and the footer will not take any notice. The only way to place the footer in this case would be to absolutely place it exactly where you want it, which isn't very fluid.

    Most of your page flows logically and therefore does not need to be absolutely placed and elements can follow one and other in the normal flow. This will allow the footer to expand as required to accomodate the text.

    As a rough example I have converted some of your page as below. This is not meant to be a full solution as I have just coded it as an example.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    " http://www.w3.org/TR/html4/loose.dtd "> 
    <html>
    <head>
    <title>OBC Sub page</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
    /*------------------- THE MARGINS, ALIGNMENT AND BACKGROUND TILE -------------------*/
    html body
    {
    margin: 14px 0px;
    height: 100%;
    text-align: center;
    background-image: url(http://visualnotion.com/obc/images/tile4.gif);
    background-repeat: repeat;
    }
    
    /*------ THE BASIC SHELL STRUCTURE: WHITE BACKGROUND/BORDER AND DARK BORDER ------*/
    #back
    {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    background: #FFFFFF;
    width: 672px;
    padding-bottom:3px;
    }
    #border
    {
    position:relative;
    margin-top: 3px;
    margin-left: 3px;
    
    margin-right:3px;
    text-align: center;
    border: 1px solid #262726;
    width: 666px;
    background-color: #F1F0E7;
    voice-family: "\"}\""; /* BOX MODEL HACK FOR IE */
    voice-family: inherit;
    width: 664px;
    
    }
    html>body #border
    {
    border: 1px solid #262726;
    width: 664px;
    top:3px;
    margin-bottom:3px;
    }
    /*--------------------------------- THE BANNER DIV ---------------------------------*/
    #banner {
    height: 59px;
    text-align: left;
    background-color: #B3AE86;
    background-image: url(http://visualnotion.com/obc/images/banner_tile.gif);
    background-repeat: repeat-x;
    background-position: left top;
    }
    /*------------------------------- THE NAVIGATION DIVS AND UNORDERED LIST NAV LINKS-------------------------------*/
    #navborderstop {
    overflow:hidden;
    height: 1px;
    border-top: 1px solid #002855;
    background-color: #A29A69;
    }
    #nav {
    height: 22px;
    padding-top: 2px;
    border-top: 1px solid #A29A69;
    border-bottom: 1px solid #A29A69;
    background-color: #14553B;
    background-image: url(http://visualnotion.com/obc/images/nav_tile.gif);
    background-repeat: repeat-x;
    background-position: left top;
    }
    #nav ul {
    padding: 0;
    margin: 1px;
    white-space: nowrap;
    color: #FFFFFF;
    float: left;
    }
    #nav ul li {
    display: inline;
    }
    #nav ul li a {
    font-family: Georgia, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #FFFFFF;
    text-decoration: none;
    padding-left: 6px;
    padding-right: 6px;
    border-right: 2px solid #14553B;
    border-left: 2px solid #14553B;
    }
    #nav ul li a:hover {
    text-decoration: none;
    border-right-width: 2px;
    border-right-style: dotted;
    border-right-color: #FFFFFF;
    border-left-width: 2px;
    border-left-style: dotted;
    border-left-color: #FFFFFF; /* light green - #558975*/
    }
    #navbordersbottom {
    overflow:hidden;
    height: 1px;
    border-bottom: 2px solid #002855;
    background-color: #A29A69;
    }
    
    /*--------------------------- THE PHOTO AND WELCOME TEXT ---------------------------*/
    #churchphoto {
    position: absolute;
    width: 146px;
    height: 180px;
    left: 0px;
    top: 87px;
    background-color: #F1F0E7;
    }
    
    /*--------------------------- THE CONTENT DIV FOR SUB PAGES ---------------------------*/
    #content {
    margin-right:170px;
    /*height: 355px;*/
    text-align: left;
    padding: 12px;
    background-image: url(http://visualnotion.com/obc/images/shadow_div.gif);
    background-repeat: repeat-x;
    background-position: left top;
    background-color: #F1F0E7;
    }
    
    /*--------------------- THE NEWS AND EVENTS COLUMN, TEXT, AND LINKS ---------------------*/
    #newscontent {
    float:right; 
    height:100%;
    text-align: left;
    width:169px;
    background-image: url(http://visualnotion.com/obc/images/vertical_shadow.gif);
    background-repeat: repeat-y;
    background-position: left top;
    background-color: #D4D3B7;
    }
    #news{padding:5px}
    .newsheadlines {
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: normal;
    color: #3A3C33;
    text-align: left;
    border-bottom: 2px;
    border-color: #3A3C33;
    }
    #newsdivider {
    height: 2px;
    margin-top: 8px;
    margin-bottom: 8px;
    border-bottom: 1px dashed #808470;
    }
    
    /*--------------------------- THE FOOTER DIV AND FOOTER LINKS ---------------------------*/
    #footer {
    clear:both;
    height: 17px;
    border-top: 2px solid #14553B;
    text-align: center;
    font-family: Verdana, sans-serif;
    font-size: 10px;
    font-weight: normal;
    color: #171717;
    padding-top: 3px;
    background-color: #B8B589;
    background-image: url(http://visualnotion.com/obc/images/footer_tile.gif);
    background-repeat: repeat-x;
    background-position: left top;
    }
    a.footerlink:link {
    font-family: Verdana, sans-serif;
    font-size: 10px;
    font-weight: normal;
    color: #171717;
    text-decoration: none;
    }
    a.footerlink:visited {
    font-family: Verdana, sans-serif;
    font-size: 10px;
    font-weight: normal;
    color: #171717;
    text-decoration: none;
    }
    a.footerlink:hover {
    font-family: Verdana, sans-serif;
    font-size: 10px;
    font-weight: normal;
    color: #171717;
    text-decoration: underline;
    }
    a.footerlink:active {
    font-family: Verdana, sans-serif;
    font-size: 10px;
    font-weight: normal;
    color: #171717;
    text-decoration: none;
    }
    
    /*----------------------------- THE TEXT FORMATTING TAGS -----------------------------*/
    p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: normal;
    text-align: left;
    /*margin: 12px;*/
    color: #171717;
    }
    h1
    {
    text-align: left;
    font-family: Georgia, serif;
    font-size: 22px;
    font-weight: normal;
    margin-top: 12px;
    margin-bottom: 0px;
    color: #002855;
    }
    h2
    {
    text-align: left;
    font-family: Georgia, serif;
    font-size: 16px;
    font-weight: bold;
    margin-top: 12px;
    margin-bottom: 0px;
    color: #002855;
    }
    h3 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: normal;
    text-align: left;
    color: #171717;
    }
    h4 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    text-align: left;
    margin: 0px;
    color: #171717;
    }
    .h4home {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: normal;
    text-align: left;
    padding: 34px 12px 12px;
    color: #171717;
    }
    .h4bold {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-align: left;
    padding: 0px;
    color: #171717;
    }
    h5 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: normal;
    text-align: left;
    margin: 0px;
    color: #171717;
    }
    
    </style>
    </head>
    <body>
    <div id="back">
    <div id="border">
    <div id="banner"><img src="<A href="http://visualnotion.com/obc/images/obc_logo.gif">http://visualnotion.com/obc/images/obc_logo.gif" alt="Oakwood Baptist Logo" width="195" height="59"></div>
    <div id="navborderstop"></div>
    <div id="nav">
    <ul>
    <li><a href="index.html" class="nav">Home</a></li>
    <li><a href="sub.html" class="nav">Beliefs</a></li>
    <li><a href="sub.html" class="nav">About OBC</a></li>
    <li><a href="sub.html" class="nav">Activities</a></li>
    <li><a href="sub.html" class="nav">Ministries</a></li>
    <li><a href="sub.html" class="nav">Prayer Chapel</a></li>
    <li><a href="sub.html" class="nav">Resources</a></li>
    <li><a href="sub.html" class="nav">Contact</a></li>
    </ul>
    </div>
    <div id="navbordersbottom"></div>
    
    <div id="newscontent">
    <img style="vertical-align:top" src="<A href="http://visualnotion.com/obc/images/news_top_shadow.gif">http://visualnotion.com/obc/images/news_top_shadow.gif" alt="Top Shadow Edge for News Column" width="169" height="8">
    <div id="news">
    <span class="newsheadlines">Lorem ipsuj Options. Dolor sit amet, consectetur ferrter adipwcing elit.</span>
    <div id="newsdivider"></div>
    <span class="newsheadlines">Lorem ipsuj Options. Dolor sit amet, consectetur ferrter adipwcing elit.</span>
    <div id="newsdivider"></div>
    <span class="newsheadlines">Lorem ipsuj Options. Dolor sit amet, consectetur ferrter adipwcing elit.</span>
    <div id="newsdivider"></div>
    <span class="newsheadlines">Lorem ipsuj Options. Dolor sit amet, consectetur ferrter adipwcing elit.</span>
    <div id="newsdivider"></div>
    <span class="newsheadlines">Lorem ipsuj Options. Dolor sit amet, consectetur ferrter adipwcing elit.</span>
    <div id="newsdivider"></div>
    <span class="newsheadlines">Lorem ipsuj Options. Dolor sit amet, consectetur ferrter adipwcing elit.</span>
    </div>
    <img style="vertical-align:bottom" src="<A href="http://visualnotion.com/obc/images/news_top_shadow.gif">http://visualnotion.com/obc/images/news_top_shadow.gif" alt="Top Shadow Edge for News Column" width="169" height="8">
    </div>
    
    
    
    <div id="content">
    <h1>Lorem ipsuj Options</h1>
    <p>dolor sit amet, consectetur ferrter adipwcing elit, sed daim nimumy eiusmod tempor incidunt ut labore
    et dolore magnaaliquam etat volupat. Ut enim ad minimim venaiami quis nostrud exercitation ullamcorpor
    suscipit laboris nisi ut aliquip ex ea comodo consequat. Duis autem vel eum irure dolor in reprehen
    sdetrit invo lupatate velit ese molestaire son consequat,.Lorem ipsuj dolor sit amet, consectetur
    adipwcing elit, sed daim nimumy eiusmod tempor incidunt ut labore et dolore magnaaliquam etat volupat. 
    Ut enim ad minimim venaiami quis nostrud exercitation ullamcorpor suscipit laboris nisi ut aliquip ex ea
    comodo consequat. Duis autem vel eum irure dolor in reprehensdetrit involupatate velit ese molestaire
    son consequat. Lorem ipsuj dolor sit amet, condaim nimum eiusm od tempor consectetur adipwcing elit, sed
    daim nimum eiusm od tempor incidunt ut labore et dolore magnaa liquam etat volupat. Ut enim ad min imim
    venaiami quis nostrud exercitation ullamcorpor suscipit laboris nisi ut aliquip ex ea comodo consequat.</p>
    <p>Duis autem vel eum irure dolor. in reprehensdetrit involupatatvelit esemolestaire. son consequat. Lorem
    ipsuj dolor sit amet,consectetur adipwcing elit, daim nimumy eiusmod tempor incidunt ut labore et dolore
    magn aaliquam etat volupat. Ut enim ad minimim venaiami quis nostrud.exe. ullamcorpor suscipit laboris
    nisi ut aliquip ex ea comodo consequat. Duis autem vel eum irure dolor in. reprehensdetrit involupatate
    velit ese molestaire son consequat Lorem ipsuj dolor sit amet, consectetur adipwcing elit, sed daim nimumy
    eiusmod tempor incidunt ut labore et dolore magnaaliquam etat volupat. Ut enim ad minimim venaiami quis
    nostrud exercitation ullamcorpor suscipit laboris nisi ut aliquip ex ea comodo consequat. Duis autem vel
    eum irure dolor in reprehensdetrit involupatate velit ese molestaire son consequat. Lorem ipsuj Options.
    dolor sit amet, consectetur ferrter adipwcing elit, sed daim nimumy eiusmod tempor incidunt ut labore et
    dolore magnaaliquam etat volupat.</p>
    <p>Ut enim ad minimim venaiami quis nostrud exercitation ullamcorpor
    suscipit laboris nisi ut aliquip ex ea comodo consequat. Duis autem vel eum irure dolor in reprehen
    sdetrit invo lupatate velit ese molestaire son consequat,.Lorem ipsuj dolor sit amet, consectetur
    adipwcing elit, sed daim nimumy eiusmod tempor incidunt ut labore et dolore magnaaliquam etat volupat.
    Ut enim ad minimim venaiami quis nostrud exercitation ullamcorpor suscipit laboris nisi ut aliquip ex ea
    comodo consequat.</p>
    </div>
    
    <div id="footer">site design by <a href="<A href='http://visualnotion.com"class="footerlink">Visual'>http://visualnotion.com"class="footerlink">Visual Notion</a></div>
    
    </div>
    
    </div>
    </body>
    </html>
    If you want the right column to be a full length column then life gets a bit more complicated. The easiest solution is to design the content id with a background image that runs down the right hand side with a width of 169px (i.e. the same size as your news). If you then let the new headlines float over the bg mage strip then you will get the full length column effect (if that's what you want).

    Hope this helps.

    Paul

  3. #3
    SitePoint Member
    Join Date
    Apr 2003
    Location
    Lubbock, Texas
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    Thank you so much for the help. I have tried what you suggested and it looks great in Mozilla and Safari, but it looks off in IE 5 for Mac. Do you know what is causing the extra spacing around the nav div and the footer div?

    Here is the code you sent me: http://visualnotion.com/obc/fluid_height.html

    I have been working on the external CSS version, but I was getting frustrated trying to figure out where the extra space was coming from.

    Thanks again for your help.

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

    Sorry I don't have access to a Mac (I'll have to invest in a cheap one just to check my code).

    Maybe someone else who has a mac can take a look as I'd just be guessing.

    Otherwise it's down to trial and error. (I usually deconstruct the page until the problem disappears (or reappears) so that you can identify what's causing the extra space. Copy the structure to another page and then reduce the code bit by bit. If it's the nav causing a problem try that on a page by itself and see if the space is still there etc. These are the techniques I use to find errors and seem to work better than just fiddling with the code. You need to identify where the problem occurs in the code.)

    If it's just extra space then it's probably down to margins (or padding ) on the divs, or p elements.

    However I did test the page in IE6, Moz 1.2, Firebird 0.6 and Opera7 (all pC) and they looked ok, so it must be something specific to the mac ie.

    Does Mac IE5 suffer from the broken box model? If so check all the borders, padding and widths are accounted for (you will have to do this for ie5 anyway.)

    Sorry I can't be more specific, hopefully someone else will have a look at it on a mac for you.

    Paul

  5. #5
    SitePoint Member
    Join Date
    Apr 2003
    Location
    Lubbock, Texas
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am not sure if IE for Mac suffers from the broken box model. I have tried eleminating the code bit by bit to see where the problem is. Although, I may need to do a more thorough examination as I was tired and, after a couple of hours, you tend to lose focus.

    I may look over it again tonight.

    Thanks again.

  6. #6
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by CreativeResident
    I am not sure if IE for Mac suffers from the broken box model.
    IE5/Mac doesn't suffer from the broken box model that IE5/Windows does, but it still has a couple of CSS quirks that you should probably take into consideration when designing.

    This page has a good list of CSS parsing bugs in IE/Mac.


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
  •