Could someone point out how to get the white space left to the login box to be highlighted as part of the link in the title heading? Obviously I don want people to click on the login box and get linked back to the homepage. Tried floating the loginBox element and really not sure what to do. Here's the code:
<html>
<head>
<link rel="stylesheet" href="css.css"/>
</head>
<body>
<div id="container">
<a href="#" style="display:block">
<div id="title">
<h1>Record Store</h1>
<img src="images/vinyl.jpg" height="80px" width="auto" />
</div>
</a>
<div id="loginBox">
<form action="#">
<label>User Name: </label>
<input type="text" />
<label>Password: </label>
<input type="password" />
<input type="submit" value="Login"/>
</form>
</div>
<div id="navigation" >
<ul class="navbar">
<li>Home</li>
<li>Vinyl Stock</li>
<li>Online Offers</li>
<li>Collectors News</li>
<li>Join</li>
</ul>
</div>
<div id="content">
<p>You'd be a fool to believe anything on this site</p>
</div>
<div id="footer">
<span id="adminLogin">Admin Login</span>
<p id="copyright">©</p>
</div>
</div>
</body>
</html>
and
* {
padding: 0;
margin:0;
}
body{
font-family: Arial, Verdana, Helvetica;
}
h1{
font: bold 2.8em Arial, Verdana, Helvetica;
position:absolute;
left: 10px;
top:5px;
}
img {
position: absolute;
left:300px;
/*top:5px;*/
}
#container {
margin: auto;
width: 800px;
border: 1px solid black;
z-index: -9;
}
#title {
margin:auto;
/*border: 1px solid black;*/
height: 16%;
position: relative;
}
#loginBox{
float:right;
border: 1px solid black;
}
#navigation{
clear:both;
border-top: 1px solid black;
border-bottom: 1px solid black;
height: auto;
overflow: auto;
background-color: blue;
}
#content{
min-height:400px;
background-color: white;
}
#adminLogin{
float:right;
margin-right: 60px;
margin-top: 20px;
}
#footer{
height:100px;
background-color: red;
}
#copyright{
clear: both;
text-align: center;
}
.navbar {
}
.navbar ul {
}
.navbar li {
font: bold 12px/1.2em Arial, Verdana, Helvetica;
height: auto;
list-style: none;
text-align: center;
width: 20%;
float:left;
background-color: blue;
padding: 1% 0px;
}
.navbar a {
border-right: 1px solid #1F5065;
color: white;
display: block;
text-decoration: none;
}
.navbar li:hover a {
color: black;
}
.navbar li:hover{
background-color: white;
}
I think your best bet is to fill a parent div with your anchor, and then absolutely position the login on top. The absolutely positioned header and image are better placed using padding, to maintain the box's natural height.
h1 {
font: bold 2.8em Arial,Verdana,Helvetica;
display: inline-block;
vertical-align: top;
}
#header {
position: relative;
margin:auto;
}
#title {
padding: 5px 0 24px 10px;
}
#loginBox{
border: 1px solid black;
position:absolute;
right:0;
bottom:0;
}
And then add your relative div, like
<div id="header">
<a href="#" style="display:block">
<div id="title">
<h1>Record Store</h1>
<img src="images/vinyl.jpg" height="80px" width="auto" />
</div>
</a>
<div id="loginBox">
<form action="#">
<label>User Name: </label>
<input type="text" />
<label>Password: </label>
<input type="password" />
<input type="submit" value="Login"/>
</form>
</div>
</div>
Related
I am trying to position the search bar on a background image. I am also trying to position a button at the bottom and center of the image. Following that, I will have containers.
What I am trying to achieve.
But what I am stuck and confused with positioning. The glyphicon is not working as well?
My Code
<style>
.card {
border: 0px solid;
}
.drop-shadow {
-webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, .5);
box-shadow: 0 0 10px 1px rgb(211, 211, 211, 0.8);
border-radius: 0px;
}
.container-fluid {
width: auto
}
.container-fluid.drop-shadow {
margin-top: 2%;
margin-left: 5%;
margin-right: 5%
}
.img-fluid {
height: 200px;
}
#child {
width: 100%;
height: 20px;
margin: auto;
text-align: center;
bottom: 0px;
position: absolute;
}
.btn-checkin {
display: inline-block;
text-align: center;
white-space: nowrap;
color: #fff;
border-color: #EC008c;
text-transform: uppercase;
background-color: #EC008c;
font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
padding: 0.375rem .75rem;
font-size: 13px;
border-radius: .25rem;
}
</style>
</head>
<body id="page-top">
<div class="card">
<img class="img-fluid" src="img/1847p.png" alt="Card image cap">
<div class="col-md-5">
<div class="form-group">
<div class="icon-addon addon-lg">
<input type="text" placeholder="Search Class" class="form-control" style="height:30px;position:absolute" id="email">
<label for="email" class="glyphicon glyphicon-search" rel="tooltip" title="email"></label>
</div>
</div>
</div>
<div id="child">
<button class="btn-checkin">Check in</button>
<div class="container-fluid drop-shadow">
<div class="row">
frsjafksdalkdfsa
</div>
fsdfdasasd
</div>
</div>
</div>
Problems to target :
Get the search bar on the background pic
Set the background pic always on top of the screen with full width but with certain height. I currently hard coded the height to 200px. Is there a way that it can be responsive?
I am also stuck with the glyphycon issue, why is it not displayed?
How do I position the button at the bottom of the image and in the
center?
Use margin-top with negative value to make the form goes on the image.
Glyphicons look to be working great simply here.
* {
box-sizing: border-box;
}
img {
width: 100%;
}
div#form-box {
margin-top: -95px;
text-align: center;
}
div#input-group {
width: 80%;
margin: 0 auto 20px;
position: relative;
background-color: #fff;
border: none;
border-radius: 5px;
}
input#email, label[for="email"] {
display:inline-block;
vertical-align: middle;
}
input#email {
width: calc(100% - 40px);
padding: 10px;
border: none;
}
label[for="email"] {
width: 40px;
line-height: 40px;
}
button#btn-checkin {
display: inline-block;
padding: 6px 10px;
border: none;
border-radius: 5px;
background-color: #EC008c;
color: #fff;
text-align: center;
text-transform: uppercase;
}
<head>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" />
</head>
<img src="http://wonderfulengineering.com/wp-content/uploads/2016/01/Desktop-Wallpaper-4.jpg" />
<div id="form-box">
<form>
<div id="input-group">
<label for="email" class="glyphicon glyphicon-search"></label><!--
--><input type="text" placeholder="Search Class" id="email">
</div>
<br/>
<button id="btn-checkin">Check-in</button>
</form>
</div>
<br/>
<br/>
<br/>
.card{
border:0px solid;
position:relative;
height:200px;
background:url('https://preview.ibb.co/fex0wK/1847p.png') no-repeat top center;
background-size:cover;
}
.card img {
width:100%;
}
.search-box {
position : absolute;
display:inline-block;
bottom:-30px;
left:0;
right:0;
padding:15px;
text-align:center;
}
.drop-shadow {
-webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, .5);
box-shadow: 0 0 10px 1px rgb(211, 211, 211, 0.8);
border-radius:0px;
}
.container-fluid{
width:auto
}
.container-fluid.drop-shadow {
margin-top:2%;
margin-left:5%;
margin-right:5%
}
.img-fluid {
height: 200px;
}
#child{
width:100%;
height: 20px;
margin: auto;
text-align: center;
margin-top: 40px;
}
.form-group {
width:100%;
margin-bottom:10px;
}
.btn-checkin{
display: inline-block;
text-align: center;
white-space: nowrap;
color: #fff;
border-color: #EC008c;
text-transform: uppercase;
background-color: #EC008c;
font-family:'Open Sans','Helvetica Neue',Arial,sans-serif;
padding: 0.375rem .75rem;
font-size: 13px;
border-radius: .25rem;
}
.icon-addon {
position:relative;
}
.icon-addon label {
position: absolute;
left: 2px;
top: 2px;
padding: 8px;
font-size: 20px;
}
.icon-addon input {
height:40px;
padding-left:35px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body id="page-top">
<div class="card" >
<!-- <img class="img-fluid" src="img/1847p.png" alt="Card image cap"> -->
<div class="search-box">
<div class="form-group">
<div class="icon-addon addon-lg">
<input type="text" placeholder="Search Class" class="form-control" id="email">
<label for="email" class="glyphicon glyphicon-search" rel="tooltip" title="email"></label>
</div>
</div>
<button class="btn-checkin">Check in</button>
</div>
</div>
<div id="child">
<div class="container-fluid drop-shadow">
<div class="row">
frsjafksdalkdfsa
</div>
fsdfdasasd
</div>
</div>
Try this code...If you need any help, let me know.
Ok so you want to position the search bar inside a image.
Make a div with the image as background
background: image_source;
background-size: contain;
position: relative; //must to write
width: 100%;
height: 100px; //as much as you want
Then the css for search bar
position: absolute;
then use top, left,etc to position the search bar
The title says it all. I have tried to wrap the whole html-body, but that didn't work. When I minimize my browser or drag the corners all the elements on my page moves. Suggestions? I'll add my code here, maybe someone can find the error. The page is not done btw!
h1 {
font-family: Arial, Helvetica, sans-serif;
}
/* KATEGORIER*/
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f1f1f1;
}
li a {
float:left;
display: block;
color: black;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
padding: 16px;
text-decoration: none;
cursor:pointer;
}
li a:hover{
background-color: none;
color: #0095cc;
}
/* SØKEBAR*/
#searchbar {
position: relative;
top: 30%;
right: 1000px;
}
/*LOGIN*/
form {
float:right;
width:35%;
position:absolute;
top:20px;
right:10px;
font-family: Arial, Helvetica, sans-serif;
}
.tftextinput{
}
/*BOKSER*/
.boxed{
width: 500px;
margin: 20px auto;
padding: 50px;
border: solid black 4px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.boxed{
position: relative;
bottom:-70px;
right:530px;
background-color: white;
}
<!DOCTYPE html>
<html>
<head>
<title>Startside</title>
<meta charset="utf-8" />
</head>
<body>
<h1>Filmregister</h1>
<!-- KATEGORIER -->
<ul>
<li>Startside</li>
<li>Min Liste</li>
<li>Mine lån</li>
</ul>
<!-- SØKEBAR -->
<div id="searchbar">
<form id="tfnewsearch" method="get" action="">
<input type="text" class="tftextinput" name="q" size="21" maxlength="120"><input type="submit" value="søk" class="tfbutton">
</form>
<div class="tfclear"></div>
</div>
<!-- LOGIN -->
<form>
<label for="E-postadresse">E-postadresse</label>
<input name="E-postadresse" placeholder="E-postadresse" id="E-postadresse" />
<label for="Passord">Passord</label>
<input type="password" placeholder="Passord" id="Passord" />
<input type="submit" value="Logg inn" />
</form>
<!--BOKSER-->
<div class="boxed">
Dette er en test
</div>
</body>
</html>
There are many things wrong with the positioning. I would suggest to use some kind of grid framework for beginning, and look through that code and see how it is done (for example bootstrap). It makes making layout much easier.
http://www.w3schools.com/bootstrap/ go through that tutorial and you will learn a lot about positioning and page layouts.
I could not leave you hanging :D I left the colours so you see what is going on. You can remove them afterwards. And this moving of the code inside the page on stackoverflow to display right is so annoying honestly. Probably there is a solution I do not know about as a new member. Btw the min-width:900px; on class header is to prevent the log in form from overlapping on top of Filmregister. Tested on Mozilla version I fave no clue :D What I am saying is it will most likely act different on different browsers.
<!DOCTYPE html>
<html>
<head>
<title>Startside</title>
<meta charset="utf-8" />
<style>
h1 {
font-family: Arial, Helvetica, sans-serif;
}
/* KATEGORIER*/
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f1f1f1;
}
li a {
float:left;
display: block;
color: black;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
padding: 16px;
text-decoration: none;
cursor:pointer;
}
li a:hover{
background-color: none;
color: #0095cc;
}
/* SØKEBAR*/
#searchbar {
position: absolute;
left: 30px;
top: 200px;
}
/*LOGIN*/
form {
float:right;
width:35%;
position:absolute;
top:20px;
right:10px;
font-family: Arial, Helvetica, sans-serif;
}
.tftextinput{
}
/*BOKSER*/
.boxed{
width: 500px;
margin: 20px auto;
padding: 50px;
border: solid black 4px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.boxed{
position: absolute;
top: 300px;
left:20px;
background-color: white;
}
.header
{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100px;
min-width:900px;
background-color: red;
display: inline-block;
}
.menu
{
position: absolute;
top: 100px;
left: 0px;
width: 100%;
background-color: yellow;
display: inline-block;
}
.login
{
position: absolute;
top: 10px;
right: 0px;
width: 650px;
background-color: yellow;
display: inline-block;
}
</style>
</head>
<body>
<!-- KATEGORIER -->
<span class='menu'>
<ul>
<li>Startside</li>
<li>Min Liste</li>
<li>Mine lån</li>
</ul>
</span>
<!-- SØKEBAR -->
<div id="searchbar">
<pre><form id="tfnewsearch" method="get" action=""><input type="text" class="tftextinput" name="q" size="21" maxlength="120"><input type="submit" value="søk" class="tfbutton"></form></pre>
<div class="tfclear"></div>
</div>
<!-- LOGIN -->
<span class='header'>
<h1>Filmregister</h1>
<form>
<span class='login'>
<label for="E-postadresse">E-postadresse</label>
<input name="E-postadresse" placeholder="E-postadresse" id="E-postadresse" />
<label for="Passord">Passord</label>
<input type="password" placeholder="Passord" id="Passord" />
<input type="submit" value="Logg inn" />
</span>
</form>
</span>
<!--BOKSER-->
<div class="boxed">
Dette er en test
</div>
</body>
</html>
What seems to be an easy HTML page and CSS set up I have come up to an issue. I am trying to make a DIV fill up the rest of the page and meet with the DIV at the bottom.
I have researched all through the web and tried many options I have come across.
It seems the most popular way is to use position:absolute but when I do that my Google map disappears. It will also not let me change the position of the Google Map DIV from relative.
At the moment it is displaying as you can see from my image. I would like the #map DIV to center and fill up the remainder of the space available.
My site in Chrome element view
My HTML code:
<div id="wrapper">
<div id="header">
<h1>Find a Car Park</h1>
</div>
<div id="section">
<input type="text" id="town" placeholder="Search for Town.." onkeypress="handle(event)" />
<input type="button" value="Find Car Parks" onclick="codeAddress()" />
<input type="button" value="View All" onclick="getAllCarParks()" />
<input type="button" value="Your Location" onclick="loadUserScript()" />
</div>
<div id="map">
<div id="googleMap">
</div>
</div>
<div id="footer">
<p>hello</p>
</div>
</div>
</body>
My CSS code:
body{
margin:0;
font-family: 'Cabin', sans-serif;
}
#header {
background-color:#2d89ef;
color:white;
text-align:center;
padding: 20px;
}
#wrapper{
position:absolute;
height:100vh;
width:100vw;
}
#section {
text-align:center;
padding-bottom:15px;
padding-top:15px;
width:100vw;
}
#footer {
background-color:#2c3e50;
color:white;
clear:both;
text-align:center;
padding-top:10px;
padding-bottom:10px;
bottom:0;
position:absolute;
width:100vw;
}
#map {
height:auto;
}
#googleMap{
height:65%;
}
input[type=button], input[type=submit], input[type=reset] {
background-color: #2d89ef;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
border-radius: 4px;
}
input[type=text] {
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
color: darkgrey;
background-color: white;
background-image: url('../images/searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
}
Try using flexbox instead.
https://css-tricks.com/centering-css-complete-guide/
<div style="display:flex;justify-content:center;align-items:center;">
<div></div>
</div>
Try this CSS code on the #map, it will makes your map full width and height of the page :
#map {
display: block;
width: 100%;
height: 100%;
}
Fiddle
On my site, matprichardson.co.uk, when you click the 'help' button in the dialog in the center of the screen, another dialog pops up containing some content.
For some reason, when this happens, the first two lines of the first paragraph element are strangely indented, as well as the header, which is normally centered.
I've looked at my markup and css a number of times now and I'm really struggling to see why this is happening. Could somebody please point me in the right direction?
CSS
body {
margin: 0;
padding: 0;
}
#maincontainer {
font-family: arial;
margin-bottom: 20px;
}
.dialog {
border: 5px solid black;
display: inline-block;
background-color: white;
}
.dialog p, .dialog ul {
font-family: "Courier New";
font-size: 12px;
}
.dialogtitle h2 {
margin: 0;
padding: 1px 0;
font-family: "courier new";
font-size: 12px;
background-color: black;
color: white;
text-align: center;
}
.dialogtitle {
cursor: move;
}
.dialogcontent {
margin: 10px;
}
.windowsbutton{
width: 70px;
height: 22px;
font-family: "courier new";
font-weight: bold;
font-size: 12px;
border-width:2px;
border-top: 2px solid white;
border-left: 2px solid white;
}
.buttonsurround {
border: 1px solid black;
max-width: 70px;
border-radius:3px;
display: inline-block;
margin: 0 10px;
}
.buttonselected {
border-width: 2px;
}
.windowsbutton:focus {
outline: none;
}
#maindialog {
position: absolute;
top: 220px;
left: 50%;
margin-left: -150px;
}
#helpdialog {
display: none;
width: 500px;
top: 70px;
left: 110px;
}
#helpClose {
margin:0 200px;
}
/*Menu*/
#menu {
margin: 0 0 20px 0;
padding: 0;
height: 30px;
background-color: black;
width: 100%;
}
/*Icons*/
.iconcontainer {
width: 80px;
float: left;
}
.iconcontainer:hover {
cursor:pointer;
}
.foldericon {
height: 40px;
width: 40px;
border: 2px solid black;
border-radius: 0 0 10px 0;
text-align: center;
margin: 0 auto;
background-color: white;
}
.iconhead {
height: 10px;
border-bottom: 2px solid black;
background-color:black;
}
.foldertext {
margin-top: 5px;
}
.iconcontainer h1 {
font-family: "Courier New";
font-size: 12px;
text-align: center;
margin: 0;
padding: 0;
}
HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Mat Richardson</title>
<link rel="stylesheet" href="style.css" />
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div id="maincontainer">
<div id="menu">
</div>
<!--an icon. Lovely, isn't it?-->
<div class="iconcontainer" id="blog">
<div class="foldericon">
<div class="iconhead">
</div>
<div class="iconmain">
</div>
</div>
<div class="foldertext">
<h1>blog</h1>
</div>
</div>
<div class="iconcontainer" id="pictures">
<div class="foldericon">
<div class="iconhead">
</div>
<div class="iconmain">
</div>
</div>
<div class="foldertext">
<h1>pics</h1>
</div>
</div>
<div class="iconcontainer" id="websites">
<div class="foldericon">
<div class="iconhead">
</div>
<div class="iconmain">
</div>
</div>
<div class="foldertext">
<h1>websites</h1>
</div>
</div>
<div id="maindialog" class="dialog">
<div class="dialogtitle">
<h2>Welcome to matprichardson.co.uk</h2>
</div>
<div class="dialogcontent">
<div class="buttonsurround buttonselected"><input type="button" id="mainOK" value="OK" class="windowsbutton" /></div>
<div class="buttonsurround"><input type="button" value="Cancel" id="mainCancel" class="windowsbutton" /></div>
<div class="buttonsurround"><input type="button" value="H̲elp" id="mainHelp" class="windowsbutton" /></div>
</div>
</div>
<div id="helpdialog" class="dialog">
<div class="dialogtitle">
<h2>Help</h2>
</div>
<div class="dialogcontent">
<p>Welcome to the personal site of Mat Richardson. There's not much to see right now,
but do feel free to have a click about.</p>
<p>Some links you might want to visit (or not, your choice):</p>
<ul>
<li>2toria (another site I own)</li>
<li>My Codepen Profile</li>
<li>My StackOverflow Profile</li>
<li>My twitter account</li>
<li>My LinkedIn Profile</li>
</ul>
<div id="helpClose" class="buttonsurround buttonselected"><input type="button" value="Close" class="windowsbutton" /></div>
</div>
</div>
</div>
</body>
</html>
It's because the position property for your blog, websites,and pics divs is set to relative and therefore it's taking up space. Change it so that they're set to absolute, and the text on your help dialog goes back to normal.
You could add something like:
#blog, #pictures, #websites {
position:absolute;
}
#blog {
left:20px;
}
#pictures {
left:80px;
}
#websites {
left:140px;
}
jsFiddle example
As I noted in my comment:
This is because the dialog is positioned relatively and it is still in
document normal flow. Therefore the content wraps the floated icons
which are at the left-top of the page.
Positioning the dialog box absolutely will fix the problem.
Alternatively, you can add clear: both declaration to the dialog element in order for clearing the floats. Thus the content of relative positioned dialog won't wrap the floated icons anymore.
I have container div (gray box) with floating elements inside:
Bars are floating to the left and button if floating to the right. Now I want textbox to fill the empty space between the bars and the button.
Please note that bars count may vary during typind so textbox should be able to resize accordingly. So solutions with static widths (even if they are expressed in %) will not work.
How can I do it?
EDIT:
Here's my code:
HTML:
<div id="dp-container">
<ol id="tag-list">
<li dp-item class="dp-bar-table">sales</li>
<li dp-item class="dp-bar-field">cost</li>
</ol>
<input id="dp-input-str" type="text">
<input type="button" value="GO" style="float: right;">
<div style="clear:both;"></div>
</div>
CSS:
body {
font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
}
ol {
display: inline;
margin: 0;
padding: 0;
vertical-align: middle;
list-style-type: none;
}
li[dp-item] {
background-color: #e0ffff;
display: inline-block;
float: left;
padding: 3px;
margin: 2px;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FEFEFE), to(#EBEBEB));
border: 1px solid lightgray;
border-radius: 3px;
}
.dp-bar-table {
color: blue;
font-weight: bold;
}
.dp-bar-field {
color: blue;
}
#dp-input-str {
border: none;
display: inline-block;
margin-left: 5px;
margin-top: 3px;
width: auto;
outline: none;
font-size: 12pt;
vertical-align: middle;
line-height: 25px;
box-shadow: none;
#dp-container {
display: inline-block;
border: 1px solid #d3d3d3;
height: 32px;
padding: 3px;
width: 90%;
}
#dp-find-str {
color: gray;
float: left;
margin-top: 10px;
margin-right: 8px;
}
May be that's you want check this http://jsfiddle.net/bYmM4/7/ . Write like this:
HTML
<div class="main">
<input type="button" value="test" />
<input type="button" value="test" />
<input type="button" value="Go" class="go"/>
<div class="textbox">
<input type="text" />
</div>
</div>
CSS
.main{position:relative; border:#333 1px solid}
input[type="button"]{width:8%; float:left;}
.textbox{
background-color:grey;
overflow:hidden;
position:relative;
}
.textbox input{
width:100%;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
input.go{float:right}