I am trying to create a footer that sticks to the bottom of the page. I have:
<body>
<form id="form1" runat="server">
<div id="wrap">
<div id="content">
<uc2:logo ID="logo1" runat="server" />
</div>
</div>
<uc1:footer ID="footer1" runat="server" />
</form>
</body>
Here is my css
body {
margin: 30px 10px 0px 10px;
font-size: 14px;
font: 76% Arial,Verdana,Helvetica,sans-serif;
}
html, body, form, #wrap { height: 100%; }
form > #wrap { height: auto; min-height: 100%; }
#wrap {
width: 1000px;
margin: auto;
}
#content {
text-align:left;
}
#footer {
clear: both;
position: relative;
z-index: 10;
width:1000px;
margin:auto;
}
What am I missing? The footer appears below the viewport (scrollbars are also on the page). I'm expecting it to be some type of margin issue.
Look at this: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
Try position absolute :
#footer {
clear: both;
position: absolute;
z-index: 10;
width:1000px;
margin:auto;
bottom:0px;
height:50px;
}
Related
so I have this little beginning of a site and I want the top menu to stay on top of anything else. I used position:fixed and now it does stay on top of everything except for one div that display a logo... I tried using z-index but that didn't help. How do I force that header to stay on top without using Js if possible...
The "blackBar" passes on top of the heading but it's the only this that does...
<body>
<div id="pageBloc">
<header>
<nav>
<ul>
<li>Stuff1</li>
<li>Stuff2</li>
<li>Stuff3</li>
<li>Stuff4</li>
<li>Stuff5</li>
</ul>
</nav>
</header>
<div id="topBloc">
<div id="blackBar">
<p id="logo"><img src="Images/logoSmall.png" alt="logo"</p>
<h1 id="titrePrincipal">MyTitle</h1>
<h2 id="soustitrePrincipal">SubTitle/h2>
</div>
</div>
<section id="temporatySection">
</section>
</div>
</body>
Here's the CSS
body, html
{
margin: 0px;
padding: 0px;
height:100%;
}
#pageBloc
{
height:100%;
}
/*Header*/
header
{
text-align:center;
background-color: #26292E;
height: 40px;
width: 100%;
position:fixed;
}
nav ul, nav li
{
margin-top:5px;
text-transform:uppercase;
display: inline-block;
list-style-type:none;
}
#topBloc
{
background: url('Images/backgroundBloc12.jpg') fixed center;
background-size:cover;
width: 100%;
height: 100%;
}
#blackBar
{
background: rgba(38,41,46,0.80);
position:absolute;
bottom:15%;
width: 100%;
}
#logo
{
padding: 3px;
text-align: center;
}
#titrePrincipal
{
display:none;
text-align:center;
color: white;
}
#soustitrePrincipal
{
text-align: center;
color:black;
}
#temporarySection
{
height: 1000px;
}
Add position: relative; z-index: -1; to #logo.
Then, make sure that you add z-index: -2 to #blackbar.
See here: http://jsfiddle.net/davidpauljunior/gGMzD/1/
Instead of position fixed, you can try
position: absolute
top: 0
left: 0
right: 0
z-index: 100
but if you must use position fixed, you can disregard this and see the answer above.
I am making a basic template for a website. It has div containers of 1 header, a main menu listed horizontally below the header, the main content which is a google maps iframe (variable width) and a sidebar (absolute width, floated right) and a footer.
I am having some trouble with the height of the main content. I would like the iframe and the sidebar to have equal height whilst fitting to the page and leaving a margin for the footer but the main content always sets itself to min-height rather than stretching to the page.
HTML
<body>
<div id="wrapper">
<div id="header"><img src="images/logo.png" width="360" height="127" /> </div><!--header-->
<div id="menu">
<ul><li>Home</li>
<li>About</li>
<li>Network</li>
<li>Help</li>
<li>Contact</li></ul>
</div><!--mrnu-->
<div id="content">
<div id="sidebar">
Sidebar
</div><!--sidebar-->
<div id="main">
<iframe id="map" width="100%" height="auto" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.co.uk/maps?q=52.988337,3.120117&num=1&ie=UTF8&t=m&z=6&ll=51.206883,7.756348&output=embed"></iframe>
</div><!--main-->
<div class="clear"></div>
</div><!--content-->
<div class="push"></div><!--push-->
<div id="footer" class="footer">
</div><!--footer-->
</div><!--wrapper-->
</body>
</html>
CSS
body {
font-family: 'Trebuchet MS', Verdana, Helvetica, Arial, sans-serif;
font-size: 75.00%;
color: #fff;
background: url(images/bg.png);
}
a{
color: #090;
text-decoration:none;
}
a:focus, a:hover, a:active {
color: #FFF;
text-decoration: underline;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden
}
* {
margin: 0;
}
html, body {
height: 100%;
}
/* div tags */
#wrapper {
width: auto;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -100px;
}
#header {
position: relative;
width: auto;
height: auto;
background-color: #090;
}
#menu {
width: auto;
height: auto;
border: 2px solid #000;
font-size: 18px;
}
#menu ul {
padding: 0px;
margin: 0px;
text-align: center;
}
#menu li {
display: inline;
padding: 50px;
}
#content {
width: auto;
height: 100%;
}
#main {
width: auto;
margin-right: 125px;
}
#map {
width: 100%;
height: auto;
}
#sidebar {
width: 125px;
height: auto;
float: right;
text-align: center;
background-color: #FC0;
}
#footer {
width: auto;
height: 125px;
background-color:#CC0;
}
/* classes */
.clear {
clear: both;
}
.footer .push {
height:125px;
}
Note: There may be 1 or 2 unused lines of code that I haven't spotted when I've been playing around with it so if anything seems out of place then it probably is.
I have seen solutions to this problem with fixed width containers, but I think the problem lies in my use of the float function. I have read that positioning needs to be absolute for this to work properly, however using float is the only way I have been able to find that allows the map to fill the space using variable width.
It could be something as simple as being incompatible with the browsers I am testing on but I'm not sure.
Thanks in advance and sorry if this post is a bit messy. I'm sure I will learn to keep clean soon enough ;D
Try these style changes-:
#map {
width: 100%;
// height: auto;
}
#content {
width: auto;
//height: 100%;
height: auto;
}
Setting #content to height:auto pushes the #footer div to meet the #content div.
and in <iframe> set height to 100% (or 80% to show footer). It still leaves the issue of the map div now pushing the footer to below screen height. To deal with that, possibly set an absolute height for the iframe, or use an alternative to iframe.
Please look at this http://jsfiddle.net/jaseem/sS7HN/ . What I am trying to achieve is instead of that inner scroll-bar, I want to use the main window scroll bar; SO that I can use the windows vertical scroll bar to go through the content inside the "innerContent" but at the same time I want the outer div to be fixed. is that possible ?
CSS :
header {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 50px;
}
footer {
position: fixed;
left: 0;
bottom:0;
width: 100%;
}
content {
background-color:#656565;
width: 940px;
margin:0 auto;
padding-top:10px;
border-radius:5px;
}
mainContent {
margin:0px auto;
background-color:#515151;
width:660px;
border-radius:5px;
padding-top:20px;
}
contentHolder {
margin:0 auto;
width:616px;
background-color:#000000;
border-radius:10px;
overflow:auto;
}
HTML :
<div id="header"></div>
<div id="content">
<div id="mainContent">
<div id="contentHolder"></div>
</div>
</div>
<div id="footer"></div>
It's a little unclear what you are trying to accomplish, but I did notice you are missing the hash tags in your CSS. You need # in front of the identifier if you are referring to an ID attribute.
Example: http://jsfiddle.net/hgcax/
CSS
#header {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 50px;
}
#footer {
position: fixed;
left: 0;
bottom:0;
width: 100%;
}
#content {
background-color:#656565;
width: 940px;
margin:0 auto;
padding-top:10px;
border-radius:5px;
}
#mainContent {
margin:0px auto;
background-color:#515151;
width:660px;
border-radius:5px;
padding-top:20px;
}
#contentHolder {
color:#fff;
margin:0 auto;
width:600px;
height: 400px;
background-color:#000000;
border-radius:10px;
overflow:auto;
}
for div elements you have to give #div name here your div name is contentHolder so its #contentHolder
try like this:
#contentHolder {
overflow:auto;
}
or
#contentHolder {
overflow:scroll;
}
I'm working on a brand new website and I'm trying to just get the basic layout going. I am using the ASP.NET MVC 4 generated HTML and I would like to get the DIV named body to fill the available space after making room for the header and thus anchoring the footer to the bottom of the browser window. However, what I'm getting right now is three panels just stacked on top of each other.
I would like a solution that would work if the browser supported HTML5 and one if it didn't
Please note I've inlined comments in the CSS to try and explain what I've tried.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title - Title</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
#Styles.Render("~/Content/css")
</head>
<body>
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">#Html.ActionLink("Title", "Index", "Home")</p>
</div>
</div>
</header>
<div id="body">
#RenderSection("featured", required: false)
<section class="content-wrapper main-content clear-fix">
#RenderBody()
</section>
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>© #DateTime.Now.Year - ACME. All rights reserved.</p>
</div>
<div class="float-right">
<ul id="social">
<li>Facebook</li>
<li>Twitter</li>
</ul>
</div>
</div>
</footer>
#RenderSection("scripts", required: false)
</body>
</html>
CSS
body {
/* I'VE TRIED BOTH OF THE FOLLOWING TO SEE IF THE BODY ITSELF WOULD SPAN */
/* WITH NO OTHER CSS APPLIED TO THE body ELEMENT */
/*height: fill-available;*/
/*height: 100%*/
}
/* general layout
----------------------------------------------------------*/
.float-left {
float: left;
}
.float-right {
float: right;
}
.clear-fix:after {
content: ".";
clear: both;
display: block;
height: 0;
visibility: hidden;
}
/* main layout
----------------------------------------------------------*/
.content-wrapper {
margin: 0 auto;
max-width: 960px;
}
#body {
background-color: #efeeef;
clear: both;
padding-bottom: 35px;
/* I'VE TRIED BOTH OF THE FOLLOWING TO SEE IF I COULD GET THIS ELEMENT TO SPAN */
/* WITHOUT ANY OTHER CSS APPLIED TO THE body TAG */
/*height: fill-available;*/
/*height: 100%*/
}
.main-content {
/*background: url("../Images/accent.png") no-repeat;*/
padding-left: 10px;
padding-top: 30px;
}
.featured + .main-content {
/*background: url("../Images/heroAccent.png") no-repeat;*/
}
footer {
clear: both;
background-color: #e2e2e2;
font-size: .8em;
height: 100px;
}
/* site title
----------------------------------------------------------*/
.site-title {
color: #c8c8c8;
font-family: Rockwell, Consolas, "Courier New", Courier, monospace;
font-size: 2.3em;
margin: 20px 0;
}
.site-title a, .site-title a:hover, .site-title a:active {
background: none;
color: #c8c8c8;
outline: none;
text-decoration: none;
}
/* social
----------------------------------------------------------*/
ul#social li {
display: inline;
list-style: none;
}
ul#social li a {
color: #999;
text-decoration: none;
}
a.facebook, a.twitter {
display: block;
float: left;
height: 24px;
padding-left: 17px;
text-indent: -9999px;
width: 16px;
}
a.facebook {
background: url("../Images/facebook.png") no-repeat;
}
a.twitter {
background: url("../Images/twitter.png") no-repeat;
}
Just snap the header and footer at the bottom of the page using fixed positioning.
header, footer{ position:fixed; left:0; right:0; z-index:1; }
header{ top:0; }
footer{ bottom:0; }
Then you can give your body the background your div#body had before. The div gets no background and will expand as much as needed.
div#body{ background:none; }
body{ background:#eee; }
This will look like the div would fill the remaining space of the page. Finally give your header and footer a background so that you can't see the background of the body under it.
header, footer{ background:#fff; }
By the way I would suggest removing body margins. body{ margin:0; }
I believe it's a bit impossible to do that with just CSS. You can make a webpage with 100% height like this:
html{
height: 100%;
}
body{
height: 100%;
}
#body{
height: 100%;
}
And then for header, body and footer you can do like this:
header{
height: 100px;
left: 0;
position: absolute;
top: 0;
width: 100%;
background-color: #f00;
}
#body{
bottom: 100px;
left: 0;
position: absolute;
right: 0;
top: 100px;
background-color: #fff;
}
footer{
bottom: 0;
height: 100px;
left: 0;
position: absolute;
width: 100%;
background-color: #ff0;
}
It might work for a bit, but it'll break at some point. When you resize your browser, it'll be running out of room for your #body. If you want a better solution, you should use javascript. In your javascript, calculate how much space you have for your #body, then either adjust the height of header and footer. Or adjust the #body instead.
I am new to css and this has me stumped.
How do I get the parent div to always contain its children? As soon as I start using floats for alignment the parent stops containing children.
I actually do not want to float things. I want to align them. How do we do alignments and margins in css and not yet hardcode all dimensions?
Can someone kindly profive the css for this? Lets assume for the sake of this example that the total width is 960px and all margins are 15px;
Three alternatives:
Set clear: both on the green element.
Set overflow: hidden on the parent container.
Use clearfix on the parent container.
Let's see a clear and flexible version:
#container { background: gray; overflow: hidden; padding: 15px; }
#left { background: purple; width: 200px; float: left; margin: 0 15px 15px 0; }
#content { background: blue; overflow: hidden; margin: 0 0 15px 0 }
#footer { background: green; height: 50px; clear: left; }
Even the width and height you see set is unnecessary, boxes can adjust to their content when omitted, I just added them for demo purposes.
jsFiddle Demo
overflow: hidden affecting layout
Chris Coyier: All About Floats
Check this out: http://jsfiddle.net/kMQbt/
Html:
<div id="parent">
<div id="purple">
purple
</div>
<div id="blue">
blue
</div>
<div id="green">
green
</div>
</div>
Css:
#parent{
width: 960px;
background-color: grey;
float:none;
padding-bottom: 15px;
}
#purple{
width: 200px;
height: 200px;
float:left;
margin-top: 15px;
margin-left: 15px;
background-color: purple;
}
#green{
width: 930px;
height: 200px;
background-color: green;
clear: both;
margin-left: 15px;
}
#blue{
width: 715px;
float:left;
height: 300px;
margin: 15px;
background-color: blue;
}
Use clearfix and assign the class to your container is one of the way to fix your problem.
/* let's clear some floats */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
<div id="container">
<div id="main">
<div id="main_left"></div>
<div id="main_right"></div>
</div>
<div id="last"></div>
</div>
css
#container
{
width:xx;
height:xx;
background:
}
#main
{
width:xx;
height:xx;
}
#main_left{
float:left;
width:xx;
height:xx;
}
#main_right
{
float:right
width:xx;
height:xx;
}
#last
{
clear:both;
width:xx;
height:xx;
}
demo http://jsfiddle.net/yTUU6/
HTML
<div id="contaner">
<div id="top_left">
left box
</div>
<div id="top_right">
right box<br />
height will be changed <br />
<br /><br /> <br /><br /> <br /><br /> <br /><br /> <br /><br /> <br /><br />
</div>
<div class="clear"></div>
<div id="bottom"></div>
</div>
CSS
#contaner{
width: 100%;
height: 400px;
background: #EEEEEE;
}
#top_left{
width: 30%;
border:solid 1px;
height: 200px;
float:left;
}
#top_right{
width:69%;
float:left;
border:solid 1px red;
}
.clear{
clear: both;
}
#bottom{
height: 100px;
border: solid 1px green;
}
The classic way (how i learned to do it) using a clearer element in between
CSS
.clearer{
clear:both;
}
#parent{
width:500px;
background-color:#343434;
padding:10px;
color:#fff;
}
#box{
width:50px;
height:50px;
margin:10px;
float:left;
background-color:#545454;
}
#variable{
width:400px;
float:left;
}
#footer{
height:40px;
margin-top:30px;
background-color:#646464;
}
HTML
<div id="parent">
<div id="box"></div>
<div id="variable">
</div>
<div class="clearer"></div>
<div id="footer"></div>
</div>
An example here
Hope this helps