Jump to content

making content fit on page


droidus

Recommended Posts

this looks like a semi finished implementation of the sticky footer of ryan fait.

 

try out the code below and see what I added. (also note the doctype)

<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body{ 
    height: 100%;
    margin:0; padding:0; /* added */
    overflow-y:hidden; /* added for iE to remove default scroller*/
} 
#page{
    min-height: 100%; 
    height: auto !important; /*Cause footer to stick to bottom in IE 6*/
    height: 100%; 
    margin: 0 auto -100px; /*Allow for footer height*/
    vertical-align:bottom;
    background:gray;
    overflow:hidden; /* added */
}
#footer, #push{
    height:100px; /* added */
}
#footer{background:orange;}
</style>
</head>
    <body>
        <div id="page"><!-- everything but absolute positioned should be inside #page -->
            <p>Put all your content inside here</p>
            <div id="push"></div><!-- don't put anything inside push -->
        </div>
        <div id="footer">footer</div>
    </body>
</html>

ok, i don't think this is working, at least for what i am trying to get it to do anyway.

i have attached an image of what is going wrong, and where.  all i need is two columns, and a footer below that.  the second column though (on the right) needs to be able to extend its background if there is a large list of files.  as you can see with the image, where the blank space is, there would be actual files. 

 

[attachment deleted by admin]

i have a feeling you do not see what is the logic in the example given. (pay attention to the comments in the code) besides that i am almost certain you are using other styles that are not shown. Do you also happen to use position: absolute?

 

I recommend to either see why the example given works in the given situation, or provide us with an online example, because clearly the code you gave is a hint of the total mark-up/code.

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.