I have a problem with my page which when i zoom in or zoom out the footer and the forms just slide off where i wanted it to be. Is there anyway of solving the issue? I've tried surfing the internet for solutions but didnt work for me.
Thanks in advance for any help.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Registration Form</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<header>
<h1>Registration Form</h1>
<hr>
</header>
<article>
<form action="#">
<label for="FirstName"><b>First Name:</b></label>
<input name="FirstName" type="text" placeholder="John" required>
<label for="LastName"><b>Last Name:</b></label>
<input name="LastName" type="text" placeholder="Doe" required>
<label for="email"><b>Email:</b></label>
<input name="email" type="text" placeholder="example#mail.com" required>
<label for="password"><b>Password:</b></label>
<input name="password" type="password" placeholder="Password here." required>
<p></p>
<input type="submit" value="Submit">
</form>
</article>
<footer>
Copyright # 2017 Your name here
</footer>
</div>
<script src="main.js"></script>
</body>
</html>
CSS:
header h1 {
text-align: center;
margin: -60px 0 10px 0;
}
hr {
margin: 0 -80px 0 -80px;
}
form input {
display: block;
}
body {
background-color: gray;
}
html, body { height: 100%; width: 100%; margin: 0; }
article {
margin: 50px 0 0 0;
display: flex;
justify-content: center;
overflow: hidden;
}
footer {
text-align: center;
color: white;
background-color: black;
margin: 68px -80px 0 -80px;
overflow: hidden;
}
#container {
padding: 80px;
background-color: white;
width: 600px;
height: 259px;
margin: 0 auto;
overflow: hidden;
}
In your #container, I removed your width: 600px because it was preventing responsiveness and added max-width: 100%.
#container {
padding: 80px;
background-color: white;
height: 259px;
margin: 0 auto;
overflow: hidden;
max-width: 100%;
}
Check it out!
https://jsfiddle.net/5x48bzo5/
EDIT: Here is the new JSFiddle. https://jsfiddle.net/5x48bzo5/3/
Related
This question already has answers here:
Center image using text-align center?
(28 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 1 year ago.
For a long time, I am trying to resolve this issue but I was not able to find a good solution for this. I need to align this image on the center of the form but I am totally unsuccessful in it. You may feel like I am elaborating too much, but this is because StackOverflow is not letting me post this question because it thinks that this question needs deep elaboration. I don't know why.
This is my HTML:
<body>
<div class="wrapper">
<div class="form-container">
<h2>Login Form</h2>
<br>
<form action="" class="login-form">
<div class="imagecontainer">
<img src="https://raw.githubusercontent.com/EdiTechStudio/Beta-ETS/master/favicon.svg"
alt="Avatar" class="avatar">
</div>
<div class="container">
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit">Login</button>
</div>
</form>
</div>
</div>
</body>
This is my CSS:
* {
padding: 0;
margin: 0;
box-sizing: 0;
}
.wrapper {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
background-color: orange;
}
.form-container {
display: block;
width: 70vw;
height: 70vh;
padding-bottom: 150px;
}
form {
border: 3px solid #f1f1f1;
}
input[type="text"],
input[type="password"] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
button {
padding: 14px 20px;
margin: 8px 0;
width: 100%;
}
button:hover {
opacity: 0.8;
}
img.avatar {
width: 20%;
}
.container {
padding: 16px;
}
How can I align the image in the center? I have tried many ways. But I am not able to do it. I have tried aligning using display flex property and tried aligning it in the center and tried to justify the content in the center!
.imagecontainer {
text-align: center;
}
Will do the job.
Adding text-align:center should solve your problem -
<div class="wrapper">
<div class="form-container">
<h2>Login Form</h2>
<br>
<form action="" class="login-form">
<div class="imagecontainer" style="text-align:center">
<img src="https://raw.githubusercontent.com/EdiTechStudio/Beta-ETS/master/favicon.svg"
alt="Avatar" class="avatar">
</div>
<div class="container">
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit">Login</button>
</div>
</form>
</div>
</div>
* {
padding: 0;
margin: 0;
box-sizing: 0;
}
.wrapper {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
background-color: orange;
}
.form-container {
display: block;
width: 70vw;
height: 70vh;
padding-bottom: 150px;
}
form {
border: 3px solid #f1f1f1;
}
input[type="text"],
input[type="password"] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
button {
padding: 14px 20px;
margin: 8px 0;
width: 100%;
}
button:hover {
opacity: 0.8;
}
.imagecontainer {
display: flex;
justify-content: center;
}
img.avatar {
width: 20%;
}
.container {
padding: 16px;
}
<body>
<div class="wrapper">
<div class="form-container">
<h2>Login Form</h2>
<br>
<form action="" class="login-form">
<div class="imagecontainer">
<img src="https://raw.githubusercontent.com/EdiTechStudio/Beta-ETS/master/favicon.svg" alt="Avatar" class="avatar">
</div>
<div class="container">
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit">Login</button>
</div>
</form>
</div>
</div>
</body>
You need to use the flex property on the parent.
Add this to your css
.imagecontainer {
display: flex;
justify-content: center;
}
Just use margin
html, body {
margin: 0;
}
.wrapper {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
background-color: orange;
}
.form-container {
display: block;
width: 70vw;
height: 70vh;
padding-bottom: 150px;
}
form {
border: 3px solid #f1f1f1;
}
input[type="text"],
input[type="password"] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
button {
padding: 14px 20px;
margin: 8px 0;
width: 100%;
}
button:hover {
opacity: 0.8;
}
.imagecontainer {
text-align: center;
}
img.avatar {
width: 20%;
}
.container {
padding: 16px;
}
<body>
<div class="wrapper">
<div class="form-container">
<h2>Login Form</h2>
<br>
<form action="" class="login-form">
<div class="imagecontainer">
<img src="https://raw.githubusercontent.com/EdiTechStudio/Beta-ETS/master/favicon.svg"
alt="Avatar" class="avatar">
</div>
<div class="container">
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit">Login</button>
</div>
</form>
</div>
</div>
</body>
Try to use margin:auto on imagecontainer div.
You can make use of <center> tag.
<center>
<div class="imagecontainer">
<img src="https://raw.githubusercontent.com/EdiTechStudio/Beta-ETS/master/favicon.svg" alt="Avatar" class="avatar">
</div>
</center>
Just place the above code in place of imagecontainer div. You need to wrap the div in center tag.
I am caught in problem due to relative position
My Other content get pushed under the showcase.
I am giving you full code please tell me what I am doing wrong.
I have given the link to google drive which cotain screenshot.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
}
a {
color: #000;
text-decoration: none;
}
.container {
max-width: 1200px;
width: 80%;
margin: auto;
}
.d-4 {
font-size: 2.6rem;
text-align: center;
font-weight: 600;
}
.lead {
font-size: 1.8rem;
font-weight: 300;
}
.relative {
position: relative;
top: 0;
left: 0;
}
nav {
position: absolute;
top: 0;
left: 0;
z-index: 1;
display: flex;
font-size: 17px;
font-weight: bold;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 10px 0;
}
nav>a {
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 28px;
padding: 0 20px;
}
nav ul a {
padding: 15px;
margin: 0 5px;
color: #fff;
border-radius: 4px;
}
nav ul a:hover {
background: rgba(0, 0, 0, 0.6);
}
.showcase {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: url('https://cdn.pixabay.com/photo/2017/06/24/23/03/railway-2439189_1280.jpg') no-repeat center center/cover, rgba(0, 0, 0, 0.5);
background-blend-mode: darken;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Website | Getting Started</title>
<!-- My CSS -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="relative">
<nav>
<img height="70" src="img/logo.png" alt="Logo"> Title
<ul>
Home
Login
SignUp
Dashboard
</ul>
</nav>
<div class="showcase">
<h1 class="d-4">Welcome to my Website.</h1>
<p class="lead">
Way of heaven is here.
</p>
</div>
</div>
<div class="container">
<h1 class="text-center">Contact Us</h1>
<form id="footer" class="control">
<input class="input" type="text" id="name" placeholder="Enter your Name">
<input class="input" type="email" id="email" placeholder="Enter your E-mail">
<input class="input" type="number" id="mob" placeholder="Enter your phone No.">
<input class="input" type="textr" id="subject" placeholder="Enter your subject">
<textarea class="textarea" placeholder="Enter your message"></textarea>
</form>
</div>
</body>
</html>
Screenshot
https://drive.google.com/file/d/1hn4-dyx0h8BrY42zAjL4801yCZ_0YYnB/view?usp=drivesdk
To prevent overlapping of showcase on container, add position: relative; to .container.
And if you want conatiner not to overlap with .relative, then just just add height: 100vh; in .relative.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
}
a {
color: #000;
text-decoration: none;
}
.container {
max-width: 1200px;
width: 80%;
position: relative;
background: red;
margin: auto;
}
.d-4 {
font-size: 2.6rem;
text-align: center;
font-weight: 600;
}
.lead {
font-size: 1.8rem;
font-weight: 300;
}
.relative {
position: relative;
}
nav {
position: absolute;
top: 0;
left: 0;
z-index: 1;
display: flex;
font-size: 17px;
font-weight: bold;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 10px 0;
}
nav>a {
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 28px;
padding: 0 20px;
}
nav ul a {
padding: 15px;
margin: 0 5px;
color: #fff;
border-radius: 4px;
}
nav ul a:hover {
background: rgba(0, 0, 0, 0.6);
}
.showcase {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: url('https://cdn.pixabay.com/photo/2017/06/24/23/03/railway-2439189_1280.jpg') no-repeat center center/cover, rgba(0, 0, 0, 0.5);
background-blend-mode: darken;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
<div>
<div class="relative">
<nav>
<img height="70" src="img/logo.png" alt="Logo"> Title
<ul>
Home
Login
SignUp
Dashboard
</ul>
</nav>
<div class="showcase">
<h1 class="d-4">Welcome to my Website.</h1>
<p class="lead">
Way of heaven is here.
</p>
</div>
</div>
<div class="container">
<h1 class="text-center">Contact Us</h1>
<form id="footer" class="control">
<input class="input" type="text" id="name" placeholder="Enter your Name">
<input class="input" type="email" id="email" placeholder="Enter your E-mail">
<input class="input" type="number" id="mob" placeholder="Enter your phone No.">
<input class="input" type="textr" id="subject" placeholder="Enter your subject">
<textarea class="textarea" placeholder="Enter your message"></textarea>
</form>
</div>
</div>
was such a result needed?
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
}
a {
color: #000;
text-decoration: none;
}
.container {
max-width: 1200px;
width: 80%;
margin: auto;
}
.d-4 {
font-size: 2.6rem;
text-align: center;
font-weight: 600;
}
.lead {
font-size: 1.8rem;
font-weight: 300;
}
.relative {
display: flex; /* added */
height: 100vh; /* added */
flex-direction: column; /* added */
position: relative;
top: 0;
left: 0;
}
nav {
position: absolute;
top: 0;
left: 0;
z-index: 1;
display: flex;
font-size: 17px;
font-weight: bold;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 10px 0;
}
nav > a {
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 28px;
padding: 0 20px;
}
nav ul a {
padding: 15px;
margin: 0 5px;
color: #fff;
border-radius: 4px;
}
nav ul a:hover {
background: rgba(0,0,0,0.6);
}
.showcase {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: url('https://cdn.pixabay.com/photo/2017/06/24/23/03/railway-2439189_1280.jpg') no-repeat center center/cover,rgba(0,0,0,0.5);
background-blend-mode: darken;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Website | Getting Started</title>
<!-- My CSS -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="relative">
<nav>
<img height="70" src="img/logo.png" alt="Logo"> Title
<ul>
Home
Login
SignUp
Dashboard
</ul>
</nav>
<div class="showcase">
<h1 class="d-4">Welcome to my Website.</h1>
<p class="lead">
Way of heaven is here.
</p>
</div>
</div>
<div class="container">
<h1 class="text-center">Contact Us</h1>
<form id="footer" class="control">
<input class="input" type="text" id="name" placeholder="Enter your Name">
<input class="input" type="email" id="email" placeholder="Enter your E-mail">
<input class="input" type="number" id="mob" placeholder="Enter your phone No.">
<input class="input" type="textr" id="subject" placeholder="Enter your subject">
<textarea class="textarea" placeholder="Enter your message"></textarea>
</form>
</div>
</body>
</html>
You need to add position:absolute to your .container. The position property in CSS works like this:
the property-value couple position:relative tells your layout which element shall be used as a reference for its child elements which contain the property-value pair position:absolute, for their positioning.
Then, you can use the properties top, right, bottom, and left to specify the distancing of the child HTML element having the position: absolute pair from the edges of its first parent element (walking upwards in the HTML doc from the child) which has the position:relative pair.
In your CSS code, you simply set your parent element to position:relative, which does not change anything in your layout; it just tells your page that any child of the element X having position:relative, which has position:absolute must use that X for the relative positioning using the four properties top, right, bottom, and left. And yeah, obviously, as soon as you set a HTML child of a parent having position:relative to position:absolute, it will be placed above it.
Im having trouble figuring out how to fix the issue of my images moving up the screen when i resize the browser vertically. Also not only do my images move up the screen but my banner's text and background also move around which causes the banners text to move off the banner.
<!DOCTYPE html>
<html lang="en">
<head>
<title>A-level Revision Website</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
</head>
<body>
<div class="banner">
<h1>A-Level Revision Website</h1>
</div>
<div>
<form id="loginForm">
<input type="email" class="login-username" autofocus="true" required="true" placeholder="Email" /><br>
<input type="password" class="login-password" required="true" placeholder="Password" /><br>
<input type="submit" name="Login" value="Login" class="login-submit" /><br>
forgot password?
</form>
</div>
<div id="imagesMain">
<a href="Maths.html">
<img src="images/Maths.jpg" alt="Maths">
</a>
<a href="ComputerScience.html">
<img src="images/Computer_Science.jpg" alt="ComputerScience">
</a>
<a href="Physics.html">
<img src="images/Physics.jpg" alt="Physics">
</a>
</div>
</html>
.banner{
position: absolute;
width: 100%;
height: 25%;
top: 0;
left: 0;
padding: 0;
margin: 0;
background-color: #595959;
color: #fff;
text-align: center;
line-height: 180px;
font-family: 'Lato', sans-serif;
font-size: 25px;
}
#imagesMain{
position: absolute;
max-width: 75rem;
left: 0;
right: 0;
margin: auto;
bottom: 0;
padding: 0;
margin: 20px auto;
text-align: center;
}
#imagesMain a{
width:30%;
float:left;
position:relative;
margin:1.5%;
}
img{
max-width: 100%;
height: auto;
margin-right: 25px;
position: relative;
}
body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
display:table;
}
body {
display:table-cell;
vertical-align:middle;
}
form {
display:table;
margin:auto;
}
https://jsfiddle.net/zntzep48/7/
The banner's text isn't moving relative to the screen but the gray background is moving because you set it to 25% of the screen height. When you adjust the height of the window, the banner adjusts accordingly. Just remove the height property altogether. Remove the line-height and set padding-top. Set the banner to position relative cause its covering up the form.
Add
#form {
display: table;
margin: 0 auto;
}
and change form's div to that id. Remove the table-cell table-display you put in the body and html.
Change #imagesMain to position: relative.
Working solution:
<!DOCTYPE html>
<html lang="en">
<head>
<title>A-level Revision Website</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
</head>
<style>
.banner{
position: relative;
width: 100%;
top: 0;
left: 0;
padding: 0;
margin: 0;
background-color: #595959;
color: #fff;
text-align: center;
font-family: 'Lato', sans-serif;
font-size: 25px;
padding-top: 50px;
}
#imagesMain{
position: relative;
max-width: 75rem;
left: 0;
right: 0;
margin: auto;
bottom: 0;
padding: 0;
margin: 20px auto;
text-align: center;
}
#imagesMain a{
width:24%;
float:left;
margin:1.5%;
}
img{
max-width: 100%;
height: auto;
margin-right: 25px;
position: fixed;
bottom:0;
}
body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
vertical-align:middle;
}
#form {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 50%;
}
</style>
<body>
<div class="banner">
<h1>A-Level Revision Website</h1>
</div>
<div id="form">
<form id="loginForm">
<input type="email" class="login-username" autofocus="true" required="true" placeholder="Email" /><br>
<input type="password" class="login-password" required="true" placeholder="Password" /><br>
<input type="submit" name="Login" value="Login" class="login-submit" /><br>
forgot password?
</form>
</div>
<div id="imagesMain">
<a href="Maths.html">
<img src="https://i.pinimg.com/originals/06/9a/c8/069ac81cbe0e3a6f8fb43a0df42125a0.jpg" alt="Maths"">
</a>
<a href="ComputerScience.html">
<img src="https://i.pinimg.com/originals/06/9a/c8/069ac81cbe0e3a6f8fb43a0df42125a0.jpg" alt="ComputerScience">
</a>
<a href="Physics.html">
<img src="https://i.pinimg.com/originals/06/9a/c8/069ac81cbe0e3a6f8fb43a0df42125a0.jpg" alt="Physics"">
</a>
</div>
</body>
</html>
EDIT: Edited code to make form in middle of page and put images at bottom of page (they will move on resize).
I've been struggling to have my login box to the right of my header near the top right of the page. I would like the header and everything in blue to be next to each other with the login box in the top right still in the blue, with the rest of the page in white. Through my CSS using the .left and .right div tags I was not able to accomplish that.
* {
color: #000000;
}
body {
margin: 0px 150px 0px 150px;
color: #ffffff;
}
div.header {
background-color: #b3d9ff;
width: 100%;
margin: 10px auto 10px auto;
}
div.page {
color: #e6f2ff;
}
img {
padding: 10px;
}
.left {
width: 200px;
float: left;
}
.right {
margin-left: 2200px;
}
<div id="page">
<div class="header">
<div id="left">
<h1>Welcome to the best blog in the world!</h1>
<h6>I know you're jealous...</h6>
</div>
<div id="right">
<fieldset>
<legend>
<h4>Already a member? Login here:</h4>
</legend>
<form method="GET" action="http://csis.svsu.edu/~cmdewey/thankyou.html">
Login name:
<input type="text" id="uname" name="uname"><br><br> Password:
<input type="password" id="secretpass" name="secretpass"><br><br>
<input type="submit" value="Submit">
</form>
</fieldset>
</div>
</div>
I refactored the html snd css because you were using class selectors in html instead of id selectors.
* {
color: #000000;
}
body {
color: #ffffff;
}
.header {
overflow: hidden;
background-color: #b3d9ff;
width: 100%;
margin: 10px auto 10px auto;
}
div.page {
color: #e6f2ff;
}
img {
padding: 10px;
}
.left {
width: 50%;
float: left;
}
.right {
width: 50%;
float: right;
}
<div id="page">
<div class="header">
<div class="left">
<h1>Welcome to the best blog in the world!</h1>
<h6>I know you're jealous...</h6></div>
<div class="right">
<fieldset><legend>
<h4>Already a member? Login here:</h4></legend>
<form method="GET" action="http://csis.svsu.edu/~cmdewey/thankyou.html">
Login name:
<input type="text" id="uname" name="uname"><br><br>
Password:
<input type="password" id="secretpass" name="secretpass"><br><br>
<input type="submit" value="Submit">
</form></fieldset></div></div>
enter image description here
Just add this to your header class : display:inline-flex
so change it like this :
div.header {
background-color: #b3d9ff;
width: 100%;
margin: 10px auto 10px auto;
display:inline-flex;
}
https://jsfiddle.net/emilvr/rpqzvgwq/1/
Your code is Well,Just you have a few wrong :
1)you use ID in tag html but use . selector in css.
2)you dont need to margin-left: 2200px; in #right.
3)use overflow: auto; in .header.
4)use box-sizing: border-box; in #left and #right.
I Fix them ,I hope help you,
Full Code:
* {
color: #000000;
}
body {
color: #ffffff;
}
div.header {
background-color: #b3d9ff;
width: 100%;
overflow: auto;
}
#page {
color: #e6f2ff;
}
img {
padding: 10px;
}
#left {
width: 50%;
float: left;
box-sizing: border-box;
}
#right{
width: 50%;
float: right;
box-sizing: border-box;
}
<div id="page">
<div class="header">
<div id="left">
<h1>Welcome to the best blog in the world!</h1>
<h6>I know you're jealous...</h6>
</div>
<div id="right">
<fieldset>
<legend>
<h4>Already a member? Login here:</h4>
</legend>
<form method="GET" action="http://csis.svsu.edu/~cmdewey/thankyou.html">
Login name:
<input type="text" id="uname" name="uname"><br><br>
Password:
<input type="password" id="secretpass" name="secretpass"><br><br>
<input type="submit" value="Submit">
</form>
</fieldset>
</div>
</div>
</div>
Here is my code:
css
*{
margin: 0 auto;
font-family: "Trebuchet MS", Arial, Verdana;
font-size: 12px;
}
html {
height: 100%;
}
body {
height: 100%;
min-height: 100%;
position: relative;
background-color: #f4f4f4;
}
#table {
display: table;
height: 100%;
}
.container {
width: 100%;
height: 100%;
}
#table_cell {
display: table-cell;
height: 100%;
vertical-align: middle;
text-align: center;
line-height: 1;
}
.glyphicon {
position: absolute;
padding: 11px 10px 10px 10px;
pointer-events: none;
}
#username,
#password,
#mail {
position: relative
}
#username-input,
#password-input {
padding-left: 30px;
display: inline-block!important;
width: 270px!important;
height: 37px!important;
}
footer {
height: auto;
width: 100%;
bottom: 0;
text-align: center;
position: absolute;
margin: 0 0 0 -15px;
border-top: 1px solid #e7eaec;
background-color: #ffffff;
}
html
<html>
<head>
</head>
<body>
<div class="container">
<div id="table">
<div id="table_cell">
<form name="login_form" id="login_form" method="post" action="">
<img src="images/this.png" />
<br/>
<div id="username">
<i class="glyphicon glyphicon-user"></i>
<input autofocus type="text" class="form-control" name="base_u_username" id="username-input" placeholder="Username" />
</div>
<br/>
<div id="password">
<i class="glyphicon glyphicon-lock"></i>
<input autocomplete="off" type="password" class="form-control" name="base_u_password" id="password-input" placeholder="Password" />
</div>
<br/>
<span style="float:right;">
<input type="submit" name="login" class="btn btn-default" value="Login" />
</span>
</form>
</div>
</div>
<footer>
footer
<br>footer
</footer>
</div>
</body>
</html>
I am struggling with my page layout.
I know there are some similar posts, I try but looks like my case is different.
How can my <div id=table> height exclude footer?
If possible, I don't wish to set a number for height.
Thanks.
Just remove position: absolute; from footer.
Edit:
One better solution is remove height and minheight from body, #table and .container and use display:flex.
Give following css to .container
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 100vh;
* {
margin: 0 auto;
font-family: "Trebuchet MS", Arial, Verdana;
font-size: 12px;
}
html {
}
body {
position: relative;
background-color: #f4f4f4;
}
#table {
display: table;
}
.container {
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 100vh;
}
#table_cell {
display: table-cell;
height: 100%;
vertical-align: middle;
text-align: center;
line-height: 1;
}
.glyphicon {
position: absolute;
padding: 11px 10px 10px 10px;
pointer-events: none;
}
#username,
#password,
#mail {
position: relative
}
#username-input,
#password-input {
padding-left: 30px;
display: inline-block!important;
width: 270px!important;
height: 37px!important;
}
footer {
height: auto;
width: 100%;
bottom: 0;
text-align: center;
margin: 0 0 0 -15px;
border-top: 1px solid #e7eaec;
background-color: #ffffff;
}
<html>
<head>
</head>
<body>
<div class="container">
<div id="table">
<div id="table_cell">
<form name="login_form" id="login_form" method="post" action="">
<img src="images/this.png" />
<br/>
<div id="username">
<i class="glyphicon glyphicon-user"></i>
<input autofocus type="text" class="form-control" name="base_u_username" id="username-input" placeholder="Username" />
</div>
<br/>
<div id="password">
<i class="glyphicon glyphicon-lock"></i>
<input autocomplete="off" type="password" class="form-control" name="base_u_password" id="password-input" placeholder="Password" />
</div>
<br/>
<span style="float:right;">
<input type="submit" name="login" class="btn btn-default" value="Login" />
</span>
</form>
</div>
</div>
<footer>
footer
<br>footer
</footer>
</div>
</body>
</html>
add this css
#table {
display: table;
height: calc(100% - 31px);
}
Change css for footer
footer {
background-color: #ffffff;
border-top: 1px solid #e7eaec;
bottom: 0;
height: auto;
text-align: center;
width: 100%;
}