So I am making a website for class, Ive got one more page to make and its the login page. The thing is, it seems I cant move forms and things in forms around like I can with text boxes. what I want to do is sort of like the steam login page which I will link here. Basically I want box in the middle of the page with a text box for username and password on the left side of the box, then I want a thin line going down the middle of the box separating the two halves and on the right side I want three boxes one for the username and two for the password. The thing is I cant seem to move what I have to the left side of the box yet. https://store.steampowered.com/login/ thats the steam login site itll give you an idea of what i want to do.
Here is what I have so far, I just want to move the grey box down a bit and then put the form that i have now on the left side of the box and write a new form on the right side of the box with a dividing line in the middle.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Portal 2 Launch site</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<h1> <img src="logo.png" class="center"><h1>
</head>
<body>
<!-- The navigation menu -->
<div class="navbar" style="width 100%">
Home
About
Media
<div class="subnav" style="width:20%">
<button class="subnavbtn" style="width: 100%">OtherGames</button>
<div class="subnav-content">
Half Life
Team Fortress 2
Counter strike: Global Offensive
</div>
</div>
Account
</div>
<center>
<div class="container">
forgot password?
<form>
<div class="input-wrap">
<label>Username:</label><br>
<input type="text">
</div>
<div class="input-wrap">
<label>Password:</label><br>
<input type="password">
</div>
</form>
<button class="submit" type="submit" form="form1" value="Submit">Submit</button
</div>
<center>
</body>
</html>
body {
background-color: black;
color: black;
opacity: 300;
}
.container {
display: flex;
flex-direction: column;
background: gray;
border: 10px black;
margin:0;
width: 420px;
padding: 20px
}
.container1 {
display: flex;
flex-direction: column;
background: gray;
border: 10px black;
margin:0;
width: 620px;
padding: 20px
}
.input-wrap1 {
width:620px;
}
form {
display: flex;
flex-direction: column;
width: 200px;
}
.input-wrap {
margin: 5px;
}
input {
background-color: white;
border: 1px solid #4C4B63;
}
.submit{
background: #333;
color: white;
border-style: outset;
border-color: #0066A2;
height: 50px;
width: 100px;
font: bold 15px arial, sans-serif;
text-shadow:none;
cursor: pointer;
}
.submit:hover {
background: green;
color: #eee;
border: 1px solid #eee;
text-shadow:none;
cursor: pointer;
}
I leave you a snippet with the idea you have for the login. You will have to tinker with it to fit your own styles. I leave you a link to a little game to learn flexbox, which I use on the snippet.
.wrapper {
height: 500px;
display: flex;
align-items: center;
justify-content: center;
background-color: slategrey;
}
.login {
display: flex;
width: 400px;
height: 300px;
background-color: lightgrey;
padding: 10px;
}
.side {
flex: 1
}
.separator {
flex: 0;
border-left: 1px solid black;
width: 2px;
height: 250px;
margin: auto 16px;
}
.side {
flex: 1;
}
<div class="wrapper">
<div class="login">
<div class="side">
<form>
<div>
<label>Username:</label><br>
<input type="text">
</div>
<div>
<label>Password:</label><br>
<input type="password">
</div>
</form>
<button class="submit" type="submit" form="form1" value="Submit">Submit</button>
</div>
<div class="separator"></div>
<div class="side">
<form>
<div>
<label>Username:</label><br>
<input type="text">
</div>
<div>
<label>Password:</label><br>
<input type="password">
</div>
<div>
<label>Confirm password:</label><br>
<input type="password">
</div>
</form>
<button class="submit" type="submit" form="form2" value="Submit">Submit</button>
</div>
</div>
</div>
Related
I used margin on other elements successfully, yet when I try to do this with #searchbarcontainer it moves the entire page down. I'm trying to center it slightly below the middle of the page, but I can't work my way around this problem. I am trying to make somewhat of a Google clone and I'm new to HTML and CSS. Here is my code:
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
#nav {
display: flex;
justify-content: flex-end;
margin-top: -40px;
margin-right: -5px;
padding: 20px;
}
.child {
padding: 15px;
}
.link {
color: rgb(95, 91, 91);
text-decoration: none;
}
.link:hover {
color: black;
}
#logo {
margin-top: 110px;
text-align: center;
}
#searchbarcontainer {
text-align: center;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div id="form">
<form action="https://google.com/search">
<div id="searchbarcontainer">
<input id="searchbar" type="text" name="q">
</div>
<div id="submitcontainer">
<input id="submit" type="submit" value="Google Search">
</div>
</form>
</div>
<div id="nav">
<div class="child">
<button type="button" class="btn btn-light"><a class="link" href="images.html">Image Search</a></button>
</div>
<div class="child">
<button type="button" class="btn btn-light"><a class="link" href="advanced.html">Advanced Search</a></button>
</div>
</div>
<div id="logo">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
</div>
Your layout doesnt allow for the search bar container to be moved without affecting the entire page. You say that you want it to be lower, but as you can see in the picture, it has no where to go except to move everything down.
If you wanted to move it down you have to change it so that the search input and the "google search" button will be in the same container and center it that way
when writing html, you have to write what you want to see in vertical order in your website
you've written from bottom to top instead
you've also made a lot of unnecessary elements
here's a somewhat streamlined version
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "sans-serif";
}
input {
outline: 0;
border: 0.3vh solid #bbb;
font-size: 1.6vh;
}
nav {
width: 100%;
height: 6.7vh;
border-bottom: 0.2vh solid #bbb;
display: flex;
justify-content: flex-end;
padding: 0 3vh;
}
nav>div {
height: 6.7vh;
background: #000;
display: flex;
align-items: center;
justify-content: space-around;
}
nav>div>a {
color: black;
text-decoration: none;
font-size: 1.6vh;
background: yellow;
}
nav>div>a:first-child {
margin-right: 1vh;
}
section {
height: 93.3vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
section>img {
width: 45vw;
height: 15vh;
object-fit: contain;
}
section>form {
width: 45vw;
display: flex;
justify-content: space-around;
margin-top: 3vh;
}
section>form>input[type="text"] {
padding: 1vh;
border-radius: 1vh;
width: 65%;
}
section>form>input[type="submit"] {
width: 25%;
border-radius: 1vh;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Search</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<main>
<nav>
<div>Image SearchAdvanced Search</div>
</nav>
<section>
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
<form action="https://google.com/search">
<input id="searchbar" type="text" name="q" />
<input id="submit" type="submit" value="Search" />
</form>
</section>
</main>
</body>
</html>
I would like to know where to place the tags correctly and if my code is missing something maybe. When I place the form tags in my code, everything moves as you guys can see in the code snippet.
I would like it to be as shown in the picture below.
This may seem like a very basic question but, to be honest, I don't understand why this happens.
This is what my page looks like without the tags:
Any guidance will be highly appreciated, thanks beforehand.
#main-container{
width: 100%;
height: 100vh;
background-color: rgb(236, 236, 236);
display: flex;
flex-direction: column;
}
/* --------------------- add bar container ----------------- */
#add-bar-container{
width: 100%;
height: 4%;
background-color: white;
display: flex;
align-items: center;
justify-content: flex-end;
border-bottom: 1px solid lightgray;
}
#profile-picture{
height: 30px;
width: 35px;
}
#search-button{
width: 60px;
height: 30px;
margin-right: 10px;
background-color: lightgray;
border: none;
cursor: pointer;
border-radius: 5px;
}
#search-bar{
height: 30px;
width: 200px;
border: none;
}
#user-info-bar{
width: 100%;
height: 3%;
border-bottom: 1px solid lightgray;
}
#panels-container{
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
}
#left-panel{
width: 20%;
height: 100%;
display: flex;
}
#center-panel{
background-color: white;
display: flex;
flex-direction: column;
flex-grow: 3;
}
#right-panel{
width: 20%;
height: 100%;
display: flex;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../styles/styles.css">
<title>Stripe - Agent</title>
</head>
<body>
<div id="main-container">
<form action="" id="search-form">
<div id="add-bar-container">
<input id="search-bar" type="text" placeholder="Search..." name="q">
<button id="search-button" type="submit" value="Search"><i class="fa fa-search"></i></button>
<img src="../icons/profile_img.png" alt="Avatar" id="profile-picture">
</div>
</form>
<div id="user-info-bar">
</div>
<div id="panels-container">
<div id="left-panel">
</div>
<div id="center-panel">
</div>
<div id="right-panel">
</div>
</div>
</div>
</body>
</html>
<div id="add-bar-container">
<form action="" id="search-form">
<input id="search-bar" type="text" placeholder="Search..." name="q">
<button id="search-button" type="submit" value="Search"><i class="fa fa-search"></i></button>
<img src="../icons/profile_img.png" alt="Avatar" id="profile-picture">
</form>
</div
the form should be inside the div
First, if you want to state that a document is written in English, then it is enough to use <html lang="en">, so lose the nonsense <meta lang="en">.
Second, about the style, you need to have a MEDIA attribute on your LINK loading CSS files so you aren't sending screen-specific information to all targets! Add media attribute, surly that style is not for any UA, you can read this article about it. Also, you better have a logical directory structure, so you don't have to "up-tree" link, just "down-tree", in other words, structure your page the same way it’s called by the browser!
For example, the three directory pathing methods:
up-tree: …/styles/styles.css – /FAIL/
rooted: /styles/styles.css – /FAIL/
down-tree: styles/styles.css – /WIN/
Third, stop polluting your markup with class and id while you don't need them. If you have just one form, you can just select that by form {} in your CSS, or for button inside form, button {}/form button {} is enough.
Fourth, don't use <div> inside <form>, use <feildset>, It also groups multiple form elements into related sections, read more on this and about how to make forms and this page from MDN about fieldset. Also, use <label>, placeholder is not a label!
So, May I suggest this markup and style as a refactor:
header {
height: 6em;
background-color: rgb(236, 236, 236);
display: flex;
flex-direction:column;
}
header div {
flex-basis:50%;
border-bottom: 1px solid lightgray;
display:flex;
background-color:#fff;
align-items: center;
justify-content: flex-end;
border-bottom: 1px solid lightgray;
}
header div img {
height: 30px;
width: 35px;
}
header div form {
display:flex;
}
header div form fieldset {
border:none;
}
header div form input {
width: 12em;
border: none;
}
header div form button{
width: 3.5em;
height: 2em;
margin-right: 10px;
background-color: lightgray;
border: none;
cursor: pointer;
border-radius: 5px;
}
header #userInfoBar {
background-color:#ececec;
}
main {
width: 100%;
height: 100%;
display: flex;
background-color: rgb(236, 236, 236);
}
#left-panel{
flex-basis:20%;
height: 100%;
display: flex;
}
#center-panel{
background-color: white;
display: flex;
flex-direction: column;
flex-grow: 3;
}
#right-panel{
flex-basis:20%;
height: 100%;
display: flex;
}
and
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../styles/styles.css">
<title>Stripe - Agent</title>
</head><body>
<header>
<div>
<form action="action.php">
<fieldset>
<label>
Search:
<input
type="text"
placeholder="What are you looking for?"
name="searchBar"
required>
</label>
</fieldset>
<button value="Search"><i class="fa fa-search"></i></button>
</form>
<img src="../icons/profile_img.png" alt="Avatar">
</div>
<div id="userInfoBar">
</div>
</header>
<main>
<div id="left-panel">
</div>
<div id="center-panel">
</div>
<div id="right-panel">
</div>
</main>
</body>
</html>
Whenever I vertically resize the webpage, the image will not stick within its parent container(banner) and instead overflows once the parent div is smaller than the image dimensions. This can be seen in the code snippet by viewing the borders of both the container and image as you vertically resize. Any way I can have the image shrink once the parent div becomes smaller than the image?
/* Styling used for index pages including registration form and reset password pages. */
* {
box-sizing: border-box;
}
body,
html {
font-family: 'Lato', Arial, sans-serif;
width: 100vw; /* 100% of the viewport width */
height: 100vh; /* 100% of the viewport height */
overflow: hidden;
}
.wrapper {
height: 100%;
display: flex;
flex-direction: column;
}
header {
background: #595959;
color: #fff;
display: flex;
flex: 1;
border-bottom: 3px solid #FFD700;
font-size: 2.5em;
}
.banner{
margin: 0 auto;
display: flex;
align-items: center;
border: 3px solid red;
}
.banner img{
height: auto;
border: 3px solid red;
}
main{
display: flex;
flex: 4;
}
<body>
<div class="wrapper">
<header>
<div class="banner">
<h1>Quiz Manager</h1>
<img src="https://via.placeholder.com/115x115" alt="Logo">
</div>
</header>
<main>
<div class="container">
<div class="form-container">
<form action="index.php" method="POST">
<div class="form-row">
<input type="text" name="username" value="<?php echo isset($_POST['username']) ? htmlspecialchars($_POST['username']) : '' ?>" placeholder="Username">
</div>
<div class="form-row">
<input type="password" name="password" placeholder="Password">
</div>
<div class="form-row">
<button type="submit" name="submit">Login</button>
</div>
</form>
</div>
<div class="links">
Forgot Password?
<p id="or">or</p>
<!--If user needs to register an account, they can follow this link.-->
Sign Up
</div>
</div>
</main>
</div>
</body>
If you wrap the image in a div and then set both the wrapping div and img to height: 100% it should do the trick.
See snippet:
/* Styling used for index pages including registration form and reset password pages. */
* {
box-sizing: border-box;
}
body,
html {
font-family: 'Lato', Arial, sans-serif;
width: 100vw; /* 100% of the viewport width */
height: 100vh; /* 100% of the viewport height */
overflow: hidden;
}
.wrapper {
height: 100%;
display: flex;
flex-direction: column;
}
header {
background: #595959;
color: #fff;
display: flex;
flex: 1;
border-bottom: 3px solid #FFD700;
font-size: 2.5em;
}
.banner{
margin: 0 auto;
display: flex;
align-items: center;
border: 3px solid red;
}
.img-wrap {
height: 100%;
text-align: right;
}
.banner img{
border: 3px solid red;
height: 100%
}
main{
display: flex;
flex: 4;
}
<body>
<div class="wrapper">
<header>
<div class="banner">
<h1>Quiz Manager</h1>
<div class="img-wrap">
<img src="https://via.placeholder.com/115x115" alt="Logo">
</div>
</div>
</header>
<main>
<div class="container">
<div class="form-container">
<form action="index.php" method="POST">
<div class="form-row">
<input type="text" name="username" value="<?php echo isset($_POST['username']) ? htmlspecialchars($_POST['username']) : '' ?>" placeholder="Username">
</div>
<div class="form-row">
<input type="password" name="password" placeholder="Password">
</div>
<div class="form-row">
<button type="submit" name="submit">Login</button>
</div>
</form>
</div>
<div class="links">
Forgot Password?
<p id="or">or</p>
<!--If user needs to register an account, they can follow this link.-->
Sign Up
</div>
</div>
</main>
</div>
</body>
For the image, you can use a max-height in vh. I used 70vh, but you can adjust this to your needs.
For the text size, there is no max-font-size, so I did this using a media query.
/* Styling used for index pages including registration form and reset password pages. */
* {
box-sizing: border-box;
}
body,
html {
font-family: 'Lato', 'Arial', sans-serif;
width: 100vw; /* 100% of the viewport width */
height: 100vh; /* 100% of the viewport height */
overflow: hidden;
}
.wrapper {
height: 100%;
display: flex;
flex-direction: column;
}
header {
background: #595959;
color: #fff;
display: flex;
flex: 1;
border-bottom: 3px solid #FFD700;
font-size: 2.5em;
}
.banner {
margin: 0 auto;
display: flex;
align-items: center;
border: 3px solid red;
}
.banner img {
height: auto;
border: 3px solid red;
max-height: 70vh; /* adjust image to small screens */
}
main {
display: flex;
flex: 4;
}
#media (max-height: 15rem) { /* adjust font size to small screens */
header {font-size:16.67vh;}
}
<body>
<div class="wrapper">
<header>
<div class="banner">
<h1>Quiz Manager</h1>
<img src="https://via.placeholder.com/115x115" alt="Logo">
</div>
</header>
<main>
<div class="container">
<div class="form-container">
<form action="index.php" method="POST">
<div class="form-row">
<input type="text" name="username" value="<?php echo isset($_POST['username']) ? htmlspecialchars($_POST['username']) : '' ?>" placeholder="Username">
</div>
<div class="form-row">
<input type="password" name="password" placeholder="Password">
</div>
<div class="form-row">
<button type="submit" name="submit">Login</button>
</div>
</form>
</div>
<div class="links">
Forgot Password?
<p id="or">or</p>
<!--If user needs to register an account, they can follow this link.-->
Sign Up
</div>
</div>
</main>
</div>
</body>
Given I have the html and css in the snippet below the question, how can I vertically centre the login view no matter what screen height is?
I have tried this for the .login-layout__positioner class:
.login-layout__positioner {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 42%;
transform: translateY(-42%);
}
But this does not centre well in large screen heights?
Is there a better way?
body {
height: 100%;
background-color: #f7f7f4;
}
.app-layout__body {
height: 100vh;
display: flex;
flex-direction: column;
}
.app-layout__container {
flex: 1 0 auto;
}
.banner__container {
background-color: #fff
}
.banner__top {
padding-top: 15px;
}
.login-layout__container {
background-color: #f7f7f4;
width: 100%;
}
.login-layout__positioner {
text-align: center;
margin: auto;
}
footer {
background-color: #0065bd;
}
a {
color: #fff;
}
ul {
list-style: none;
margin-left: 0;
}
li {
display: inline;
}
.form__group {
background-color: #fff;
}
<body>
<div id="root">
<div class="main-content">
<div class="app-layout__body">
<div class="app-layout__container">
<div class="banner__container">
<div class="banner__top">
<div>
<div>
<h2>Banner</h2></div>
</div>
</div>
</div>
<div class="login-layout__container">
<div class="login-layout__positioner">
<div class="form__group">
<div>
<form>
<div class="login__container">
<div class="login__wrapper">
<div>
<div>
<div class="login__form__elements">
<div>
<div>
<h2 class="">Sign In</h2></div>
</div>
<div>
<div>
<div>
<label for="email" id="email-label" class="label__default label__strong label__double-margin">Email</label>
<div>
<input type="text" autocomplete="off" class="input__default form-control" id="email" name="email" aria-invalid="false" aria-describedby="email-error" value="">
</div>
<div id="email-error" aria-hidden="true" role="alert"></div>
</div>
</div>
</div>
<div>
<div>
<div>
<label for="password" id="password-label">Password</label>
<div>
<input type="password" autocomplete="off" id="password" name="password" aria-invalid="false" aria-describedby="password-error" value="">
</div>
<div id="password-error" aria-hidden="true" role="alert"></div>
</div>
</div>
</div>
<div>
<div><a to="/">Forgotten your password?</a></div>
<div>
<button type="submit">LOGIN</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<footer>
<div>
<div>
<div>
<ul>
<li><a target="_blank" href="/static/about">About</a></li>
<li><a target="_blank" href="/static/accessibility">Accessibility</a></li>
<li><a target="_blank" href="/static/cookies">Cookies</a></li>
<li><a target="_blank" href="/static/privacy">Privacy</a></li>
</ul>
</div>
</div>
</div>
</footer>
</div>
</div>
</div>
</body>
When it comes to centering something both vertically and horizontally I like to use css flex. Adding it to the parent container surrounding the element you wish to center will cause it to flex in all screen dimensions and heights. Justify-content centers it horizontally and align-items centers it vertically. Here is a helpful guide to learn more about flex:https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.parent-container{
width:100vw;
height:100vh;
background-color:black;
display:flex;
justify-content:center;
align-items:center;
}
.child{
width:50%;
background-color:white;
text-align:center;
}
<div class="parent-container">
<div class="child">
<h1>Centered</h1>
</div><!-- child -->
</div><!-- parent-container -->
Flexbox and grid work great for this, the difference being that grid is said to be 2 dimensional whereas flexbox is 1 dimensional. See MDN's Relationship of flexbox to other layout methods. BTW: If you want a sticky footer add min-height: 100vh; to your container.
Both Ron and Jeh's answer are correct. Though I'm wondering why do you have so many container wrappers then if you can just use certain wrappers to display your entire login form, banner and footer.
Here's my template for my custom login forms.
You will noticed that I use calc on height to differentiate the height of banner and footer and then less it to the height of your .section-login container, in which it will automatically adjusted the height no matter what the browser height does. And I declared min-height just to avoid overlaying above to each container wrapper.
Hope this helps.
.login {
background: pink;
margin: 0;
padding: 0;
}
.body-wrapper {
background: white;
width: 100%;
height: 100vh;
}
.hero-wrapper,
.globalfooter {
background: #CCC;
text-align: center;
}
.hero-wrapper {
line-height: 200px; /* just for the text v-alignment only */
height: 200px;
}
.globalfooter {
line-height: 100px; /* just for the text v-alignment only */
height: 100px;
}
.section-login {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #EEE;
min-height: calc(100% - (200px + 100px));
padding: 30px;
box-sizing: border-box;
}
.help-text-wrapper {
font: 300 12px sans-serif;
color: red;
text-align: center;
margin: 15px 0 0;
}
.help-text-wrapper.hidden {
/* Remove comment to enable
display: none; */
}
h1 {
font: 600 24px sans-serif;
text-align: center;
text-transform: uppercase;
margin: 0 0 15px;
}
form {
background: #FFF;
font: 300 12px sans-serif;
text-transform: uppercase;
width: 260px;
padding: 30px;
box-shadow: 0 0 5px 0 rgba(0,0,0,0.50);
box-sizing: border-box;
border-radius: 3px;
}
form > fieldset {
margin: 0 0 15px;
padding: 0;
border: 0;
}
form > fieldset label:first-child {
display: block;
margin-bottom: 15px;
}
form input {
display: block;
width: 100%;
height: 30px;
margin: 5px 0;
padding: 6px;
box-sizing: border-box;
}
form button {
display: block;
background: #888;
color: #FFF;
text-transform: uppercase;
height: 30px;
margin: auto;
padding: 7px 15px;
border: 0;
cursor: pointer;
}
<body class="login page">
<div class="body-wrapper">
<header class="hero-wrapper">
Banner
</header>
<section class="section-login">
<h1>Sign In</h1>
<form action="" method="post">
<fieldset>
<label for="username">
Username
<input type="text" id="username" value="" placeholder="Username" autofocus>
</label>
<label for="password">
Password
<input type="password" id="password" value="" placeholder="Password">
</label>
</fieldset>
<button type="submit">Login / Sign In</button>
</form>
<div class="help-text-wrapper hidden">
Something around here after fallback.
</div>
</section>
<footer class="globalfooter">
Footer
</footer>
</div>
</body>
Just change some class properties which I wrote down:
.login-layout__positioner {
display: flex;
align-items: center;
justify-content: center;
}
.form__group {
background-color: transparent;
}
a {
color: #333;
}
footer a {
color: #fff;
}
I would like to create a div that contains a text input and a button input on the same line.
The width of the div will be set by me. These two inputs have to fill the div in the way that the button input's width is to be set by it's value, and the rest of the space to be filled by the text input.
I want something like:
<div style="width: 300px; background-color: orange">
<input type="text" />
<input type="button" value="Save" />
</div>
Sorry for my bad English.
Demo: http://jsfiddle.net/abhitalks/Y64ny/
You need to wrap your text input in another div. Apply display:table to the container div and display:table-cell and width:100% to the wrapper div.
HTML:
<div style="width: 300px; background-color: orange">
<div class="t"> <!-- This is the wrapper div around the text input -->
<input type="text" />
</div>
<input type="button" value="Save" />
</div>
CSS:
div { display: table; }
div.t {
display: table-cell;
width: 100%;
}
div.t > input {
width: 100%;
}
Update:
As the Op (#ChocapicSz) states in the comment below, adding box-sizing:border-box will fix the paddings.
Updated fiddle: http://jsfiddle.net/abhitalks/Y64ny/1/
http://jsfiddle.net/8FC2t/
<div>
<input type="text" class='save'/>
<input type="button" value="Save" />
</div>
<br>
<div>
<input type="text" class='dns' />
<input type="button" value="Do not Save" />
</div>
div{
width:200px;
background-color:orange;
}
.dns{
width:calc(100% - 105px)
}
.save{
width:calc(100% - 65px)
}
div>input[type='button']{
float:right;
}
Using position absolute and slightly restructuring the css might work better for you.
Also using <button> instead of <input type="button"> makes life a little easier to style.
I've created an example at codepen for you to see.
HTML:
<div class="container" style="width: 300px">
<input type="text" class="text_input" />
<button value="Save" class="btn">CLICK</button>
</div>
<div class="container" style="width: 500px">
<input type="text" class="text_input" />
<button value="Save" class="btn">CLICK</button>
</div>
<div class="container" style="width: 200px">
<input type="text" class="text_input" />
<button value="Save" class="btn">CLICK</button>
</div>
CSS:
.container {
position: relative;
border: 3px solid orange;
height: 50px;
overflow: hidden;
margin-bottom: 10px;
}
.text_input {
height: 44px;
width: 60%;
padding: 0;
line-height: 30px;
font-size: 20px;
padding: 0;
margin: 3px;
margin-left: 20px;
border: none;
}
.text_input:focus {
outline: none;
}
.btn {
position: absolute;
height: 50px;
line-height: 50px;
right: 0;
top: 0;
margin: 0;
padding: 0;
background: orange;
color: white;
border: none;
width: 30%;
font-weight: bold;
}
.btn:hover {
color: black;
cursor: pointer;
}
Gives you this:
See it working on codepen
<style>
.f-lft {
float:left;
border:2px solid orange;
}
</style>
<body>
<div style="width: 300px;">
<div>
<input class="f-lft"type="text" style="width:80%"/>
<input class="f-lft" type="button" value="Save"/>
</div>
</div>
</body>
I have attached a fiddle for you http://jsfiddle.net/GLAee/
I have done a single one. Remaining you better practice.
Edited :
add width of text field in percent
Another way is to use display flex on their parent.
<div class="parent" style="width: 300px; background-color: orange">
<input type="text" />
<input type="button" value="Save" />
</div>
CSS
.parent{
display: flex;
width: 100%;
height: 50px;
}
input[type="text"] {
height: 50px;
width: 90%;
border: none;
outline: none;
padding: 10px;
font-size: 14px;
}
input[type="button"] {
width: 10%;
height: 50px;
border: none;
outline: none;
background-color: orange;
}
Note, you can play around with the font-size and height to have the desired height and font-size that you want.