0

I'm not really good at CSS and I'm trying to figure out how to do the following for a website I need to adapt:

container_div(directly under body) of 100% height (body is also 100% height), with header of 170px height, then content div (which should be stretched from bottom header down to), footer div with copyright notice of 50px height.

in content there should be a left and right div (both position: relative; float: right/left;)

almost something like: yet another HTML/CSS layout challenge - full height sidebar with sticky footer

but then content should be overflow: hidden (i use a custom scrollbar script)

The part which I can't figure out is how to let the content div (between the header and footer div) consist of the remaining hight.

I've tried fiddling with adding background to container with 100% height, but since my header and footer are transparant you can see the background of content through them which is ugly.

Can somebody give me a nudge in the right direction with a standard template? I can figure out the rest myself.

Just the CSS code for the content div would be fine either (with some explanation regarding to the rest of the css)

EDIT:

Just so we have something to work with (which is easier to answer my question to)

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 

<HTML xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=utf-8" />
<TITLE>stretchy footer</TITLE>
<LINK rel="stylesheet" type="text/css" href="index.css" />
</HEAD>

<BODY>
<DIV id="container">

    <DIV id="header">
        <IMG src="./image/header2.png">
    </DIV>


    <DIV id="left">
        <DIV id="content">
            This is the div which needs to be stretched between header and footer.
        </DIV>
    test<BR>
    test<BR>
    test<BR>
    test<BR>
    test<BR>


    </DIV>

    <DIV id="right">
    t
    </DIV>

</DIV>
</BODY>
</HTML>

css style:

    /*          <GENERAL>           */
    /* cross-browser reset stylesheet */
    * { margin: 0; padding: 0; border-style: none;}

    *:hover, *:active, *:focus {
        outline: 0;
    }

    html {
        filter: expression(document.execCommand("BackgroundImageCache", false, true));
        line-height: 1;

        -moz-user-select: none;
        -moz-user-select: -moz-none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        user-select: none;
        -webkit-min-device-pixel-ratio:0;
        height: 100%;}
    body {height: 100%;} /* safe crossbrowser font */
    a {text-decoration: none; outline: none;}
    a:active { 
        border: none;
        outline: none;}
    .imagewrapper img {
        display: inline-block;
        width:100%;
        -ms-interpolation-mode:bicubic;
        image-rendering:-webkit-optimize-contrast;
        image-rendering:-moz-crisp-edges;
        image-rendering: optimizeQuality;
        zoom:1; *display: inline;}
/*          </GENERAL>          */


.clear {
    clear: both; /* deze class gaan we gebruiken om de twee floats #left en #right te clearen. */
}

#container {
    height: 100%;
    width: 1018px;
    margin: 0em auto -10em auto;

    position: relative;}



#left {
    display: inline-block;
    float: left;
    height: 100%;
    width: 950px;
    padding: 0em 2em 0em 1em;
    border: 1px solid brown;
    background: url(./image/main.png);
}
#left p {
text-align: justify;}


#right {
    float: right;
    width: 14px;
    border: 1px solid red;
}
Community
  • 1
  • 1
C-TZ
  • 659
  • 1
  • 5
  • 15

1 Answers1

0

There are several ways to use CSS to help lay out your Div's. You are on the right page with considering the float: left / right and position:relative. I guess to fully answer your question I would need to know the following:

Are you giving a minimum height to the Div or do you just want it to scale to the size of the contents?

If you use your outer div's as main space holders and then fill them with inner div's that are "position:relative;" and "float:left / right"(whichever you need) then your page body will stretch to the size of the content added. If you have a max height and adding some scroll bar functionality we would need to know if that scroll bar tool has it's own height set (is it it's own div / panel?).

One more point to add is that when using float's you will need to include a div with clear:both as a style. This way lines break correctly.Use this after any line of elements that you want to create a break. Be sure to check in both IE and Firefox as they act differently ... and forgetting the <div class="clear" runat="server"> element will make the page look funny. CSS for the "clear" class is here: 

.clear
{
  clear:both;
}

I used these links when first figuring this stuff out:

CSS Position: http://www.barelyfitz.com/screencast/html-training/css/positioning/

CSS Height: http://v1.reinspire.net/blog/2005/10/11/css_vertical_stretch/

Just be aware that IE and other browsers differ. Attributes like height="auto" is not fully supported by all browsers so you would need to take this into account.

Finally, if you are looking to get things to stretch you may need to play around with the width attribute (e.g. height=99%). Generally I just let the height of the page's main content section be dictated by the contents. I wrap all the "body" portion of the page (not html body but main content and any columns) in a div with a relative position and that way if I have a left or right column with less elements than the main section, setting all to height = inherit ... or height = 100 / 99% should work, but you need to play around with it based on what you are doing as to get a browser neutral rendering may have some to do with the styles in the elements you are adding.

Qubits
  • 303
  • 3
  • 8
  • Hi Qubits thanks for taking time to help me out. I want to not give the content div a set height and not scale it to the content. I want to stretch it between the header(170 px height) and footer (50px height). The problem I have with max-height is that my page is also viewed on non-standard resolutions (screens tilted 90 degrees making 768x1024). This is why I want my content div to stretch between the header and footer. The scroll bar tool doesn't use a set height either, it can just use the right div and adjust to it's height as a child object. – C-TZ Jan 16 '12 at 12:14
  • I use my own reset script for crossbrowser compatibility. What I am looking for now is an easy way to have the #content div stretch between the header and footer but haven't found anything easy. I've fiddeled around allot with different css settings and layouts but nothing seems to work for what I want to do here. – C-TZ Jan 16 '12 at 12:17
  • So thats why I was asking for a nudge. I don't have problems with line-breaks cross browser so I don't have a need for the clear: both; setting. I'll look into those links and see if that gets me somewhere, thanks in advance! – C-TZ Jan 16 '12 at 12:18
  • I added some example code just to make things more easy. Nevermind the clear:both comment as it is old code.. but atleast we've got something to work with. – C-TZ Jan 16 '12 at 12:29
  • Following the example code I think I should also do something with #left, but don't know exactly what. I've noticed that when I set #left to height 100% (which works) and then #content to 100%, content doesnt stretch like left does. Or left didn't stretch like container does, something like that.. And I thought that was weird since it IS a child object and it's parent has height set to 100%... – C-TZ Jan 16 '12 at 12:39
  • Also #right with content 't' will be the host for the scrollbar script. – C-TZ Jan 16 '12 at 12:46