This question already has answers here:
How do you get the footer to stay at the bottom of a Web page?
(32 answers)
Closed 1 year ago.
I want to stick the footer to the bottom of my page, My normal approach is just using column flex but that doesn't work so I searched online, I saw some answers people were saying using position:absolute; this fixes the problem, while it did but it also came with a problem, when the content was more than the 100vh entire screen, the footer would stay at its position instead of coming down with the page content.
You can try:
position: fixed;
left: 0;
bottom: 0;
width: 100%;
opacity: 0;
You can fix this issue using flex-box on the body like so, This will not make the footer fixed, but instead it will push the footer down the page even if the content is less than 100vh
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
footer {
margin-top: auto;
}
using position:fixed would make your footer always stay in the same position and overflow content would go below it. you can use 2 div containers and use the first to put all your content in and set its min-height:90vh; and use the second container for footer ans set its
height:10vh;
position:relative;
bottom:0;
left:0;
right:0;
so the footer will always be pushed below the content since position is relative
run the code snippet
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.footer{
height: 10vh;
position: relative ;
left: 0;
right: 0;
bottom: 0;
background-color: #ddd;
}
</style>
</head>
<body>
<div style="min-height: 90vh;">
<input type="button" name="copy" value="add new form" >
<form id="form1" action=""><br>
<label for="college">College</label><br>
<input name="college" type="text" />
<label for="degree">Degree</label><br>
<input name="degree" type="text" /><br>
<label for="discipline">Discipline</label><br>
<input name="discipline" type="text" /><br>
<label for="passout-year">Passout Year</label><br>
<input name="passout-year" type="number" min="2000" max="2021" /><br>
<input type="submit" value="Submit" /><br>
<input type="button" value="delete form" /><br>
</form>
</div>
<div class="footer">
tr
<br>
tr
<br>
</div>
</body>
</html>
Related
I've been trying to get my footer to move to the bottom right. It currently is the only thing on the page that doesn't move AT ALL when I resize the browser, much less to the bottom of the page or to the right. I'm new to HTML, mostly doing this as an output for a data science project. Here is my code:
<!DOCTYPE html>
<html lang="en">
<style>
html {
background: url("https://lh3.ggpht.com/TOsicwUVM6bKoB1_u_5noea0kkFAegkAdBFQcmTXhwKrN5485URcl0IWxgjldjd59A=h900") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body { height: 100%;}
#nonFooter { position: relative; min-height: 100%;}
* html #nonFooter { height: 100%;}
#Footer { position: relative; margin-top: -7.5em; }
</style>
<body>
<div class="page-wrap">
<div class="header">
<h3 style ="color:#FFFFFF" class="text-muted">Headerthing</h3>
</div>
<div>
<h1 align="center" style ="color:#FFFFFF">Predict tool</h1>
<p class="lead"></p>
</div>
<div style ="width: 300px; margin: 130px auto 0 auto; ">
<div style ="color:#FFFFFF;">
<form action="upload.php" method="post" enctype="multipart/form-data">
Select image to upload:
<input type="file" name="fileToUpload" id="fileToUpload">
<input type="submit" value="Upload Image" name="submit">
</form>
<form action="/action_page.php">
Instagram Handle:<br>
<input type="text" name="handle"><br>
<input type="submit" value="Submit">
</form>
</div>
</div>
</div>
<footer class="site-footer">
<p style="color:white">Founders: Charles Barkley, Hakeem the Dream and Shaqs fat ass </p>
</footer>
</body>
</html>
Your footer is already at the bottom of the page.
"By moving it down" I assume you're referring to the margins that are automatically assigned to the <p> tag by default.
You can remove these, and get the text the appear at the absolute bottom-right with the following CSS:
.site-footer p {
margin: 0;
position: absolute;
bottom: 0;
right: 0;
}
I've created a updated showcase in Fiddle Playground.
Note that position: absolute in conjunction with bottom: 0. This will make your footer stay at the bottom-right of the visible screen. The element will always be visible, even if you haven't scrolled to its location yet.
Hope this helps! :)
Fiddle: https://jsfiddle.net/kn7g54j1/2/
How do I position the tooltip on top of it's parent's padding? Is that even possible?
Here's my snippet:
span {
width: 100px;
}
.input-group {
padding-right: 20px;
}
.tooltip {
position: absolute;
}
<div class="input-group">
<input type="text" value="firstname" />
<div class='tooltip placeholder'>^</div>
</div>
<div class="input-group">
<input type="text" value="lastname" />
</div>
And this is what the code outputs:
How do I position the tooltip on top of it's parent's padding? Is that even possible?
It is definitely possible.
You have the right idea with the position: absolute. The main point is removing the tooltip from the document flow, otherwise, it will be in the content area of the parent element, instead of over the parent's padding.
Try it here:
.input-group {
float: left;
padding-right: 20px;
background: gray;
position: relative;
}
.tooltip {
position: absolute;
top: 0;
right: 0;
background: cyan;
}
<div class="input-group">
<input type="text" placeholder="First Name" />
<div class='tooltip placeholder'>^</div>
</div>
<div class="input-group">
<input type="text" placeholder="Last Name" />
</div>
Edit: I have refactored your code as nesting block elements in <span> isn't good practice.
Can you set negative margin to make this work?
For example
.tooltip {
position: absolute;
margin-top: -10px;
}
Weave: http://kodeweave.sourceforge.net/editor/#ab8e7d11a9e2412863824bf0e3176caf
I might be wrong, but last I checked embedding a DIV inside of a SPAN element is not valid HTML
First off a DIV element by default is display block. Meaning it behaves like a paragraph (minus the padding) and always is added on a new line. So instead of using a DIV use a SPAN element which is display inline. Remember DRY!
Now as for your question...
How do I position the tooltip on top of it's parent's padding?
You can do this using position absolute, position fixed, or position relative. (In your case absolute or relative would be what you want to use)
Here's a simple example. (I'm using Normalize CSS Reset so the UI looks the same on all browsers.)
.tooltip {
position: relative;
top: 8px;
}
<link href="https://necolas.github.io/normalize.css/4.1.1/normalize.css" rel="stylesheet"/>
<span class="input-group">
<input type="text" value="firstname">
<span class="tooltip placeholder">^</span>
</span>
<span class="input-group">
<input type="text" value="lastname">
</span>
You can use position:relative along with z-index to get your tooltip anywhere and over any padding or element you want..
I have implemented your code on a seperate html as i didn't have your html structure.
You can change the .topltip{top:__px} to adjust your tooltip vertically according to your need.
<html>
<head>
<style>
span {
width: 100px;
}
.input-group {
padding-right: 20px;
}
.tooltip {
position: relative;
top: -10px;
display: table-cell;
z-index: 2;
}
.input-group{
display: inline-block;
}
</style>
</head>
<body>
<span class="input-group">
<input type="text" value="firstname" />
<div class='tooltip placeholder'>^</div>
</span>
<span class="input-group">
<input type="text" value="lastname" />
</span>
</body>
</html>
I have a <div>:
<div id="placeHolder" class="card"><h1> A title!</h1><p>Some text!</p> </div>
and a second <div> containing some text and a <form>:
<div id="inputFields"><h4 class="header middle">edit</h4>
<div id="inputs">
<form id="form-inputs"><br>
Label <input class="input" type="text"> Label <input class="input" type="text"><br>
Label <input class="input" type="text"> Label <input class="input" type="text"><br>
Label <input class="input" type="text"> Label <input class="input" type="text"><br>
</form>
</div>
</div>
I am using CSS to automagically center the first div right where I want it on the page:
.card {
width: 850px;
height: 350px;
margin-left: auto;
margin-right: auto;
margin-top: 150px;
left: auto;
top: auto;
background-color: lightgrey;
}
This is great because the <div> does a reasonably well job of keeping itself centered. However I now want to align the second <div> with the first one so that it is directly under it along the left edge.
That's what I can't figure out how to do. I tried setting the second <div> to:
#inputFields {
left: auto;
top: auto;
}
But that doesn't work. I'm not sure why, but I'm guess it is because I haven't set the height and width manually.
How can I align these two <div>s next to each other?
Example of what it looks like currently. Basically I want to position the second <div> under the first one along it's left edge.
You need to assign the same width to the second div and also give it auto margins like so:
#inputFields {
margin:0 auto;
width: 850px;
}
http://jsfiddle.net/LHkhG/embedded/result/
I'm looking to center this textbox and submit button on the page both vertically and horizontally but the following code just puts it in the top center. How can I center this to the page? It's like it's ignoring the vertical-align setting.
<div style="text-align:center; vertical-align:middle">
<form action="save_thought.php" method="post">
<input type="text" name="thought"><br>
<input type="submit" value="Submit">
</form>
</div>
You can use position:absolute DEMO http://jsfiddle.net/kevinPHPkevin/U8dZr/
div#form-wrapper {
position:absolute;
top:50%;
right:0;
left:0;
}
You can also go for this:
HTML
<div id="main" >
<form id="frm" action="save_thought.php" method="post">
<input type="text" name="thought"><br>
<input type="submit" value="Submit">
</form>
</div>
CSS
#main
{
line-height: 400px;
text-align:center;
vertical-align:middle;
}
#frm
{
display: inline-block;
vertical-align: middle;
line-height: 14px;
}
Demo Here
None of the solutions provided above worked for me for my real proyect in which I wanted to center both vertically and horizontally a form inside a div (not taking as reference the full page) but I got it using display: flex; property. Just display your parent div as flex and then use the property margin: auto; for your child form.
In your case, it would be like this:
HTML code:
<div id="centeringDiv" style="display: flex;">
<form id="mainForm" action="save_thought.php" method="post">
<input type="text" name="thought"><br>
<input type="submit" value="Submit">
</form>
</div>
CSS code:
html, body{
height: 100%;
width: 100%;
margin: 0;
}
#centeringDiv{
height: 100%;
width: 100%;
display: flex;
}
#mainForm{
margin: auto;
}
JSFiddle in which you can see that the form it is being centered both vertically and horizontally in the full page.
CSS will probably never stop to amaze me. Given Dhaval Marthak's answer I was actually able to achieve what I wanted, right aligned labels and left aligned fields (on the right of the labels of course):
label {
display: block;
position:relative;
text-align: right;
width: 100px;
margin: 0 0 5px 0;
}
label > input,
label > select,
input {
position: absolute;
left: 120px;
}
The JSfiddle still points out my remaining problem, the field will align with the bottom of the label if the label breaks the line. But I am sure that can be amended as well.
Of course it would also be nice if the space between labels and fields could be assigned more "dynamically" based on the sizes of the labels (e.g. in different languages) but I have not seen this done anywhere so far. I guess I will have to resort to tables if I really need it.
You have have to change the width from "100%" to "px" and then you have to do margin: "auto".
Then the form will be centered horizontally.
i'm new to html and im having some problems adding a footer. More specifically, when i add the footer, the 'form' gets pulled until it reaches the footer - like this http://tinypic.com/view.php?pic=jhbw5g&s=7 . How can i stop it from extending the body of the form?
html code
<body>
<div id="formWrapper">
</center>
<form method ="post" action="addMember.php">
<label for="name">Username:</label>
<input name="name"/>
<label for="password">Password:</label>
<input name="password"/>
<label for="email">Email:</label>
<input name="email"/>
<p>
<fieldset>
<input class="btn" name="submit" type="Submit" value="Register"/>
<input class="btn" name="reset" type="reset" value="Clear Form">
</fieldset>
</form>
<div class="push"></div></div>
<div class="footer">
<p>Copyright (c) 2008</p>
</div>
</body>
Stylesheet
#formWrapper{
width:400px;
border:solid 5px #F1F1F1;
margin-top:300;
margin-bottom:10;
margin-right: auto;
margin-left: auto;
background-color: #AFC8DE;
padding-top: 10px;
min-height: 100%;
height: auto !important;
height: 100%;
}
html, body { height: 100%; }
.push{ background-color: #903; margin: 50px; }
.footer { height: 4em; background-color: #103; }
More specifically min-height: 100%; makes it drag out but unsure how to fix it.
I don't know what exactly your needs are, but for one your footer div is within the form wrapper, so it will follow the height of whatever that wrapper is.
http://jsfiddle.net/7SgGT/
Here is something I quickly put together. This should get you started on what you're looking for I believe.
There are a few of problems in your HTML code as posted.
a "center" end-tag with no start
the second "input" tag is not closed
empty div.push tag?
the indents look off (maybe due to stackoverflow formatting?)
Please reexamine your HTML and edit the question with updated HTML if the problem does not resolve.
Try something like this..
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
</div>
and the CSS..
html, body {margin:0; padding:0; height:100%;}
#container {min-height:100%; position:relative;}
#body {padding:10px; padding-bottom:60px; /* Height of the footer */}
#footer {position:absolute; bottom:0; width:100%; height:60px; /* Height of the footer */;
}