I'm working on a registration form and I have a problem when I want to make input["text"] (year) and select item (day and month) on the same line, this what I'm getting :
registration form
I want to delete the margin on the bottom of the select tag (added by default ) by adding a margin on the top, so I add this :
input[type="email"],
input[type="password"],
input[type="text"],
select {
display: block;
width: 80%;
height: 30px;
text-align: center;
border: none;
font-size: 1em;
color: #313A3D;
background-color: #E8E9EA;
margin-top: 10px;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="./css/styleAuth.css" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<header>
<div class="navbartop">
<!--<a class="title" href="./auth.html" >title of the template</a>-->
<a class="item selected" href="#auth">Authentification</a>
<a class="item" href="#register">register</a>
<a class="item" href="#newsleter">newsleter</a>
<a class="item" href="#comments">Comments</a>
</div>
</header>
<section class="secondSection">
<div class="registerPanel">
<div class="row topbuffer">
<div class="col-md-6"><input type="text" name="fn" placeholder="first name" /> </div>
<div class="col-md-6"><input type="text" name="ln" placeholder="last name" /></div>
</div>
<div class="row topBuffer">
<div class="col-md-4">
<select>
<option selected="">day</option>
<option>1...31</option>
</select>
</div>
<div class="col-md-4">
<select>
<option>month</option>
<option>1...12</option>
</select>
</div>
<div class="col-md-4">
<input type="text" name="y" placeholder="year" />
</div>
</div>
<div class="row topBuffer">
<div class="col-md-12"><input type="email" name="email" placeholder="email" /></div>
</div>
<div class="row topBuffer">
<div class="col-md-6"><input type="password" name="pw1" placeholder="enter your password" /></div>
<div class="col-md-6"><input type="password" name="pw2" placeholder="comfirm your password" /></div>
</div>
</div>
</section>
</body>
</html>
... but it's still not working, the margin on the top has no effect, so can anyone help me, guys !!
thanks in advance
Try this. No need to write any css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Test Code</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css " crossorigin="anonymous ">
<style>
input[type="email"],
input[type="password"],
input[type="text"],
select {
/* display : block;
width : 80%;
height : 30px;
text-align : center;
border : none;
font-size : 1em;
color: #313A3D;
background-color: #E8E9EA;
margin-top : 10px; */
}
</style>
</head>
<body>
<header>
<div class="navbartop">
<!--<a class="title" href="./auth.html" >title of the template</a>-->
<a class="item selected" href="#auth">Authentification</a>
<a class="item" href="#register">register</a>
<a class="item" href="#newsleter">newsleter</a>
<a class="item" href="#comments">Comments</a>
</div>
</header>
<section class="secondSection">
<div class="registerPanel">
<div class="row topbuffer form-group">
<div class="col-md-6">
<input type="text" name="fn" placeholder="first name" / class="form-control"> </div>
<div class="col-md-6">
<input type="text" name="ln" placeholder="last name" / class="form-control">
</div>
</div>
<div class="row topBuffer form-group">
<div class="col-md-4">
<select class="form-control">
<option selected="">day</option>
<option>1...31</option>
</select>
</div>
<div class="col-md-4">
<select class="form-control">
<option>month</option>
<option>1...12</option>
</select>
</div>
<div class="col-md-4">
<input type="text" name="y" placeholder="year" class="form-control" />
</div>
</div>
<div class="form-group">
<input type="email" name="email" placeholder="email" / class="form-control">
</div>
<div class="row form-group">
<div class="col-md-6">
<input type="password" name="pw1" placeholder="enter your password" / class="form-control">
</div>
<div class="col-md-6">
<input type="password" name="pw2" placeholder="comfirm your password" / class="form-control">
</div>
</div>
</div>
</section>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" crossorigin="anonymous"></script>
</body>
</html>
Updated:
I do not know if I understood well but what you want is to remove the botton margin of the two selects ?, if so, here is the necessary css:
First, you need to add a class to the day and month selects like this:
HTML:
<div class="col-md-4">
<select class="margin-bottom-0">
<option selected="" >day</option>
<option>1...31</option>
</select>
</div>
<div class="col-md-4">
<select class="margin-bottom-0">
<option>month</option>
<option>1...12</option>
</select>
</div>
<div class="col-md-4">
<input type="text" name="y" placeholder="year"/>
</div>
After that do you need to declare the class in css like this:
CSS:
.margin-bottom-0{
margin-bottom: 0;
}
I hope it helps you
Regards!
Related
In my web form, there's a white space on the right side, how to remove it or resize the panel?
I have tried padding and margin also width for panel and container but it's not working.
.container {
margin-top: 50px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" type="text/javascript" ></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/javascript" ></script>
<div class="container" >
<div class="panel panel-primary" >
<div class="panel-heading" >
<h3 class="panel-title ">Personal Infomation</h3>
</div>
<div class="panel-body " >
<br>
<div id="p_info">
<div class="row">
<div class="col-md-6">
<label class="control-label">First Name</label>
<input class="form-control" id="first_name" >
</div>
</div>
<div class="row" >
<div class="col-md-6">
<label class="control-label">Last Name</label>
<input class="form-control" id="last_name" >
</div>
</div>
<div class="row">
<div class="col-md-6">
<label class="control-label">Gender</label>
<select class="form-control field" id="sel1" >
<option disabled selected value> -- select an option -- </option>
<option>Male</option>
<option>Female</option>
</select>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label class="control-label">Date of Birth</label>
<input type="date" name="bdaytime" class="form-control" id="DOB" >
</div>
</div>
<div class="row">
<div class="col-md-6">
<label class="control-label">Place of Birth</label>
<input class="form-control" id="Place" >
</div>
</div>
</div>
</div>
</div>
</div>
I want to remove white space on this web from. why would this shows like that
let me know.I want to remove white space on this web from. why would this shows like that
let me know.I want to remove white space on this web from. why would this shows like that
let me know.
I want to remove marked part
Bootstrap uses a media query for the .col-md-6 class where it goes from full width to half width with a screen larger than 992px:
#media (min-width: 992px)
.col-md-6 {
width: 50%;
}
You can either create your own CSS rules or use an inline style (e.g., <div class="col-md-6" style="width:100%">) to override this Bootstrap style rule.
Is this what you look for ?
.panel-body {
padding-left: 0px;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<style>
.container {
margin-top: 50px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" type="text/javascript" ></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/javascript" ></script>
</head>
<body>
<div class="container" >
<div class="panel panel-primary" >
<div class="panel-heading" >
<h3 class="panel-title ">Personal Infomation</h3>
</div>
<div class="panel-body " >
<br>
<div id="p_info">
<div class="row">
<div class="col-md-6">
<label class="control-label">First Name</label>
<input class="form-control" id="first_name" >
</div>
</div>
<div class="row" >
<div class="col-md-6">
<label class="control-label">Last Name</label>
<input class="form-control" id="last_name" >
</div>
</div>
<div class="row">
<div class="col-md-6">
<label class="control-label">Gender</label>
<select class="form-control field" id="sel1" >
<option disabled selected value> -- select an option -- </option>
<option>Male</option>
<option>Female</option>
</select>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label class="control-label">Date of Birth</label>
<input type="date" name="bdaytime" class="form-control" id="DOB" >
</div>
</div>
<div class="row">
<div class="col-md-6">
<label class="control-label">Place of Birth</label>
<input class="form-control" id="Place" >
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
.container {
margin-top: 50px;
}
.three-col {
width: 50%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" type="text/javascript" ></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/javascript" ></script>
<div class="container" >
<div class="panel panel-primary" >
<div class="panel-heading" >
<h3 class="panel-title ">Personal Information</h3>
</div>
<div class="panel-body " >
<br>
<div id="p_info">
<div class="row">
<div class="col-md-6">
<label class="control-label">First Name</label>
<input class="form-control" id="first_name" >
</div>
</div>
<div class="row" >
<div class="col-md-6">
<label class="control-label">Last Name</label>
<input class="form-control" id="last_name" >
</div>
</div>
<div class="row three-col">
<div class="col-md-3">
<label class="control-label">Gender</label>
<select class="form-control field" id="sel1" >
<option disabled selected value> -- select an option -- </option>
<option>Male</option>
<option>Female</option>
<option>Other</option>
</select>
</div>
</div>
<div class="row three-col">
<div class="col-md-3">
<label class="control-label">Date of Birth</label>
<input type="date" name="bdaytime" class="form-control" id="DOB" >
</div>
</div>
<div class="row">
<div class="col-md-6">
<label class="control-label">Place of Birth</label>
<input class="form-control" id="Place" >
</div>
</div>
</div>
</div>
</div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<section class="section-component">
<h1>Contact Person</h1>
<div class="form-group row">
<div class="col-xs-6 form-field">
<label for="ex1">Name</label>
<input class="form-control" id="ex1" placeholder="First name" type="text">
</div>
<div class="col-xs-6 form-field">
<input class="form-control" id="ex1" placeholder="Last name" type="text">
</div>
</div>
</section>
The two input fields do not align in the same line when i take the label off the second field how can this be corrected ?
Make the label as siblings of the form-group instead if you are planning to use only one label, and you can instead use <span> or any other element, because semantically speaking, <label> is not for this kind of naming, much like using <h1> in Contact Person instead of a <label> with style
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<section class="section-component">
<h1>Contact Person</h1>
<label for="ex1">Name</label>
<div class="form-group row">
<div class="col-xs-6 form-field">
<input class="form-control" id="ex1" placeholder="First name" type="text">
</div>
<div class="col-xs-6 form-field">
<input class="form-control" id="ex1" placeholder="Last name" type="text">
</div>
</div>
</section>
Swellar has a good solution in his answer. However, if you are looking for an alternative, you can put a dummy label element and then set its CSS property as visibility: hidden;. So, you don't have to take out your label element from second field, and this label will be hidden.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<section class="section-component">
<h1>Contact Person</h1>
<div class="form-group row">
<div class="col-xs-6 form-field">
<label for="ex1">Name</label>
<input class="form-control" id="ex1" placeholder="First name" type="text">
</div>
<div class="col-xs-6 form-field">
<label for="ex1" style="visibility: hidden;">LName</label>
<input class="form-control" id="ex1" placeholder="Last name" type="text">
</div>
</div>
</section>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<section class="section-component">
<div class="col-xs-12"><h1>Contact Person</h1> </div>
<div class="form-group">
<div class="col-xs-6 form-field">
<label for="ex1">Name</label>
<input class="form-control" id="ex1" placeholder="First name" type="text">
</div>
</div>
<div class="form-group">
<div class="col-xs-6 form-field">
<label for="ex2">Last Name</label>
<input class="form-control" id="ex2" placeholder="Last name" type="text">
</div>
</div>
</section>
You have to add a <label> to your last name field.
You should always include a label for better accessibility.
If you don't want to use a label (which is not recommended), you can use flex-box to align it to the bottom:
.form-group: {
align-items: flex-end;
display: flex;
}
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<!-- website templates CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- custom CSS -->
<link rel="stylesheet" type="text/css" href="mystyle.css">
<!-- website templates fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<div class="container">
<form>
<div class="form-group row">
<div class="col-xs-6 form-field">
<label for="ex1" style="margin-bottom:0">Name</label>
<input class="form-control" id="ex1" placeholder="First name" type="text">
</div>
<div class="col-xs-6 form-field">
<label></label>
<input class="form-control" id="ex1" placeholder="Last name" type="text">
</div>
</div>
</form>
</div>
</body>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- website template JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- custom date picker JavaScript -->
<script src="/js/myScript1.js"></script>
</html>
I cant seem to make this work. I wanted a simple responsive login page but the form doesn't stay on the center, it keeps going to the left.
Why this is not working?? If I divide the col into 3 sections of 4, should the it stay on the middle?
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<meta charset="utf-8">
<title>Login</title>
</head>
<body style="background-color: #4b5257">
<div class="container">
<div class="col-lg-4"></div>
<div class="col-lg-4">
<div class="jumbotron" style="margin-top:150px">
<h3>Please login</h3>
<form action="Dashboard.jsp">
<div class="form-group">
<input type="email" class="form-control" placeholder="Enter Username">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Enter password">
</div>
<div class="custom-checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn-primary form-control">Login</button>
</form>
</div>
</div>
<div class="col-lg-4"></div>
</div>
</body>
</html>
I've added a class named col-centered. You can see an example below.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css">
<meta charset="utf-8">
<title>Login</title>
<style>
.col-centered{
float: none;
margin: 0 auto;
}
</style>
</head>
<body style="background-color: #4b5257">
<div class="container">
<div class="col-xs-12 col-sm-8 col-md-4 col-lg-4 col-centered">
<div class="jumbotron">
<h3>Please login</h3>
<form action="Dashboard.jsp">
<div class="form-group">
<input type="email" class="form-control" placeholder="Enter Username">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Enter password">
</div>
<div class="custom-checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn-primary form-control">Login</button>
</form>
</div>
</div>
</div>
</body>
</html>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I used tables for my layout but I must use DIVs instead because I have forms in my tables. It was a mistake rendering the code with tables because it has forms and the form functionality is experiencing unwanted sideeffects from using tables so I must use DIVs instead for the layout. Can you help me how I achieve my layout with no tables?
Here's a fiddle with my code. The html is
<body>
<div id="wrapper">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- v2 -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:15px"
data-ad-client="ca-pub-7211665888260307"
data-ad-slot="9119838994"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<div id="border1"></div>
<div id="searchbox">
<form id="search_form" action="/account/do_login" method="post">
<div class="div-table">
<div class="div-table-row">
<div class="div-table-col">LOG IN</div>
<div class="div-table-col"><input name="email" size="35" title="email" type="text"
></div>
<div class="div-table-col"><input name="password" size="35" title="password" type="password"
></div>
<div class="div-table-col"> <input value="Login" type="submit"></div> <div class="div-table-col"> </div>
</div>
<div class="div-table-row">
<div class="div-table-col logintext">YOUR E-MAIL</div>
<div class="div-table-col logintext">PASSWORD</div>
</div>
</form>
<form autocomplete="off" id="create_user" action="/create/" method="post">
<div class="div-table">
<div class="div-table-row">
<div class="div-table-col">CREATE ACCOUNT</div>
<div class="div-table-col"><input name="email" size="35" title="email" type="text"
></div>
<div class="div-table-col"><input name="password" size="35" title="password" type="password"
></div>
<div class="div-table-col"> <input value="Create Account" type="submit"></div>
<div class="div-table-col"> </div>
</div>
<div class="div-table-row">
<div class="div-table-col logintext">YOUR E-MAIL</div>
<div class="div-table-col logintext">PASSWORD</div>
</div>
<div class="div-table-row">
<div class="div-table-col">OR LOG IN WITH</div>
<div class="div-table-col"><img id="googlelink" alt="Login with google" src="/_/img/transparent.gif"></div> <div class="div-table-col"> <img id="linkedinlink" alt="Login with linkedin" src="/_/img/transparent.gif"></div>
<div class="div-table-col"><img id="yahoolink" alt="Login with yahoo" src="/_/img/transparent.gif"> </div> <div class="div-table-col"> <img id="facebooklink" alt="Login with facebook" src="/_/img/transparent.gif"></div>
</div>
</div>
</form>
</div>
<div id="recover"><div class="reminderlink">CLICK HERE TO RECOVER YOUR ACCOUNT</div></div>
</div>
</body>
</html>
After a while I tried it with bootstrap which didn't work at all:
<!DOCTYPE html>
<html dir="ltr" lang="en-IN" class="js">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<meta name="description"
content="Find free ads about all different kind of items for sale in {% if regionname and regionname != 'None' %}{{regionname}}{% else %}{% if cityname and cityname != 'None' %}{{cityname}}{% else %}{% if country and country != 'None' %}{{country}}{% endif %}{% endif %}{% endif %}">
<meta name="googlebot" content="noarchive">
{% if cursor %}
<link rel="next" href="/delhi/?o=2">
{% endif %}
<link rel="canonical" href="/q">
<title>Login / Create</title>
<!-- CSS INCLUDES: -->
<link href="/static/css/koolindex_in.css?{{VERSION}}" rel="stylesheet" type="text/css">
<!-- Latest compiled and minified CSS -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<!-- HEADEXTRAS: -->
<link rel="icon" href="/img/favicon_in.ico?07217" type="image/x-icon">
<!--
<link rel="shortcut icon" href="/img/favicon_in.ico?07217" type="image/x-icon">
<link rel="shortcut icon" href="/img/favicon_in.png?07217" type="image/png">
<link rel="apple-touch-icon" href="/img/favicon_ios_in.png?07217" type="image/png">
<link rel="icon" href="/img/favicon_us.ico?51340" type="image/x-icon">
<link href="https://plus.google.com/123122342342345" rel="publisher">-->
<!-- JAVASCRIPTS: -->
<script type="text/javascript" src="/static/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/static/js/common.min.js"></script>
<script type="text/javascript" src="/static/js/arrays_v2.js"></script>
<script type="text/javascript" src="/static/js/searchbox.min.js"></script>
</head>
<body>
{% include "kooltopbar.html" %}
<div id="wrapper">
{% if request.host == "www.koolbusiness.com" %}
<a href="/">
<h1 id="logo" class="sprite_index_in_in_en_logo spritetext">koolbusiness.com - The right choice for buying &
selling in india</h1></a>
{% endif %}
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- v2 -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:15px"
data-ad-client="ca-pub-7211665888260307"
data-ad-slot="9119838994"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<div id="border1"></div>
<div id="searchbox">
<div class="container">
<form id="search_form" action="/account/do_login" method="post">
<div class="row">
<div class="col-md-1">LOG IN WITH</div>
<div class="col-md-1"><img id="googlelink" alt="Login with google" src="/_/img/transparent.gif"></div>
<div class="col-md-1"> <img id="linkedinlink" alt="Login with linkedin" src="/_/img/transparent.gif"></div>
<div class="col-md-1"><img id="yahoolink" alt="Login with yahoo" src="/_/img/transparent.gif"> </div>
<div class="col-md-1"> <img id="facebooklink" alt="Login with facebook" src="/_/img/transparent.gif"></div>
</div>
<div class="row">
<div class="col-md-1">LOG IN</div>
<div class="col-md-1"><input name="email" size="35" title="email" type="text">
</div>
<div class="col-md-1"><input name="password" size="35" title="password" type="password"></div>
<div class="col-md-2"><input value="Login" type="submit"></div>
</div>
<div class="row">
<div class="col-md-1">.col-md-4</div>
<div class="col-md-2 logintext">YOUR E-MAIL</div>
<div class="col-md-2 logintext">PASSWORD</div>
</div>
</form>
<form autocomplete="off" id="create_user" action="/create/" method="post">
<div class="row">
<div class="col-md-1">CREATE ACCOUNT</div>
<div class="col-md-1"><input name="email" size="35" title="email" type="text">
</div>
<div class="col-md-1"><input name="password" size="35" title="password" type="password"></div>
<div class="col-md-2"><input value="Create Account" type="submit"></div>
</div>
</form>
</div>
</div>
<div id="recover"><div class="reminderlink">CLICK HERE TO RECOVER YOUR ACCOUNT</div></div>
</div>
</body>
</html>
Edit
The way I finally did it was with twitter bootstrap and I'm happy with it. But rearranging everything into DIVs didn't solve the problem of autocomplete with the form so I had to resort to a dirty trick to clear the form for the create field. Strange thing was that I had to restart everything to make twitter bootstrap work.
<div id="mybox">
<div class="container">
<form id="search_form" action="/account/do_login" method="post">
<div class="row">
<div class="col-md-1">LOG IN WITH</div>
<div class="col-md-2"><img id="googlelink" alt="Login with google" src="/_/img/transparent.gif"></div>
<div class="col-md-2"> <img id="linkedinlink" alt="Login with linkedin" src="/_/img/transparent.gif"></div>
<div class="col-md-2"><img id="yahoolink" alt="Login with yahoo" src="/_/img/transparent.gif"> </div>
<div class="col-md-2"> <img id="facebooklink" alt="Login with facebook" src="/_/img/transparent.gif"></div>
</div>
<div class="row">
<div class="col-md-1">LOG IN</div>
<div class="col-md-3">
<input name="email" size="35" title="email" type="text">
</div>
<div class="col-md-3">
<input name="password" size="35" title="password" type="password">
</div>
<div class="col-md-2">
<input value="Login" type="submit">
</div>
</div>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-3 logintext">YOUR E-MAIL</div>
<div class="col-md-3 logintext">PASSWORD</div>
</div>
</form>
<form autocomplete="off" id="create_user" action="/create/" method="post">
<input style="display:none">
<input type="password" style="display:none">
<div class="row">
<div class="col-md-1">CREATE ACCOUNT</div>
<div class="col-md-3">
<input name="email" id="email" size="35" autocomplete="off" title="email" type="text" value="">
</div>
<div class="col-md-3">
<input name="password" id="password" size="35" autocomplete="off" title="password" type="password" value="">
</div>
<div class="col-md-2">
<input value="Create Account" type="submit">
</div>
</div>
</form>
</table>
</div>
</div>
<div id="recover"><div class="reminderlink">CLICK HERE TO RECOVER YOUR ACCOUNT</div></div>
As you may be discovering, tables should not be used for layout. As a matter of fact, they should only be used for displaying data.
As far as building a layout with divs, here's what you need to know to get started.
Use width, max-width, and min-width to your advantage to create intuitive and responsive layouts.
Use percent, em, and vh in place of pixels where you can.
Consider learning and using floats, and clear: both to help with responsive layout.
Also, consider using the twitter bootstrap CSS framework. Specifically the grid functionality. You can learn it and use it in minutes.
I hope this helps.
This layout is ridiculously simple, and you're making it far more complex than it needs to be. I stripped out all the google ad stuff, which you can add back, but there is way more markup here than you need and way more junk.
Here's a quick fiddle I threw together in about 10 minutes that gives you the basic layout. I'm sure you can tweak it to the exact dimensions you need.
http://jsfiddle.net/fop9vLjh/1/
<style type="text/css">
body { font-family: sans-serif; }
#wrapper { width: 900px; margin: 0 auto; }
div { margin-top: 15px; }
#login-box { background-color: #ffc801; padding: 10px; }
span { float: left; width: 10em; }
#recover { float: right; }
a { text-decoration: none; }
input[type='text'],input[type='password'] { width: 18em; }
.form-field { width: 15em; display: inline-block; vertical-align: top; margin-top: 0; }
label { display: block; font-size: small; }
</style>
<div id="wrapper">
<div id="login-box">
<div id="login">
<span>LOGIN</span>
<form action="/account/do_login" method="post">
<div class="form-field">
<input name="email" type="text"/>
<label for="email">YOUR EMAIL</label>
</div>
<div class="form-field">
<input name="password" type="password"/>
<label for="password">PASSWORD</label>
</div>
<button type="submit" value="Login">Login</button>
</form>
</div>
<div id="create">
<span>CREATE ACCOUNT</span>
<form autocomplete="off" id="create_user" action="/create/" method="post">
<div class="form-field">
<input name="email" type="text"/>
<label for="email">YOUR EMAIL</label>
</div>
<div class="form-field">
<input name="password" type="password"/>
<label for="password">DESIRED PASSWORD</label>
</div>
<button type="submit" value="Create">Create Account</button>
</form>
</div>
<div id="alt-login">
<span>OR LOG IN WITH</span>
<input name="google" type="image" src="#"/>
<input name="linkedin" type="image" src="#"/>
<input name="yahoo" type="image" src="#"/>
<input name="facebook" type="image" src="#"/>
</div>
</div>
<div id="recover">
CLICK HERE TO RECOVER YOUR ACCOUNT
</div>
</div>
Excuse me but its html\css basics. Where exactly your problem is? I only see the problem with top yellow bar which can be fixed by something like this:
html {
position:absolute;
min-width:100%;
}
But still it looks ugly enough (:
I have a page here to illustrate my question.
http://www.ttmt.org.uk/bootstrap-form/
It's a simple 2 column layout with a form in the right column
The form is in 2 columns also.
I would like the form columns to be half the with of the column it's in.
So the name input would be half the with of the right column and email input would be the remaining half.
How do I code this using bootstrap.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="robots" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<!--jQuery-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<!--css-->
<link rel="stylesheet" href="css/bootstrap.css">
<style>
.box{
height: 500px;
}
.left{
background: #aaa;
}
.right{
background: #ccc;
padding: 50px 0 0 0;
}
</style>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<title>Title of the document</title>
</head>
<body>
<div class="wrap">
<div class="container">
<div class="row">
<div class="col-sm-6 left box">
</div>
<div class="col-sm-6 right box">
<form class="form-inline" role="form">
<div class="form-group">
<input type="text" placeholder="name" class="form-control">
<input type="text" placeholder="email" class="form-control">
</div>
<div class="form-group">
<input type="text" placeholder="phone number" class="form-control">
<input type="text" placeholder="company" class="form-control">
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
Add this CSS
<style type="text/css">
.form-inline .form-control
{
width: 100%;
}
</style>
and change some classes
<div class="row col-sm-12">
<div class="col-sm-6 left box"></div>
<div class="col-sm-6 right box">
<form class="form-inline col-sm-12">
<div class="form-group col-sm-6">
<input class="form-control col-sm-6" placeholder="name"
type="text">
</div>
<div class="form-group col-sm-6">
<input class="form-control col-sm-6" placeholder="email"
type="text">
</div>
<div class="form-group col-sm-6">
<input class="form-control col-sm-6" placeholder=
"phone number" type="text">
</div>
<div class="form-group col-sm-6">
<input class="form-control col-sm-6" placeholder="company"
type="text">
</div>
</form>
</div>
</div>
Let me know if it works
Happy Coding !!!