css position fixed not working at all
Question
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?
5 answers
solution1
2 ACCPTED 2013-12-21 20:54:19
#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)
solution2
1 2013-12-21 20:55:56
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%;
solution3
0 2013-12-21 20:57:02
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;"
solution4
0 2013-12-21 21:09:59
#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 !
solution5
0 2018-02-10 20:05:54
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.