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>

Link to comment
Share on other sites

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]

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • 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.