CODEWITHSUNDEEP
htmlcssweb
Hunter
Hunter

Reputation: 458

css position fixed not working at all

I am looking to make a footer type thing for blakehawley.com where it has some different links and such. It is supposed to be a banner style, and by that I mean it is supposed to stay at the bottom and be fixed. The div is "menu"

Here is my HTML:

    <html>

<head>
<link rel="stylesheet" media="all and (min-width: 1378px)" href="style/grid-1378.css">
<link rel="stylesheet" media="all and (min-width: 1218px) and (max-width: 1377px)" href="style/grid-1218.css">
<link rel="stylesheet" media="all and (min-width: 978px) and (max-width: 1217px)" href="style/grid-978.css">
<link rel="stylesheet" media="all and (min-width: 748px) and (max-width: 977px)" href="style/grid-748.css">
<link rel="stylesheet" media="all and (min-width: 0px) and (max-width: 747px)" href="style/grid-400.css">

<link href='http://fonts.googleapis.com/css?family=Playfair+Display' rel='stylesheet' type='text/css'>

<title>The Official Site of Blake Hawley</title>

</head>
<body>

<div id="homeimage">
<img src="style/images/blakehome.jpg">
</div>

<div id="name">
Blake Hawley
</div>

<div id="maincontent">

<a class="twitter-timeline" href="https://twitter.com/BlakeHawley5" data-widget-id="414439781083267072">Tweets by @BlakeHawley5</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

</div>

<div id="menu">

</div>

</body>
</html>

Here is my CSS:

body{
margin:0 auto;
}

#homeimage{
margin:0 auto;
margin-top:20px;
width:720px;
height:480px;
box-shadow:5px 5px 5px #888888;
}

#name{
text-align:center;
font-family:'Playfair Display', serif;
font-size:130px;
}

#maincontent{
margin-bottom:20px;
}

#menu{
position:fixed;
float:bottom;
height:200px;
width:1218px;
border:3px solid green;
box-shadow:0px -5px 5px #888888;
}

li{
list-style:none;
}

Anything that you guys see?

Upvotes: 0

Views: 10708

Answers (5)

user9343688
user9343688

Reputation: 1

Why isn't "position:fixed;" keeping my page header in the same place?

this happens due to display:flex for #pageTitle. The menu when expanded tries to fit in, pushing other elments in the same parent div. Separate .responsive-menu from #pageTitle into a new div.

Upvotes: 0

Asraful Haque
Asraful Haque

Reputation: 1125

#menu{
position:fixed;
margin:0 auto;/*use it if you want to show middle of the webpage if not remove it*/
left:/* put*/ px;/* use it if you want to move your div from the left postion*/
height:200px;
width:1218px;
border:3px solid green;
box-shadow:0px -5px 5px #888888;
}

keep remember float:bottom is not correct rule more info visit www.w3schools.com !

Upvotes: 0

Elad Shechter
Elad Shechter

Reputation: 4045

First the menu tag is empty(you cant see it becouse of it).

Second you didnt position it with using the properties left,top,bottom or right.

and Third there isn't such thing like "float:bottom;"

Upvotes: 0

Vincent Duprez
Vincent Duprez

Reputation: 3892

Float is for an image inside some text, can be left or right, instead of float, you should use positioning, in your case :

bottom:0px;

also, if you want your footer to take the whole screen, use 

width:100%;

Upvotes: 1

Yosoyke
Yosoyke

Reputation: 485

#menu{
position:fixed;
bottom: 0px;
height:200px;
width:1218px;
border:3px solid green;
box-shadow:0px -5px 5px #888888;
}

Guess did should do the trick, changed second rule

(Maybe make the width: 100% as well)

Upvotes: 2

Related Questions