2 replies [Last post]
Super_Duper_Man
Super_Duper_Man's picture
Offline
Regular
Last seen: 8 years 30 weeks ago
Timezone: GMT+2
Joined: 2013-04-02
Posts: 19
Points: 31

I have this layout with a fixed header and a footer at the bottom of the page. I also want the content div to go all the way down to bottom.

the layout looks

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Prosjekt I</title>
  <link rel="stylesheet" href="style.css">
<!--[if !IE 7]>
	<style type="text/css">
		#wrap {display:table;height:100%}
	</style>
<![endif]-->
</head>
<body>
 
 
<div id="wrap">
    <div id="header">logo
        <div id="nav">
            <p>header</p>
        </div>
    </div>
    <div id="main">
        <div id="content">
            <p>content</p>
            <p>content</p>
        </div>
        <div id="sidebar">
            <p>sidebar</p>
        </div>
    </div>
</div>
 
<div id="footer">
    <div id="footer-tekst">
            <p>copyright</p>
    </div>
</div>
 
 
</body>
</html>

and the css style looks

* {
    margin:0;
    padding:0;
} 
 
html, body {
    height: 100%;
    background-color: #454545;
}
 
#header{
    width: 1100px;
    float:right;
    position:fixed;
}
 
#nav{
    background-color: #33ff33;
    width: 900px;
    height: 30px;
    float:right;
}
 
#wrap {
    height: 100%;
    width:1100px;
    margin: 0 auto;
}
 
#main {
    height: 100%;
    padding-top:30px;
    padding-bottom: 60px; /* samme h´┐Żyde som footer */
} 
 
#content{    
    background-color: #ff0066;
    float:right;
    width: 900px;
    padding-bottom:0px;
}
 
 
#sidebar{
    float:left;
    width: 200px;
    background-color: #ccffcc;
}
 
#footer {
    position: relative;
    margin: -60px auto; /* negativ verdi av footer */
    height: 60px;
    width: 1100px;
    clear:both;
} 
 
#footer-tekst{
    width: 900px;
    height: 60px;
    float:right;
    background-image: url("footer-bg.png");
}
 
/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;
}

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 19 hours ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

A couple of things

An element cannot be both float and position: fixed||absolute; They are mutually exclusive, with the position property winning the race.

It is a really bad idea to use a fixed position header. You are creating waste space in what may be very limited real estate. If visitors want to look again at the header, they know how to scroll.

To make your content go all the way to the bottom of the viewport, have sufficient content.

The footer at the bottom is really a print thing, but can be done for a web page. See Footer at the bottom of viewport.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Super_Duper_Man
Super_Duper_Man's picture
Offline
Regular
Last seen: 8 years 30 weeks ago
Timezone: GMT+2
Joined: 2013-04-02
Posts: 19
Points: 31

thank you very much, i

thank you very much, i removed this and made much more pretty fluid layout. without fixed header. Smile