How do i make the header/footer extend width-wise to fit the screen, and the main content extend height-wise to fit the screen?


Tags: css

Problem :

I have tried everything! I simply cannot get my website to look the way i want it to.

Here is the HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Welcome to SilmanServer!</title>
<link href="./main.css" rel="stylesheet" type="text/css" />

</head>

<body>
<div id="pageHeader"> 
<h1>SilmanServer</h1>
<p>Aaron Silman's Personal Home Server </p>
</div>

<div id="navigation">
    <ol>
        <li><a href="./index.html">Home</a></li>
        <li><a href="./blog.html">Blog</a></li>
        <li><a href="./projects.html">Projects</a></li>
        <li><a href="./about.html">About Me</a></li>
        <li><a href="./contact.html">Contact</a></li>
    </ol>
</div>


<div id="main">

<div>
<h2>What the hell?</h2>
<p>
This the project I embarked on around June of 2012 with an old computer that I had at home. My goal: To transform that old, useless HP Pavilion a6750y into a fully functioning webserver for this website! Along the way I also learned (X)HTML, CSS, Javascript, PHP, MySQL and a bunch of other things needed for designing and developing websites, as well as administrating my own server.
</p>
</div>

<div>
<h2> Why? </h2>
<p>
As mentioned before, I really wanted to learn how to build websites that function both on the client side and server side. I wanted to just play around and learn. So I started learning, beginning with the basics. I will also use this website as documentation, tracking my progress and noting a lot of important steps so if anyone (including myself - in case I forget) wants a guide to setting up a server and learning web design and development they an refer to <a href="./guide_to_the_web.html">this page </a> for a complete, idiot-proof, guide to the web from scratch.
</p>
</div>

</div>

<div id="pageFooter">

<p> This is a footer
</p>
</div>

</div>
</body>
</html>

and here is the CSS:

/* CSS Document */

/* CSS Reset*/
/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

/* Global Styles */
html{
    background: url(./images/sway.jpg);
    background-attachment: fixed;
    background-repeat::no-repeat;

    height: 100%;
}

body{
    margin: 0 auto;
    padding-left: 0px;
    background: #3ee; /*<-------------- problem here bro */
    font-family:"Times New Roman", Times, serif;
    font-size: 1em;
    color: white;
}


#pageheader, #pageFooter {
    float:left;
    min-width:100%;
} 

/*Header Styles*/

#pageHeader{
    padding: 30px;
    font-size: 3em;
    font-family::"Arial Black", Gadget, sans-serif;
    background-color: #0F6; 
}

#pageHeader p{
    padding: 1px;
    font-size: .5em;
    font-family::"Arial Black", Gadget, sans-serif;
}

/*Body Styles*/

/*Navigation styles */

#navigation{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.2em;
    float: left;
    background-color: #C09;
    position: inherit;
}

#navigation li{
    float: left;
    padding: 20px;
}

#navigation a:hover{
    color: #91BED4;
}


/* Main Content */

#main{
    min-height: 100%;
    width: 60%;
    margin: 0 auto;
    background:#F00;
    clear: both;
    color: #FFF
}

/* Footer */

#pageFooter{
    height: 150px;
    background: #00F;
    color:#CF0;
    font-size: 2em;
    /*position:fixed;
    bottom:0;*/
}

As you can see i color coded the different sections in order to see what is being affected by what. For some reason the navigations div color isnt showing up and instead it is taking on the color of the body. I want this page to have a header and footer which extends to fill the screens witdh and a main content block that has a minimum height of the screen size but the min-height specification just isnt working.

What can i do to fix this? What are some useful techniques for what i am trying to do? I am new to CSS and any advice is useful!

Here is what the website looks like: http://imgur.com/OIuad

I just cant seem to get the red box to have a minimum height of the screen.



Solution :

I'm not entirely sure what you're asking for here, the header and footer are working fine width-wise for me.

As for height, are you trying to get the footer to stay on the bottom despite a small amount of content? Try Googling "css sticky footer". There are a few out there so play around with them and learn how they work.


    CSS Howto..

    How to add a mobile optimised external CSS to a Shopify site

    How can I use jQuery to add a fade in hover effect to my nav items?

    How to customize twitter/bootstrap more deeply? [closed]

    how to apply css to extjs grid emptytext?

    how to highlight currently opened page link in css

    I am having a hard time figuring out how to dynamically setup a timeline

    how to set up responsive columns with pure CSS?

    How to apply background color to buttons using css in asp.net?

    How to grow the width of a div as the width screen decreases using Css?

    How to get resultant HTML after executing all scripts?

    How do you set the scroll bar skin on a single List instance?

    How to write CSS correctly when there are the same properties but with different prefixes for the various browser support?

    How to show scrollbar when the inner content is aligned to bottom?

    How to stop css image slideshow at last image?

    How does css scale transform affect document flow?

    How to make css for navbar (Jquery Mobile) bottom up submenu automatic?

    How to change the css of a div using the click function on jQuery, but however twice instead of once?

    How to make “transbox” full width

    How to prevent a div element to be affected by the box-shadow of another div element?

    How to let an object not take up its natural width

    how to load all css and js at a time in Cakephp

    how to implement “blog” page in HTML/CSS? [closed]

    How to get width of div using jquery

    Jquery Mobile dynamic thumbnail list-How to create a border?

    how to force horizontal scrolling in an HTML list using CSS?

    How to hide the div after sometime in angular or css?

    Div is laying ontop of absolute-positioned element. How to put element above the div?

    how to swap div with one another in mobile view css

    How to load CSS on SSL pages?

    html, css - cursor - how to change default image for pointer