I'm trying to float 2 divs next to each other and I want the right div to give a margin in relation to it's parent while the left div is shown in front of the margin of the right div.
I have this code below with some labels and input fields. I gave the inputwrapper a margin-left of 220px to align the inputfields vertically but they don't.
So my quetion is how to get these inputfields vertically aligned without using a table?
Thanks in advance
Code snippet:
* {
box-sizing: border-box;
}
html, body {
margin: 0px;
padding: 0px;
font-family: Geneva, sans-serif;
font-size: 13pt;
}
.registerwrapper {
border: 1px black solid;
height: auto !important;
width: 600px;
display: block;
padding: 10px;
margin: 50px auto;
}
.labelwrapper {
border: 1px red solid;
float: left;
display: block;
z-index: 100;
}
.inputwrapper {
border: 1px blue solid;
margin-left: 220px;
float: left;
display: block;
z-index: 1;
}
.row {
border: blueviolet 1px solid;
position: relative;
padding: 3px;
width: auto!important;
display: block;
overflow: auto;
}
.row:after {
content: "";
clear: both;
display: block;
}
<html>
<head>
<title></title>
<link rel="stylesheet" href="css/layout_register.css" />
</head>
<body>
</body>
<div class="registerwrapper">
<form action="" method="post">
<div class="row">
<div class="labelwrapper"><label for="username">Username:</label></div>
<div class="inputwrapper"><input type="text" name="username" id="username" value="" autocomplete="off" /></div>
</div>
<div class="row">
<div class="labelwrapper"><label for="password">Choose a password:</label></div>
<div class="inputwrapper"><input type="password" name="password" id="password" /></div>
</div>
<div class="row">
<div class="labelwrapper"><label for="password_again">Enter your password again:</label></div>
<div class="inputwrapper"><input type="password" name="password_again" id="password_again" /></div>
</div>
<div class="row">
<div class="labelwrapper"><label for="name">Name:</label></div>
<div class="inputwrapper"><input type="text" name="name" id="name" value="" autocomplete="off" /></div>
</div>
<div class="row">
<div class="inputwrapper"><input type="submit" value="Register" /></div>
</div>
</form>
</div>
</body>
</html>
Use position: absolute; for labelwrapper class.
* {
box-sizing: border-box;
}
html, body {
margin: 0px;
padding: 0px;
font-family: Geneva, sans-serif;
font-size: 13pt;
}
.registerwrapper {
border: 1px black solid;
height: auto !important;
width: 600px;
display: block;
padding: 10px;
margin: 50px auto;
}
.labelwrapper {
position: absolute;
border: 1px red solid;
float: left;
display: block;
z-index: 100;
}
.inputwrapper {
border: 1px blue solid;
margin-left: 220px;
float: left;
display: block;
z-index: 1;
}
.row {
border: blueviolet 1px solid;
position: relative;
padding: 3px;
width: auto!important;
display: block;
overflow: auto;
}
.row:after {
content: "";
clear: both;
display: block;
}
<html>
<head>
<title></title>
<link rel="stylesheet" href="css/layout_register.css" />
</head>
<body>
</body>
<div class="registerwrapper">
<form action="" method="post">
<div class="row">
<div class="labelwrapper"><label for="username">Username:</label></div>
<div class="inputwrapper"><input type="text" name="username" id="username" value="" autocomplete="off" /></div>
</div>
<div class="row">
<div class="labelwrapper"><label for="password">Choose a password:</label></div>
<div class="inputwrapper"><input type="password" name="password" id="password" /></div>
</div>
<div class="row">
<div class="labelwrapper"><label for="password_again">Enter your password again:</label></div>
<div class="inputwrapper"><input type="password" name="password_again" id="password_again" /></div>
</div>
<div class="row">
<div class="labelwrapper"><label for="name">Name:</label></div>
<div class="inputwrapper"><input type="text" name="name" id="name" value="" autocomplete="off" /></div>
</div>
<div class="row">
<div class="inputwrapper"><input type="submit" value="Register" /></div>
</div>
</form>
</div>
</body>
</html>
Just change the following classes in your css file
.labelwrapper {
border: 1px red solid;
float: left;
}
.inputwrapper {
border: 1px blue solid;
float: right;
margin-right:100px;
}
Related
I have created following html form.
#import url('https://fonts.googleapis.com/css?family=Roboto');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
font-family: 'Roboto', sans-serif;
}
body{
background: url('bg.jpg') no-repeat top center;
background-size: cover;
height: 100vh;
}
.wrapper{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
max-width: 550px;
/* #background: rgba(0,0,0,0.8);*/
background:rgb(233, 227, 227);
padding: 30px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
.wrapper .title h1{
color: #c5ecfd;
text-align: center;
margin-bottom: 25px;
}
.contact-form{
display: flex;
}
.input-fields{
display: flex;
flex-direction: column;
margin-right: 4%;
}
.input-fields,
.msg{
width: 48%;
}
.input-fields .input,
.msg textarea{
margin: 10px 0;
border: 0px;
/*#border: 2px solid #c5ecfd;*/
border: 1px solid gray;
padding: 10px;
color: black;
width: 100%;
}
.msg textarea{
height: 212px;
}
::-webkit-input-placeholder {
/* Chrome/Opera/Safari */
color: #c5ecfd;
}
::-moz-placeholder {
/* Firefox 19+ */
color: #c5ecfd;
}
:-ms-input-placeholder {
/* IE 10+ */
color: #c5ecfd;
}
.btn {
background: #39b7dd;
text-align: center;
padding: 15px;
border-radius: 5px;
color: #fff;
cursor: pointer;
text-transform: uppercase;
width: 100%;
}
input[type=submit] {padding:15px; background:#ccc; border:0 none;
display: block;
cursor:pointer;
background: #39b7dd;
text-align: center;
border-radius: 5px;
color: #fff;
text-transform: uppercase; }
input[type=file] {
padding-top:15px;
padding-bottom:15px;
/*#display: block;*/
color: black;
width: 100%;
}
input[type=radio] {
padding-top:15px;
padding-bottom:15px;
/*#display: block;*/
float:left;
position:inline;
color: black;
padding-right:15px;
}
.radioOpContainer
{
/*position:inline;*/
padding-top:15px;
padding-bottom:15px;
}
.radioOpContainer input{
/*#padding-right:15px;*/
margin-right:20px;
}
#media screen and (max-width: 600px){
.contact-form{
flex-direction: column;
}
.msg textarea{
height: 80px;
}
.input-fields,
.msg{
width: 100%;
}
}
/*
#fileuploaddiv
{
padding-top:5px;
}
*/
.label
{
padding-top:20px;
font-size: 15px;
}
.error
{
/*font-family: 'Open Sans Regular';*/
font-family: "Helvetica Neue",Roboto,Arial,sans-serif;
/*font-size: 1em;*/
font-size: 14px;
line-height: 1em;
color: #c0392b;
}
/* ---------------------- */
.table_row
{
padding-top:10px;
}
.cell_wrapper
{
background-color: white;
}
.cell
{
display:inline-block;
/*float: left;
width: 50%; */
/*outline: 1px dashed black; */
/*margin-bottom: 20px;*/
word-break:break-all;
font-family: Monospace;
width: 49%;
}
.resultcell
{
display:inline-block;
/*float: left;
width: 50%; */
/*outline: 1px dashed black; */
/*margin-bottom: 20px;*/
word-break:break-all;
font-family: Monospace;
width: 49%;
}
#media only screen and (max-width: 600px) {
.cell, .resultcell
{
background-color: lightblue;
width: 100%;
}
}
.red{
color: red;
}
.magenta{
color: magenta;
}
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Responsive Contact us form Using HTML and CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="wrapper">
<div class="title">
<h1>contact us form</h1>
</div>
<form th:action="#{/}" th:object="${messageForm}" method="post" enctype="multipart/form-data" id="MqMessageSenderForm">
<div class="contact-form">
<div class="input-fields">
<div class="label"><p>Queue manager Name: </p></div>
<select id="recievedQMname" class="input" th:field="*{recievedQMname}"><option selected="selected" value=""/></select>
<div class="error" th:if="${#fields.hasErrors('recievedQMname')}" th:errors="*{recievedQMname}"></div>
<div class="label"><p>Destination queue Name</p></div>
<input type="text" class="input" th:field="*{recievedQname}" id="recievedQname">
<div class="error" th:if="${#fields.hasErrors('recievedQname')}" th:errors="*{recievedQname}"></div>
<div class="label"><p> Select an input method </p></div>
<div class="radioOpContainer"><input type="radio" name="msginputoption" id="fileradio" checked="checked" > <label for="fileradio">File</label></div>
<div class="radioOpContainer"><input type="radio" name="msginputoption" id="messagetextradio" > <label for="messagetextradio">Message text</label></div>
</div>
<div class="msg">
<div class="label">Upload files </div>
<input type="file" th:field="*{files}" multiple accept=".txt,.xml" id="files" >
<div class="error" th:if="${fileUploadValidationResult != null}" th:text="'' + ${fileUploadValidationResult} + ''"></div>
<textarea class="input" th:field="*{msgText}" id="msgText" disabled="disabled" ></textarea>
<div class="error" th:if="${textMsgValidationResult != null}" th:text="'' + ${textMsgValidationResult} + ''"></div>
<input class="btn" type="submit">
</div>
</div>
</form>
<div class="table" th:if="${result != null}">
<div class="table_row" th:each="mapEntry : ${result}">
<div class="cell_wrapper">
<div class="cell" th:text="${mapEntry.key}" >key</div> <div class="resultcell" th:text="${mapEntry.value}">value</div>
</div>
</div>
</div>
<div class="table" th:if="${UImessageSentresult != null}">
<div class="table_row">
<div class="cell_wrapper">
<div class="resultcell" style="width: 100%;" th:text="${UImessageSentresult}" >UImessageSentresult</div>
</div>
</div>
</div>
</div>
</body>
</html>
when messages sent status results are being added to the bottom of the page, portion from the top is disappearing from the browser( not even able to scroll to the top -I have attached an image as well) I have added the code into jsfiddle https://jsfiddle.net/lmatrix47/nux3h1cd/1/
I'm not a UI expert, Can someone point out the where the problem is
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Responsive Contact us form Using HTML and CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="wrapper">
<div class="title">
<h1>contact us form</h1>
</div>
<form th:action="#{/}" th:object="${messageForm}" method="post" enctype="multipart/form-data" id="MqMessageSenderForm">
<div class="contact-form">
<div class="input-fields">
<div class="label"><p>Queue manager Name: </p></div>
<select id="recievedQMname" class="input" th:field="*{recievedQMname}"><option selected="selected" value=""/></select>
<div class="error" th:if="${#fields.hasErrors('recievedQMname')}" th:errors="*{recievedQMname}"></div>
<div class="label"><p>Destination queue Name</p></div>
<input type="text" class="input" th:field="*{recievedQname}" id="recievedQname">
<div class="error" th:if="${#fields.hasErrors('recievedQname')}" th:errors="*{recievedQname}"></div>
<div class="label"><p> Select an input method </p></div>
<div class="radioOpContainer"><input type="radio" name="msginputoption" id="fileradio" checked="checked" > <label for="fileradio">File</label></div>
<div class="radioOpContainer"><input type="radio" name="msginputoption" id="messagetextradio" > <label for="messagetextradio">Message text</label></div>
</div>
<div class="msg">
<div class="label">Upload files </div>
<input type="file" th:field="*{files}" multiple accept=".txt,.xml" id="files" >
<div class="error" th:if="${fileUploadValidationResult != null}" th:text="'' + ${fileUploadValidationResult} + ''"></div>
<textarea class="input" th:field="*{msgText}" id="msgText" disabled="disabled" ></textarea>
<div class="error" th:if="${textMsgValidationResult != null}" th:text="'' + ${textMsgValidationResult} + ''"></div>
<input class="btn" type="submit">
</div>
</div>
</form>
<div class="table" th:if="${result != null}">
<div class="table_row" th:each="mapEntry : ${result}">
<div class="cell_wrapper">
<div class="cell" th:text="${mapEntry.key}" >key</div> <div class="resultcell" th:text="${mapEntry.value}">value</div>
</div>
</div>
</div>
<div class="table" th:if="${UImessageSentresult != null}">
<div class="table_row">
<div class="cell_wrapper">
<div class="resultcell" style="width: 100%;" th:text="${UImessageSentresult}" >UImessageSentresult</div>
</div>
</div>
</div>
</div>
</body>
</html>
wrapper div is given as absolute. when comparing to parent element height is less that's the reason for hiding the content you can
either change .wrapper to relative instead of absolute
or you can add scroll for wrapper.
Try the below code
.wrapper {
position: relative;
top: auto;
left: auto;
transform: initial;
}
Hi i need some help in creating a css to follow my prototype image
i want my old to be move to the right and the new to left with middle that a empty space but so far i couldnt get it to be done like this?
prototype image
.column1 {
flex: 50%;
height: auto;
width: 20%;
border: 1px;
border-style: solid;
border-color: black;
}
.column2 {
flex: 50%;
height: auto;
width: 20%;
border: 1px;
border-style: solid;
border-color: black;
}
.row {
display: flex;
}
.left {
border: 1px;
border-style: solid;
border-color: black;
}
<div class="row">
<div class="column1 ">
<h2 style="background-color:#6bbea0;" id="old">Column 1</h2>
<fieldset id="f1" class="Field">
<label id="symbol">-><input id="name" disabled readonly></label>
<!-- <ul id="checkbox" class="checkbox"> -->
</fieldset>
</div>
<div class="column2 ">
<h2 style="background-color: #b5d96b;" id="new">Column 2</h2>
<fieldset id="f2" class="Field1">
<label id="symbol">-><input id="name" value="" disabled readonly></label>
<!-- <ul id="checkbox" class="checkbox"> -->
</fieldset>
</div>
Add "column-gap" prop to your .row.
So you can control gap between columns in easy way.
Also you can minimize your CSS by combining styles, please take a look:
.row {
display: flex;
column-gap: 3rem;
}
.column1,
.column2 {
flex: 1;
border: 1px solid black;
}
.column1 {
/* flex: 50%;
height: auto;
width: 20%;
border: 1px;
border-style: solid;
border-color: black;*/
}
.column2 {
/* flex: 50%;
height: auto;
width: 20%;
border: 1px;
border-style: solid;
border-color: black;*/
}
/* .left {
border: 1px;
border-style: solid;
border-color: black;
} */
<div class="row">
<div class="column1 ">
<h2 style="background-color:#6bbea0;" id="old">Column 1</h2>
<fieldset id="f1" class="Field">
<label id="symbol">-><input id="name" disabled readonly></label>
<!-- <ul id="checkbox" class="checkbox"> -->
</fieldset>
</div>
<div class="column2 ">
<h2 style="background-color: #b5d96b;" id="new">Column 2</h2>
<fieldset id="f2" class="Field1">
<label id="symbol">-><input id="name" value="" disabled readonly></label>
<!-- <ul id="checkbox" class="checkbox"> -->
</fieldset>
</div>
You can use this pattern.
.row{
display: flex;
justify-content: space-between;
}
.column1 {
height: auto;
width: 48%;
/* border: 1px; */
border-style: solid;
border-color: black;
}
.column2 {
height: auto;
width: 48%;
/* border: 1px; */
border-style: solid;
border-color: black;
}
.row {
display: flex;
}
/* .left {
border: 1px;
border-style: solid;
border-color: black;
} */
<div class="row">
<div class="column1 ">
<h2 style="background-color:#6bbea0;" id="old">Column 1</h2>
<fieldset id="f1" class="Field">
<label id="symbol">-><input id="name" disabled readonly></label>
<!-- <ul id="checkbox" class="checkbox"> -->
</fieldset>
</div>
<div class="column2 ">
<h2 style="background-color: #b5d96b;" id="new">Column 2</h2>
<fieldset id="f2" class="Field1">
<label id="symbol">-><input id="name" value="" disabled readonly></label>
<!-- <ul id="checkbox" class="checkbox"> -->
</fieldset>
</div>
You need to remove the flex property from row and then you can use float properties and width properties in both the columns.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page title</title>
<link rel="stylesheet" href="css.css">
</link>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="css.js"></script>
<script src="https://kit.fontawesome.com/e8f9edfb9f.js" crossorigin="anonymous">
</script>
<style>
.column1 {
flex: 50%;
height: auto;
width: 45%;
float: left;
border-radius: 10px;
border: 1px;
border-style: solid;
border-color: black;
}
.column2 {
/* display: flex; */
flex: 50%;
height: auto;
width: 45%;
float: right;
border-radius: 10px;
border: 1px;
border-style: solid;
border-color: black;
}
/* .row {
display: flex;
} */
.left {
border: 1px;
border-style: solid;
border-color: black;
}
</style>
</head>
<body>
<div class="row">
<div class="column1 ">
<h2 style="background-color:#6bbea0;" id="old">Column 1</h2>
<fieldset id="f1" class="Field">
<label id="symbol">-><input id="name" disabled readonly></label>
<!-- <ul id="checkbox" class="checkbox"> -->
</fieldset>
</div>
<div class="column2 ">
<h2 style="background-color: #b5d96b;" id="new">Column 2</h2>
<fieldset id="f2" class="Field1">
<label id="symbol">-><input id="name" value="" disabled readonly>
</label>
<!-- <ul id="checkbox" class="checkbox"> -->
</fieldset>
</div>
</body>
<script>
window.addEventListener('DOMContentLoaded', () => {
document.getElementsByTagName("input")[0].onkeyup = function(event) {
if (event.keyCode === 13) {
alert('Press Escape Key. The textbox will freeze.');
};
}
});
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.
hello I one simple but annoying problem. I managed to use css and bootsatrap to create the responsive webpage that i wanted. However, when i used position:relative my input (text field) got disabled. Any idea why?
<div class="col-md-offset-2 col-md-8 text-center">
<div class="container-fluid">
<div id="logo">
<img class="img-responsive" src="uv.png">
</div>
<div class="login-form">
<h1>United Volunteers</h1>
<div class="form-group">
<label class="input-title">Username</label>
<input type="text" class="form-input" placeholder="Username">
</div>
<div class="form-group">
<label class="input-title">Password</label>
<input type="password" class="form-input" placeholder="Password">
</div>
</div>
</div>
</div>
.login-form {
top:90px;
position:relative;
box-sizing: border-box;
margin: 25px auto;
margin-bottom:0px;
width: 100%;
max-width:400px;
background-color: white;
padding: 100px 50px 50px 50px;
box-shadow: 1px 5px 2px #330000;
z-index: -1;
}
.form-input {
width: 100%;
display: block;
height: 35px;
padding: 6px 12px;
font-size: 12px;
font-family: sans-serif;
vertical-align: middle;
border: 1px solid #ccc;
border-radius: 4px;
background-color: #f2f2f2;
line-height: 1.5;
}
This is because of z-index: -1;. Its set to negative value.
Just make it positive like:
.login-form {
z-index: 1;
}
Or look at the snippet below:
.login-form {
top:90px;
position:relative;
box-sizing: border-box;
margin: 25px auto;
margin-bottom:0px;
width: 100%;
max-width:400px;
background-color: white;
padding: 100px 50px 50px 50px;
box-shadow: 1px 5px 2px #330000;
z-index: 1;
}
.form-input {
width: 100%;
display: block;
height: 35px;
padding: 6px 12px;
font-size: 12px;
font-family: sans-serif;
vertical-align: middle;
border: 1px solid #ccc;
border-radius: 4px;
background-color: #f2f2f2;
line-height: 1.5;
}
<div class="col-md-offset-2 col-md-8 text-center">
<div class="container-fluid">
<div id="logo">
<img class="img-responsive" src="uv.png">
</div>
<div class="login-form">
<h1>United Volunteers</h1>
<div class="form-group">
<label class="input-title">Username</label>
<input type="text" class="form-input" placeholder="Username">
</div>
<div class="form-group">
<label class="input-title">Password</label>
<input type="password" class="form-input" placeholder="Password">
</div>
</div>
</div>
</div>
Hope this helps!
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%;
}