I am having issue trying to align my fixed footer in IE and FF. Chrome seems to render the page fine! Here is what I get in Chrome:
The footer appears in the correct position. Here is what I get in IE and FF. The alignment of the footer goes bad:
Here is my HTML code:
<div id="page-wrap" class="container_12">
<header id="header" class="grid_12">
<!-- header content and main navigation -->
</header>
<div id="content" class="grid_12">
<!-- slider and content goes here! -->
</div>
<footer id="footer" class="grid_12">
<div class="menu">
<ul>
<li>Menu1</li>
<li>Menu2</li>
<li>Menu3</li>
<li>Home</li>
<li>Menu5</li>
<li>Menu6</li>
<li>Menu7</li>
</ul>
</div>
</footer>
</div>
And my CSS for the footer is:
#footer {
bottom: 0;
position: fixed;
}
What am I missing?
to center the footer
#footer{
width:800px;
margin-left:auto;
margin-right:auto;
}
Write like this:
#footer {
bottom: 0;
left:0;
right:0;
position: fixed;
}
.menu{
width:800px;
margin:0 auto;
}
Have you tried :
Margin: 0px auto;
This is a very reliable technique for centering content.
Related
I'm having trouble by creating a responsive footer that always stay on the bottom of the page. The code I'm actually using is this:
body
{
margin: 0 0 200px; //Same height of the footer
}
footer
{
position: absolute;
left: 0;
bottom: 0;
height: 200px;
width: 100%;
overflow: auto;
background-color: rgba(67, 191, 115, 0.95);
}
I use:
<div class='main-content'>
//Content
</div>
<footer>
//Footer content
</footer>
Well, the problem is if I resize the screen and the content is larger than the resolution the footer lets a white space, like this:
I am trying to solve this problem. If I use position: fixed the problem disappears, but I don't want the footer following the scroll. I think the problem is in the 100 percent width. The footer of this site, Stack Overflow, works as I need. If I resize the window the footer remains the same, no white space. How to achieve this? How to make the footer cover all the width without let white space even if the resolution is lower than the page like occurs here, in Stack Overflow?
Try this code....
CSS
html,
body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto;
/* Negative indent footer by its height */
margin: 0 auto -60px;
/* Pad bottom by footer height */
padding: 0 0 60px;
}
/* Set the fixed height of the footer here */
#footer {
height: 60px;
background-color: #f5f5f5;
}
/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */
.container {
width: auto;
max-width: 680px;
padding: 0 15px;
}
.container .credit {
margin: 20px 0;
}
HTML
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
<!-- Begin page content -->
<div class="container">
<div class="page-header">
<h1>Sticky footer</h1>
</div>
<p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
<p>Use the sticky footer with a fixed navbar if need be, too.</p>
</div>
</div><!-- Wrap Div end -->
<div id="footer">
<div class="container">
<p class="text-muted credit">Example courtesy Martin Bean and Ryan Fait.</p>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
</body>
</html>
This jsfiddle I am creating based on your html.
This is work as responsive, I am not seen any issue as you tell.
I think may be the issue with height:200px , just remove and check.
Still you have issue , update the jsfiddle.
You should indeed use fixed positioning. This is what we do in our apps, running on browsers and Android/iOS devices:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body
{
margin: 0;
/*
This height just to show that the footer stays at the
bottom of the page even when scrolling all the way down.
*/
height:2000px;
}
footer
{
position: fixed;
left: 0;
right: 0;
bottom: 0;
height: 200px;
overflow: auto;
background-color: rgba(67, 191, 115, 0.95);
}
</style>
</head>
<body>
<div class='main-content'>
//Content
</div>
<footer>
//Footer content
</footer>
</body>
</html>
Of course, you are using HTML5 so this page will not work on older browsers (IE7, IE8).
I hope this helps :)
I like flexbox. CSS tricks - Guide to Flexbox
Try this:
main {
height: 95vh;
display: flex;
flex-flow: column wrap;
justify-content: space-around;
align-items: center; }
header,
footer { flex: 0 1 auto; }
article { flex: 10 1 auto; }
<main>
<header>Title Here</header>
<article>Main Article</article>
<footer>Copyright and Contact Me</footer>
</main>
Thanks to Galen Gidman https://galengidman.com/2014/03/25/responsive-flexible-height-sticky-footers-in-css/ for this:
<header class="page-row">
<h1>Site Title</h1>
</header>
<main class="page-row page-row-expanded">
<p>Page content goes here.</p>
</main>
<footer class="page-row">
<p>Copyright, blah blah blah.</p>
</footer>
And the CSS:
html,
body {height: 100%;}
body {display: table; width: 100%;}
.page-row {display: table-row; height: 1px;}
.page-row-expanded {height: 100%;}
Galan: The only real caveat to this solution that I’ve encountered so far is the styling limitations present with elements using display: table-row. Often padding, margin, etc. don’t behave as expected. This is easy enough to work around by adding a or something inside the .page-row and styling that.
I have floated two elements right in the header of my website which are <div id="twitter"> and <div id ="navbar>, but there appearance becomes skewed when I view them in IE6 and IE7. I believe that I either need to clear the floated elements or apply a clearfix but I am unsure as to where.
here is an image of the issue in IE6 and IE7:
This is the desired result as it would appear in modern browsers.
Here is a link to the web page: http://www.bestcastleintown.co.uk/pg/
CSS:
#twitter {
background: red;
float: right;
height: 40px;
margin-bottom: 40px;
width: 200px;
}
#navbar {
font-size: 2.2em;
float:right;
}
HTML:
<div id="main_header">
<div id="inner_main_header">
<div>
<div id="main_logo">
<div class="home_page_logo left">
<img src="PG_awards_logo.gif">
</div>
</div>
<div>
<div id ="twitter" class="padall">
Follow us
</div>
<div id ="navbar" class="right">
<ul class="nav NG">
<li>home</li>
<li>enter</li>
<li>categories</li>
<li>judging</li>
<li>sponsorship</li>
<li>contact</li>
</ul>
</div>
</div>
</div>
</div>
</div>
Change #navbar style to this:
#navbar{
font-size: 2.2em;
float: right;
width: 60%;
overflow: auto;
}
Just give the #navbar some width and overflow other than visible.
I want to use a fixed header, with the content behind it. The menu will contain anchor links, so all the content will be in one page.
But, I got stuck at an early stage. I thought this would be no problem, but it seems like the header div is snapped to the content div somehow. It looks like they have the same margin.
If position:fixed; is removed, it looks like it should, but I want it to be fixed.
I really don't understand why this happens, since they're separated from each other. Using something like margin-top:-100px doesn't feel right.
Doing this should work without ugly solutions...
CSS:
#header {
position:fixed;
width:1200px;
border:1px solid black;
z-index:1;
overflow:hidden;
background-color:white;
}
#menu {
width:100%;
z-index:2;
}
#content {
margin: 100px 0 0 0;
background-color:red;
overflow:hidden;
width:1200px;
z-index: -1;
height:100%;
}
HTML
<div id="header">
<h1>Header</h1>
<div id="menu"><ul>
<li>Works</li>
<li>News</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
<div id="content">
<div id="works" name="works"></div>
<div id="news" name="news"></div>
<div id="about" name="about"></div>
<div id="contact" name="contact"></div>
</div>
<div id="footer"></div>
Add top: 0px; to your #header class
I have a two-column layout. I have a #mainContainer div that contains all of the following (except the #footer):
Across the top: a header div (#intro)(contains a small gradient image),
and a #hero div (contains images)
To contain the two columns: a #content div
Within the #content div on the left: a #mainContent div
Within the #content div on the right: a #sideBar div
Across the bottom (outside the #mainContainer div): a #footer div on the bottom
(including a gradient image like the header div)
Simple, right? But I'm having trouble getting the #mainContainer div to be at the top of the browser (no spaces or that 6-8px default margin/padding all browsers have at the top) and getting the #footer div to span across the entire bottom of the browser window (not inside any of the Div's ). (disregard inline styles in footer). Could someone help me out?
UPDATED: ADDED HTML
body {
font-family:Arial, Helvetica, sans-serif;
margin:0;
padding:0;
background:#bbb;
text-align:center;
}
#mainContainer {
width:980px;
margin: 0 auto;
background: #fff url(../i/content-box-header-gray.jpg) repeat-x;
text-align:left;
/*height: 700px;*/
}
#intro {
/*top:0;*/
margin: 0;
text-align:left;
}
#hero {
width:960px;
padding-left:10px;
padding-right:10px
}
#content {
width:960px;
padding-left:10px;
padding-right:10px;
}
#mainContent_left {
float:left;
width:640px;
margin:0;
padding-right: 20px;
background:#ccc;
}
#sideBar {
float:left;
width:300px;
margin:0;
/*padding-right: 20px;*/
background:#ffd;
}
#footer {
width:960px;
clear:both;
background:#cc9;
}
HTML:
<title>Descriptions </title>
<link rel="stylesheet" href="css/mainstyles.css" type="text/css" />
</head>
<body>
<div id="mainContainer">
<div id="intro"><h2>introducing</h2></div>
<div id="Hero">
<ul>
<li class="name"></li>
<li class="textJoin">is a member of </li>
<li class="name"></li>
</ul>
</div>
<div id="content">
<div id="mainContent">
<h3>First Topic title</h3>
<p>floated left image and text</p>
<p>Some content</p>
<p>Some content</p>
<h3>Second Topic title</h3>
<p>Some content</p>
<p>Image here</p>
<h3>Third Topic title</h3>
<p>(floated left image here) Some text</p>
<h3>Fourth Topic title</h3>
<p>(floated left image here) Some text</p>>
<h3>Fifth Topic title</h3>
<p>(floated left image here) Some text</p>
<p>Image here</p>
<p>(link to FAQ page)</p>
</div>
<div id="sideBar">sidebar content
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div id="footer_warranty">footer content
<div id="wf_logos" style="float:left; padding:0 10px 0 0;"><p>contact info</p>
</div>
<div id="wf_footerCopy" style="float:left; padding:0 10px 0 0;">
<p>some text</p></div>
<p style="clear:both;" />
</div>
</div>
<p style="clear:both;" />
</div>
</body>
</html>
I am unable to reproduce your problem. However, I have created a fiddle for you, where I have also added some CSS reset rules which should take care of a problem such as this, cross any and all browsers.
You should always use a reset CSS when you start a new site. That way, it's all on your terms and you don't have to "code away" specific browser behaviour.
I have also created some placeholder code since you did not provide any.
I hope the reset fixes your problem.
http://jsfiddle.net/dekket/eERsK/
Edit:
Check this new fiddle. Out to work.
http://jsfiddle.net/dekket/6bTkZ/
Try importing Meyer's reset stylesheet:
http://meyerweb.com/eric/tools/css/reset/
try adding float:left and overflow:hidden to your #mainContainer
you need to set the html and body css margin and padding properties to 0.
use the following in your css file
html, body {
margin: 0;
padding: 0;
}
I'm trying to slice an box with rounded corners. The image is sliced horizontal in 3parts (top-middle-bottom). The problem in IE7 is that the top div is larger than the actual size I set.
Here is the HTML & CSS code
<!-- FIRST PICTURE -->
<div class='recent-box'>
<div class='recent-box-top'></div>
<div class='recent-box-middle' >
</div>
<div class='recent-box-bottom'></div>
</div>
<!-- FIRST PICTURE -->
<div class='recent-box'>
<div class='recent-box-top'></div>
<div class='recent-box-middle'>
</div>
<div class='recent-box-bottom'></div>
</div>
<!-- FIRST PICTURE -->
<div class='recent-box'>
<div class='recent-box-top'></div>
<div class='recent-box-middle'>
dsqd
</div>
<div class='recent-box-bottom'></div>
</div>
<!-- FIRST PICTURE -->
<div class='recent-box'>
<div class='recent-box-top'></div>
<div class='recent-box-middle'>
dsqd
</div>
<div class='recent-box-bottom'></div>
</div>
.recent-box {
width: 127px;
float:left;
display:block;
}
.recent-box-top {
float:left;
background-image: url('images/recent-foto-top.png');
background-repeat:no-repeat;
width: 100%;
}
.recent-box-middle {
float:left;
background-image: url('images/recent-foto-middle.png');
background-repeat:repeat-y;
width: 100%;
}
.recent-box-bottom {
float:left;
background-image: url('images/recent-foto-bottom.png');
background-repeat:no-repeat;
width: 100%;
}
Thanks for helping me out!
Ward
The font-size and line-height properties might be the offensive ones. If you are not placing any text in the top box, use something like
.recent-box-top {
font-size: 0;
line-height: 0;
}
Found the solution!
Just put in the div and it works like a charm!
found on http://archivist.incutio.com/viewlist/css-discuss/39150