I've got a search form within a div that
margin: 0 auto;
isn't moving it to the center. Any idea's of how to correct this?
Here's an image link to reference
HTML:
<div id="welcome">
<div class="search-row">
<div class="postcode-search col-lg-4">
<div id="postcode-search" class="input-group">
<input type="text" id="postcode-bar" class="form-control" placeholder="Enter postcode.."/>
<span class="input-group-btn">
<button class="btn btn-default" id="postcode-btn" type="button">FIND STORES</button>
</span>
</div>
</div>
</div>
</div>
CSS:
#welcome {
height: 220px;
border: 1px solid yellow;
}
#postcode-search {
margin: 0 auto;
padding: 0px;
}
#postcode-bar {
height: 50px;
background-color: #fff;
text-align: center;
font-size: 13px;
}
#postcode-btn {
height: 50px;
}
Add additional class "col-lg-offset-4" to "postcode-search".
Because you are using "col-lg-4" it adds style width: 33.33% and float: left.
So, The style below won't work. This is Useless style.
#postcode-search {
margin: 0 auto;
padding: 0px;
}
You just have to add one bootstrap grid offset class to center your form within a DIV.
Using a pure CSS solution you can simply do this, using text-align:
#welcome {
height: 220px;
border: 1px solid yellow;
}
#postcode-search {
margin: 0 auto;
padding: 0px;
text-align: center;
}
#postcode-bar {
height: 50px;
background-color: #fff;
text-align: center;
font-size: 13px;
}
#postcode-btn {
height: 50px;
}
<div id="welcome">
<div class="search-row">
<div class="postcode-search col-lg-4">
<div id="postcode-search" class="input-group">
<input type="text" id="postcode-bar" class="form-control" placeholder="Enter postcode.."/>
<span class="input-group-btn">
<button class="btn btn-default" id="postcode-btn" type="button">FIND STORES</button>
</span>
</div>
</div>
</div>
</div>
You need to width on #postcode-search fox example width: 300px; then it will be in center
This is quite simple.
I applied the text-align:center style
#postcode-search {
margin: 0 auto;
padding: 0px;
text-align:center;
}
Here is a working demo
you have to add this css
.postcode-search {
width: 300px; // change value as per requirement
padding: 30px; // optional
}
.postcode-search.col-lg-4 {
margin: auto;
}
here is a working example https://plnkr.co/edit/FSeAt3TkFeuGvj57hVgS?p=preview
Related
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;
}
Having tried the solutions suggested in the other posts, I'm left to post my novice code in which the embedded image simply will not centre and I haven't a clue why. The image should appear in the middle of a login screen/box; it did for the guy who did the demo, yet I've had to alter his CSS to make it marginally better. Still, the image will not centre. Does anyone have any insight?
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Standard Meta Tags -->
<!-- Bootstrap & Related Links-->
<link rel="stylesheet" href="static/styles.css">
<title>Project</title>
</head>
<body>
<!-- cont is the entire box; changing its CSS changes its position on the page -->
<div class="cont">
<!-- box is the area that contains the image, username, and pass fields, but not the button bar and login buttons -->
<div class="box">
<!-- Creates the entire top row with close button and three circular buttons
<div class="row top">
<div class="left">
<i class="fa fa-times close"></i>
</div>
<div class="right">
<i class=" fa fa-circle but one"></i>
<i class=" fa fa-circle but two"></i>
<i class=" fa fa-circle but three"></i>
</div>
</div>
-->
<div class="row middle sg">
<div class="row pic sg">
<div class="col-md-4 col-md-offset-4">
<img src="static/fleur.jpeg" alt="fleur-de-lis" class="photo">
</div>
</div>
<form action="#" class="form-horizontal form">
<div class="input-group y">
<span class="input-group-addon"><i class="fa fa-user use"></i></span>
<input type="text" class="form-control" placeholder="Username">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="fa faunlock-alt use"></i></span>
<input type="password" class="form-control" placeholder="Password">
</div>
</form>
</div>
<div class="row base sg">
<h2 class="text-center login">Login</h2>
</div>
</div>
</div>
</body>
</html>
CSS
html, body {
width: 100%;
height: 100%;
}
.cont {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.box {
background-color: #2B2B35;
width: 400px;
border-radius: 10px;
}
.top {
width: 100%;
background-color: #24242E;
margin: 0;
border-radius: 10px 10px 0 0;
padding: 0 15px;
}
.left {
float: left;
}
.right {
float: right;
}
.close {
padding: 18px 0;
font-size: 20px;
color: #fff;
}
.but {
padding: 18px 0 18px 5px;
font-size: 20px;
}
.but:hover {
cursor: pointer;
}
.one {
color: #F4CB61;
}
.two {
color: #DB5594;
}
.three {
color: #6451E8;
}
.photo {
width: 200px;
border-radius: 50%;
}
.sg {
display: block;
margin-left: auto;
margin-right: auto;
align-items: center;
justify-content: center;
}
.pic {
margin: 40px 0 30px 0;
}
.form {
padding: 0 40px 40px 40px;
}
.login {
padding: 12px 0;
margin: 0;
}
.base {
background-color: #3FA752;
border-radius: 0 0 10px 10px;
color: #fff;
}
.base:hover {
cursor: pointer;
}
.base h2{
font-weight: 600;
font-size: 26px;
}
.user {
color: #ccc;
}
.y {
padding-bottom: 15px;
}
input[type=text],
input[type=password] {
background: 0, 0;
border: 0;
box-shadow: none;
border-radius: 0;
border-bottom: 1px solid #9446B6;
}
.input-group-addon {
background: 0 0;
border: 0;
border-radius: 0;
border-bottom: 1px solid #9AA6B6;
}
.use {
color: #9AA6B6;
}
input[type=text],
input[type=password]:focus{
box-shadow: none !important;
color: #FF3F3F;
}
Updated:
Removing these classes class="col-md-4 col-md-offset-4" and adding a class to center the image fixes the problem.
html, body {
width: 100%;
height: 100%;
}
.cont {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.box {
background-color: #2B2B35;
width: 400px;
border-radius: 10px;
}
.top {
width: 100%;
background-color: #24242E;
margin: 0;
border-radius: 10px 10px 0 0;
padding: 0 15px;
}
.left {
float: left;
}
.right {
float: right;
}
.close {
padding: 18px 0;
font-size: 20px;
color: #fff;
}
.but {
padding: 18px 0 18px 5px;
font-size: 20px;
}
.but:hover {
cursor: pointer;
}
.one {
color: #F4CB61;
}
.two {
color: #DB5594;
}
.three {
color: #6451E8;
}
.text-center {
text-align: center;
}
.photo {
width: 200px;
border-radius: 50%;
}
.sg {
display: block;
margin-left: auto;
margin-right: auto;
align-items: center;
justify-content: center;
}
.pic {
margin: 40px 0 30px 0;
}
.form {
padding: 0 40px 40px 40px;
}
.login {
padding: 12px 0;
margin: 0;
}
.base {
background-color: #3FA752;
border-radius: 0 0 10px 10px;
color: #fff;
}
.base:hover {
cursor: pointer;
}
.base h2{
font-weight: 600;
font-size: 26px;
}
.user {
color: #ccc;
}
.y {
padding-bottom: 15px;
}
input[type=text],
input[type=password] {
background: 0, 0;
border: 0;
box-shadow: none;
border-radius: 0;
border-bottom: 1px solid #9446B6;
}
.input-group-addon {
background: 0 0;
border: 0;
border-radius: 0;
border-bottom: 1px solid #9AA6B6;
}
.use {
color: #9AA6B6;
}
input[type=text],
input[type=password]:focus{
box-shadow: none !important;
color: #FF3F3F;
}
<html lang="en">
<head>
<!-- Standard Meta Tags -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Bootstrap & Related Links-->
<link rel="stylesheet" href="static/styles.css">
<title>Project</title>
</head>
<body>
<!-- cont is the entire box; changing its CSS changes its position on the page -->
<div class="cont">
<!-- box is the area that contains the image, username, and pass fields, but not the button bar and login buttons -->
<div class="box">
<!-- Creates the entire top row with close button and three circular buttons
<div class="row top">
<div class="left">
<i class="fa fa-times close"></i>
</div>
<div class="right">
<i class=" fa fa-circle but one"></i>
<i class=" fa fa-circle but two"></i>
<i class=" fa fa-circle but three"></i>
</div>
</div>
-->
<div class="row middle sg">
<div class="row pic sg">
<div class="text-center">
<img src="https://placeimg.com/200/200/nature" alt="fleur-de-lis" class="photo">
</div>
</div>
<form action="#" class="form-horizontal form">
<div class="input-group y">
<span class="input-group-addon"><i class="fa fa-user use"></i></span>
<input type="text" class="form-control" placeholder="Username">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="fa faunlock-alt use"></i></span>
<input type="password" class="form-control" placeholder="Password">
</div>
</form>
</div>
<div class="row base sg">
<h2 class="text-center login">Login</h2>
</div>
</div>
</div>
</body>
</html>
By default images are inline-block elements, they follow the regular flow and should be centered with text-align (set in the parent).
Images can be set to display as block elements, to center these the value of width must be set (amount, percent,...), and both left and right margins set to auto.
.container {
width: 100%;
}
.tex-center {
text-align: center;
}
#inline-example {
display: inline-block; /* Default value*/
}
#block-example {
display: block;
max-width: 200px;
margin: 0 auto 0 auto;
}
<h3>Inline centered image</h3>
<div class="container tex-center"><img id="inline-example" src="https://placeimg.com/200/200/nature"></div>
<h3>Block centered image</h3>
<div class="container"><img id="block-example" src="https://placeimg.com/200/200/people"></div>
How to find out similar CSS issues. Using Chrome's devtools (or similar) we can see there's a margin in the left pushing the image. col-md-4 col-md-offset-4 are both Bootsrap classes used for a grid setup, trying and removing them gives us the solution.
Try this:
.photo {
width: 200px;
border-radius: 50%;
display: block;
margin: auto;
}
To center an image in a div, you should normally set the display to block and margin to auto on the img.
If you are talking about this image <img src="static/fleur.jpeg" alt="fleur-de-lis" class="photo"> then you should add to your 'photo' class:
display:block;
margin: 0 auto;
Make sure other CSS wont prevent those lines to work and your image should centre itself within your col-element.
Your image is in column with offset, remove column classes (event whole div) and all will work well with:
.photo {
display: block; // defining element as block
margin: 0 auto; // and auto side margin
width: 200px;
border-radius: 50%;
}
Example:
https://codepen.io/themeler/pen/QqNpWv
I have to make an <input> that's larger than the usual. The height must be 55px. I am having trouble vertically aligning the glyph image inside the orange square. It looks like this:
It should look like this:
I have tried using margin-top on my <i> element but it moves the rectangle down too, I need to move just the glyph. It looks like this:
Please let me know if you have any ideas on how I could vertically center the glyph inside the orange box. I have setup a jsfiddle at https://jsfiddle.net/vteL375o/1/
HTML:
<div class="container">
<div class="form-group has-feedback" style="margin-top:20px;">
<input type="text" id="search-query" class="form-control not-rounded search-input">
<i class="glyphicon glyphicon-search form-control-feedback glyph-class" style=""></i>
</div>
</div>
CSS:
.not-rounded {
border-radius: 0;
}
.search-input {
font-size: 20px;
margin-bottom: 50px;
height: 55px;
}
.glyph-class {
height: 55px;
width: 55px;
color:white;
background-color: orange;
font-size: 20px;
}
You can use Flexbox for this, or inline-flex in this case.
.not-rounded {
border-radius: 0;
}
input.search-input {
font-size: 20px;
margin-bottom: 50px;
height: 55px;
}
.glyphicon.glyphicon-search.form-control-feedback.glyph-class {
height: 55px;
width: 55px;
color: white;
background-color: orange;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 20px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="form-group has-feedback" style="margin-top:20px;">
<input type="text" id="search-query" class="form-control not-rounded search-input">
<i class="glyphicon glyphicon-search form-control-feedback glyph-class" style=""></i>
</div>
</div>
Add line-height: 55px; to .glyph-class.
input.not-rounded {
border-radius: 0;
}
input.search-input {
font-size: 20px;
margin-bottom: 50px;
height: 55px;
}
i.glyph-class {
height: 55px;
width: 55px;
color: white;
background-color: orange;
font-size: 20px;
line-height: 55px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="form-group has-feedback" style="margin-top:20px;">
<input type="text" id="search-query" class="form-control not-rounded search-input">
<i class="glyphicon glyphicon-search form-control-feedback glyph-class" style=""></i>
</div>
</div>
Just add padding: 10px 0; in to your .glyph-class
like this
.glyph-class {
height: 55px;
width: 55px;
color:white;
background-color: orange;
font-size: 20px;
padding: 10px 0;
}
Here is the running sample: https://jsfiddle.net/vteL375o/6/
could someone help me with an example how to accomplish following layout? Is tables the best for this?
https://gyazo.com/80a2f66d280c480c1e6e70637959b271
I do not want to hardcode the width of the elements because I need it to be responsive aswell, thats why I am having a hard time..
So basicly I need it centered but not text-align centered. Appreciate all the help I could get.
Don't use tables, this makes it hard to optimize the website for mobile devices. Here's what I would do:
body {
font-family: Arial, sans-serif;
color: #444444;
}
.info {
border: 1px solid #bbbbbb;
border-width: 1px 0;
padding: 10px;
}
.row {
line-height: 30px;
padding: 10px;
}
.label {
display: inline-block;
width: 30%; /* You may want to adjust this property */
margin: 0 10px;
text-align: right;
font-size: 95%;
color: #888888;
}
button {
border: none;
background-color: #43CEAD;
border-radius: 3px;
padding: 4px 10px;
color: white;
font-size: 90%;
}
.right {
float: right;
}
<div class="info">
<div class="row">
<span class="label">Name:</span>
John Doe
<button class="right">Edit</button>
</div>
<div class="row">
<span class="label">Password:</span>
********
<button class="right">Edit</button>
</div>
<div class="row">
<span class="label">Animus Heart ID:</span>
B0 23459332
<button class="right">Edit</button>
</div>
<div class="row">
<span class="label">E-mail:</span>
john#doe.com
<button class="right">Edit</button>
</div>
</div>
Why tables? You can set div width in percent, isn't it?
.col--first {
width: 40%;
float: left;
text-align: right;
}
.col--second {
margin-left: 1%;
width: 59%;
float: left;
}
.col--second:after {
content: '';
display: table;
clear: both;
}
.right {
float: right;
}
<div>
<div class="col--first">Name:</div>
<div class="col--second">John
<button class="right">Edit</button>
</div>
<div class="col--first">Password:</div>
<div class="col--second">******
<button class="right">Edit</button>
</div>
</div>
Have a look at responsive tables:
.table {
display: table;
}
.table > .row {
display: table-row;
}
.table > .row > .cell {
display: table-cell;
}
<div class="table">
<div class="row">
<div class="cell">
First
</div>
<div class="cell">
Second
</div>
<div class="cell">
Third
</div>
</div>
</div>
#img {
width: 100%;
margin: 0 auto;
}
Width can be changed to reflect the desired size of the image, but this will center the image based on the parent element's size by dividing the two margins equally on the left and right.
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.