Filling space between floating elements - html

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}

Related

Center A form HTML CSS

Hello I am having issues centering a form for a login page. I am not to good with CSS and it has been a while since I have played with HTML. What I want to do is, center the input boxes and align the text left on top of the input fields, as well as have an image centered as well, like in the picture. I have tried adding different div id and tags to the form but I can not seem to figure out the css part. I appreciate any help and sorry if the CSS is sloppy.
body {
background-color:lightgray;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
h1 {
color: black;
}
p {
color: black;
}
html {
text-alight: center;
}
#login {
text-align:center;
}
input[type=text], input[type=date], input[type=password] {
width: 30%;
height: 50px;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
input[type=submit] {
width: 30%;
height: 50px;
background-color: #4CAF50;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
#service_type, #series, #speaker, #users {
width: 30%;
height: 50px;
}
#media only screen and (max-device-width: 1024px){
input[type=text], input[type=date], input[type=password] {
width: 100%;
height: 50px;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
input[type=submit] {
width: 100%;
height: 50px;
background-color: #4CAF50;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
#service_type, #series, #speaker, #users{
width: 100%;
height: 50px;
}
#keypad_users{
width: 345px;
height: 50px;
vertical-align:middle;
text-align:center;
border:1px solid #000000;
font-size:30px;
font-weight:bold;
}
#keypad {margin:auto; margin-top:10px;}
#keypad tr td {
vertical-align:middle;
text-align:center;
border:1px solid #000000;
font-size:18px;
font-weight:bold;
width:100px;
height:80px;
cursor:pointer;
background-color:#666666;
color:#CCCCCC;
}
#keypad tr td:hover {
background-color:#999999;
color:#FFFF00;
}
#display {
text-align:center;
width:345px;
margin:10px auto auto auto;
background-color:#000000;
color:#00FF00;
font-size:48px;
border:1px solid #999999;
}
#message {
text-align:center;
color:#009900;
font-size:18px;
font-weight:bold;
display:none;
}
}
<div id="login">
<form action = "login.php" id="login" method ="POST">
Username <br />
<input type="text" name="username" id="username" required /><br /><br />
Password <br />
<input type ="password" name="password" id="password" required /><br /><br />
<input type="submit" name="submit" value="Log in">
</form>
</div>
I've made a JSfiddle for you here (click me please) that resembles the picture you've added.
As requested to not use a third party like I've added the code here:
HTML
<div id="login">
<form action = "login.php" id="login" method ="POST">
<div class="picture">
</div>
<p>Username</p>
<input type="text" name="username" id="username" required /><br /><br />
<p>Password</p>
<input type ="password" name="password" id="password" required /><br /><br />
<input type="submit" name="submit" value="Log in">
</form>
</div>
CSS
body
{
background-color:lightgray;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
#login
{
text-align:center;
width: 50%;
margin: 0 auto;
}
.picture
{
width:100px;
height: 100px;
border-radius: 100px;
background-color:red;
margin: 0 auto;
}
#login p
{
float: left;
}
input[type=text], input[type=date], input[type=password] {
width: 100%;
height: 50px;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
input[type=submit] {
width: 100%;
height: 50px;
background-color: #4CAF50;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
EDIT:
New fiddle here: https://jsfiddle.net/gay1ufa1/2/
I've improved your HTML. All form inputs should have an associated label element. Also don't use br for spacing use padding/margin instead.
Further more use have a duplicated id, id's must be unique to the page.
#login_container /*This is Our base container for the login "control" */
{
width:30%; /*Define the width of the control*/
margin:auto; /*This Provide the horizontal centering of the control*/
padding:120px 10px 10px 10px; /*Add some padding, the first number is the top and provides room for the image*/
background-image:url(" http://fillmurray.com/100/100"); /*Add our background image, thanks Bill Murray*/
background-position:center 10px; /*Position our image, first is Horizontal alignment, second is top*/
background-repeat:no-repeat; /*One Bil Murray is more than enough*/
background-color: #F0F0F0; /*Base Background image*/
}
#login_container label
{
display:block; /*Label will now take up a whole line*/
margin-bottom:.25em; /*Give it some room underneath*/
}
#login_container input[type="text"], #login_container input[type="password"], #login_container input[type="submit"]
{
width:100%; /*Form controls now take 100% width of the container*/
margin-bottom:0.5em;
}
<div id="login_container"> <!-- Can't have duplicate ID's -->
<form action = "login.php" id="login" method ="POST">
<label for="username">Username </label>
<input type="text" name="username" id="username" required />
<label for="password">Password</label>
<input type ="password" name="password" id="password" required />
<input type="submit" name="submit" value="Log in">
</form>
</div>
One problem in your code is that you use the ID "login " twice, which must not be done. I put together a codepen, which you can find here:
http://codepen.io/anon/pen/dNWQgp
What I basically did (except adding a div representing the image in your picture): I assigned the following CSS to a wrapper DIV around the whole form and image. It uses flexbox to center the contents. Plus I assigned a width setting (40%) to the form element.
.wrapper {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
To center a div set margin-left and margin-right to auto and assign a fixed width to it. In your case, this would be for #login.

Display inline or float without breaking - without using media queries

When I try to add float left or display inline, things break. Currently, I have a max-width of 1000px for the form. What I was hoping is somehow, the first, and last name will automatically float side by side if it is wide enough. So perhaps a min-width for inputs First and Last name?
Important note: I wrote this to test out writing CSS DRY code. You notice if you change the font size, the whole project changes size, So this is important to me. Also, I do not want to use media queries.
I am aware that I may need to change my approach, and I am open to that as well. Not so much looking for an exact code answer.
form {
text-align: center;
}
form ul, form li, form input, form label {
box-sizing: border-box;
margin: 0; padding: 0;
}
form ul {
font-size: 100%;
border: 3px solid #000;
border-radius: .3em;
max-width: 1000px;
margin: 50px auto;
list-style: none;
overflow: hidden;
}
form li {
position: relative;
border-bottom: inherit;
border-bottom: 3px solid;
}
form label {
position: absolute;
border-bottom: 1px dotted;
border-bottom-color: inherit;
width: 100%;
padding: .3em .3em;
padding-bottom: .1em;;
top: 0; left: 0;
font-size: .6em;
text-transform: uppercase;
}
form input, form input:focus {
text-transform: capitalize;
text-align: inherit;
background: transparent;
border: none;
width: 100%;
font-size: 2em;
padding: .7em .1em;
padding-bottom: .2em;;
}
form input:focus {
background-color: rgba(255, 255, 0, .2);
}
form input[type="submit"] {
text-transform: uppercase;
padding-bottom: 1.8em;
font-size: .6em;
height: 1.5em;
background-color: #ddd;
}
<form action="">
<ul>
<li>
<input id="first-name" type="text" autofocus>
<label for="first-name">First Name</label>
</li>
<li>
<input id="last-name" type="text">
<label for="last-name">Last Name</label>
</li>
<li>
<input id="username" type="text">
<label for="username">Username</label>
</li>
<li>
<input type="submit" name="submit">
</li>
</ul>
</form>
Flexbox is the most modern solution to this problem. However, remember to add the necessary prefixes for some browsers. If IE9 support is necessary, see the float solution below:
HTML
<form action="">
<ul>
<li class="split">
<input id="first-name" type="text" autofocus>
<label for="first-name">First Name</label>
</li>
<li class="split">
<input id="last-name" type="text">
<label for="last-name">Last Name</label>
</li>
<li class="fill">
<input id="username" type="text">
<label for="username">Username</label>
</li>
<input type="submit" name="submit">
</ul>
</form>
CSS
form {
text-align: center;
}
form ul, form li, form input, form label {
box-sizing: border-box;
margin: 0; padding: 0;
}
form ul {
font-size: 100%;
border: 3px solid #000;
border-radius: .3em;
max-width: 1000px;
margin: 50px auto;
list-style: none;
overflow: hidden;
}
form li {
position: relative;
border-bottom: inherit;
border-bottom: 3px solid;
}
form label {
position: absolute;
border-bottom: 1px dotted;
border-bottom-color: inherit;
width: 100%;
padding: .3em .3em;
padding-bottom: .1em;;
top: 0; left: 0;
font-size: .6em;
text-transform: uppercase;
}
form input, form input:focus {
text-transform: capitalize;
text-align: inherit;
background: transparent;
border: none;
width: 100%;
font-size: 2em;
padding: .7em .1em;
padding-bottom: .2em;;
}
form input:focus {
background-color: rgba(255, 255, 0, .2);
}
form input[type="submit"] {
text-transform: uppercase;
padding-bottom: 1.8em;
font-size: .6em;
height: 1.5em;
background-color: #ddd;
}
#media only screen and (min-width: 768px) {
li {
clear: both;
}
li.split {
width: 50%;
float: left;
clear: none;
}
}
https://jsfiddle.net/qefo9eLr/
.fl-name {
display: flex;
flex-direction: row;
}
you can try to use bootstrap grid system
this way u can have the inputs into columns
bootstrap grid system
look at this fiddle:
gri system sample
<div class='row'>
<div class="col-xs-2">Hi</div>
<div class="col-xs-2">Hi</div>
in your case col-xs-6 will give you 2 columns fullwidth
Not exactly sure if this is what you're going for, but it seems to fit your criteria.
form {
text-align: center;
}
form ul,
form li,
form input,
form label {
box-sizing: border-box;
margin: 0;
padding: 0;
}
form ul {
font-size: 100%;
border: 3px solid #000;
border-radius: .3em;
max-width: 1000px;
margin: 50px auto;
list-style: none;
overflow: hidden;
}
form li {
position: relative;
border-bottom: inherit;
border-bottom: 3px solid;
}
form label {
position: absolute;
border-bottom: 1px dotted;
border-bottom-color: inherit;
width: 100%;
padding: .3em .3em;
padding-bottom: .1em;
;
top: 0;
left: 0;
font-size: .6em;
text-transform: uppercase;
}
form input,
form input:focus {
text-transform: capitalize;
}
form #fl-name {
display: inline-block;
}
form .floatMe {
float: left;
}
form .clearMe {
clear: right;
}
<form action="">
<ul>
<div class="fl-name">
<li class="floatMe">
<input id="first-name" type="text" autofocus>
<label for="first-name">First Name</label>
</li>
<li class="floatMe clearMe">
<input id="last-name" type="text">
<label for="last-name">Last Name</label>
</li>
</div>
<li>
<input id="username" type="text">
<label for="username">Username</label>
</li>
<input type="submit" name="submit">
</ul>
</form>
Here is another alternative using our old faithful floats: https://jsfiddle.net/mvpu6s5o/3/
The main difference is basically here:
form li {
width: 33.33%;
float: left;
}
form li:nth-child(3) {
float: right;
}
form li:last-child {
width: 100%;
clear: both;
}
I used a width with percentage to keep it fluid, so it'll adjust to different screen sizes. The li:nth-child(3) float the last input to the right, so we can get rid of a small gap at the end due to the 33.33% width. form li:last-child is used to clear both floats to the last input (since this too is an li).
I just change the semantic and apply flexbox. This is the result:
*, *:before, *:after {
box-sizing: inherit;
margin: 0;
padding: 0;
}
body {
align-items: center;
/background-color: #EB6361;
display: flex;
height: 100vh;
justify-content: center;
}
form {
box-shadow: 0 0 0 8px rgba(204,204,204,.85);
border-radius: 5px;
width: 500px;
}
form header {
background-color: #1ABC9C;
}
form header p {
color: #FFF;
font-family: 'ubuntu';
font-size: 15px;
padding: 15px 10px;
text-align: center;
}
form .body {
background-color: #EEE;
padding: 15px 20px;
}
form .body .block {
border: 2px solid #333;
border-radius: 4px;
overflow: hidden;
}
form .body .block:not(first-of-type) {
margin-top: 10px;
}
form .body .block:first-of-type > .group {
width: 98%;
}
form .body .block:first-of-type {
display: flex;
}
form .body .block .group {
display: flex;
flex-flow: column-reverse nowrap;
overflow: hidden;
}
form .body .block:first-of-type .group:first-of-type {
border-right: 2px solid #333;
}
form input {
background-color: transparent;
border: none;
color: #555;
font-size: 22pt;
padding: 6px 10px;
text-align: center;
}
form input:focus, form input:focus + label {
background-color: #F7F8E0;
}
form label {
border-bottom: 1px dotted #bbb;
color: #555;
font-family: 'ubuntu';
font-size: 11px;
padding: 2px;
text-align: center;
text-transform: uppercase;
}
form footer {
overflow: hidden;
}
form footer button {
background-color: #F39C12;
color: #FFF;
cursor: pointer;
width: 100%;
border: none;
padding: 4px;
}
<form action="">
<header>
<p>Submit Query Form</p>
</header>
<section class="body">
<div class="block">
<div class="group">
<input type="text" />
<label for="">First Name</label>
</div>
<div class="group">
<input type="text" />
<label for="">Last Name</label>
</div>
</div>
<div class="block">
<div class="group">
<input type="text" />
<label for="">Username</label>
</div>
</div>
</section>
<footer>
<button>Submit query</button>
</footer>
</form>
A very simple solution is with Flexbox.
Set the parent element to display type 'flex'.
Also set up flex wrap: wrap // This way the children will wrap if needed.
The children become flex objects. Since I want them to be even, I set them both to flex grow: 1
Set the children to flex-basis as 300px. // This is almost like a minimum width. This triggers the wrap.
body {
padding: 50px;
}
.main {
background-color: #e9e9e9;
display: flex;
flex-wrap: wrap;
}
.main input {
background-color: #e9e9e9;
}
.one {
flex-grow: 1;
flex-basis: 300px
}
.two {
flex-grow: 1;
flex-basis: 300px;
}
<head>
<link rel="stylesheet" href="inline.css">
</head>
<body>
<form class="main">
<input type="text" class="one">
<input type="text" class="two">
</form>
</body>

How do I separate my text box from the label?

What I would like is to have a column of labels, and to the right a column of text boxes approximately a few tabs apart and all aligned on (their respective) margins.
So far I have this. However when I resize the screen my text boxes move. How can I make them fixed?
This is the CSS:
#layout {
background-color: #f5fffa;
width: 600px;
padding: 20px;
border: 5px solid black;
margin: 0 auto;
color: black;
font-family: arial;
font-size: 15px;
font-weight: bold;
}
#zero {
text-align: center;
}
#one {
-moz-border-radius:7px;
-webkit-border-radius:7px;
border-radius:7px;
border:4px solid #18ab29;
border-width: 4px;
background-color: #44c767;
color:#ffffff;
padding-left: 9em;
padding-right: 9em;
}
.myform {
width:40px;
text-align: left;
position: absolute;
right: 800px;
height: 1.5em;
}
This is the HTML:
<div id="layout">
<h1 id="zero">Title</h1>
<form id="one">
<br>
<label>input one:</label>
<input type="text" class="myform" value="0" /><br><br>
<label>input two:</label>
<input type="text" class="myform" value="0" /></br>
</br>
</form>
</div>
EDIT:
I've figured it out:
Add this:
#one label {
display: inline-block;
width: 270px;
}
And take away:
position: absolute;
right: 800px;
from
.myform {
width:40px;
text-align: left;
position: absolute;
right: 800px;
height: 1.5em;
}
try to give the label a width:
label {
width: 100px;
}
#layout {
background-color: #f5fffa;
width: 600px;
padding: 20px;
border: 5px solid black;
margin: 0 auto;
color: black;
font-family: arial;
font-size: 15px;
font-weight: bold;
}
#zero {
text-align: center;
}
#one {
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
border: 4px solid #18ab29;
border-width: 4px;
background-color: #44c767;
color: #ffffff;
height: 1.5em;
}
.myform {
text-align: left;
position: absolute;
right: 800px;
}
.leftCol {
float: left;
width: 50%
}
.rightCol {
float: right;
width: 50%
}
<div id="layout">
<h1 id="zero">Title</h1>
<form id="one">
<div class="leftCol">
<label>input one:</label>
<input type="text" value="0" />
</div>
<div class="rightCol">
<label>input two:</label>
<input type="text" value="0" />
</div>
</form>
</div>
I removed the position:absolute from the inputs (because in my screen they where way of, that's why you should use it if nothing else works) and then added a margin-right on the form labels. demo;
Relevant CSS
#one label{
margin-right:10px;
}
Update
I've added a fixed width to ammend for the possibility of labels with differente text lengths, here it is:
#one label{
display:inline-block;
margin-right:10px;
width:150px;
}
You should change width:150px to whatever you want it to be :)
Hope it helps!

How to style the DIV to display html controls

I have the following HTML:
<div class="dispLoginSearch" style="text-align: left; overflow: hidden;"> <!-- LOGIN AND SEARCH -->
<div class="theLoginBox" style="clear: both;">
<div class="loginTitle">
Log in to <span style="font-family: 'blackjarregular'; font-size: 14pt; color: #FE7816;">My</span> <span style="font-family: 'trajanpro'; font-size: 12pt; color: #00529B;">WD</span> | Sign Up
<br />
<input type="text" value="Username" /> <input type="password" value="Password" /> <input type="button" value="Go" />
<br />
<span style="float: right;">Forgot login/password</span>
</div>
</div>
<div style="z-index: 99999999999;">
<input type="text" value="Search WD" />
</div>
</div> <!-- LOGIN AND SEARCH -->
CSS:
.dispLoginSearch
{
width: 47%;
height: 150px;
line-height: 150px;
vertical-align: middle;
float: right;
padding-right: 2%;
background: #FFFFFF;
border: 1px solid #0026ff;
}
.theLoginBox
{
border: 2px solid #D5D5D5;
border-radius: 4px;
width: 97%;
height: 90px;
padding: 10px;
white-space: nowrap;
background: #ff6a00;
}
.loginTitle
{
height: 88px;
display: block;
vertical-align: top;
white-space: nowrap;
font-weight: bold;
text-align: left;
background: #b6ff00;
}
When I view the website, I see the following:
What I would like it be shown:
How do I fix the issue? It is happening in both IE and other browsers.
UPDATE:
I added overflow: auto in the loginTitle class and this is what is shown:
Each section is taking up a lot of space and showing the scrollbar :/
This is because of line 5 of your CSS : line-height: 150px;.
Just remove it and you should be fine.
If you want it to look like image you attached, see here: http://codepen.io/anon/pen/FothH
html:
<form action="#">
<p>Log in to ###### | Sign up</p>
<input type="text" placeholder="Username"/>
<input type="password" placeholder="Password"/>
<input type="submit" value="Go"/>
Forgot login/password
</form>
css:
form {
border: 1px solid #d4d4d4;
display: block;
width: 375px;
font: 16px sans-serif;
padding: 0 0 0 15px;
border-radius: 5px;
-webkit-font-smoothing: antialiased;
}
form p {
margin: 5px 0 0;
font-size: 20px;
line-height: 35px;
}
input {
display: inline-block;
border-radius: 7px;
}
input[type=text], input[type=password] {
border: none;
background: #ebebeb;
font-size: 16px;
padding: 6px 10px;
width: 180px;
}
input[type=password] {
width: 120px;
}
input[type=submit] {
font-size: 16px;
width: 25px;
padding: 5px 0px;
background: none;
color: red;
border: none;
}
form a {
display: block;
line-height: 25px;
text-align: right;
margin-right: 30px;
color: #d4d4d4;
text-decoration: none;
margin-bottom: 5px;
}

Can't identify what is causing extra space in a form field

As you can see on the picture below and on JSFiddle http://jsfiddle.net/GRFX4/ I have some extra space in my text field of my form. It looks like for some reason it goes beyond the margin of the container. Any idea what the issue is?
Many thanks
HTML:
<div id="contactwrapper">
<div class="block clear">
<div class="block-left">
<h1>Nous contacter</h1>
<div id="addressbox">
<h3>Centre de msd</h3>
<p> 546, avenue ffds dfdsfd</p>
<p> A-1234 fdfdfsf (Austria)</p>
<ul id="contact">
<li><i class="icon-phone-sign"></i> +352 691 123.456</li>
<li><i class="icon-envelope"></i> geyi#iyiyiy.com</li>
<li><i class="icon-map-marker"></i> itinéraire</li>
</ul>
</div> <!-- End DIV addressbox -->
</div> <!-- End DIV block-left -->
<div class="block-right"> <h1>Formulaire de contact</h1>
<!-- CONTACT FORM-->
<div class="contact-form">
<form id="contactfrm" method="post" class="clearfix">
<div class="clearfix">
<input id="name" name="name" placeholder="Nom" type="text" value="">
<input id="email" name="email" placeholder="Email" type="email" value="">
</div>
<textarea id="message" name="message" placeholder="Message et coordonnées"></textarea>
<input type="submit" value="Envoyer" name="submit">
<p class="success" style="display:none">Merci pour votre message!<br> Nous vous répondrons très rapidement.</p>
<p class="error" style="clear:both;display:none;color:red; text-align:center">Erreur: E-mail non valide et/ou message vide.</p>
</form>
</div><!-- /.contact-form -->
</div> <!-- End DIV block-right -->
</div> <!-- End DIV Block -->
</div> <!-- End DIV Contactwrapper -->
CSS:
#contactwrapper {
margin-top: 30px;
padding-bottom: 30px;
position: relative;
display: block;
margin-right: auto;
margin-left: auto;
width: 980px;
background: #fff;
-webkit-box-shadow: 0px 0px 10px 2px #e0e0e0;
-moz-box-shadow: 0px 0px 10px 2px #e0e0e0;
box-shadow: 0px 0px 10px 2px #e0e0e0;
}
.block-left {
float: left;
box-sizing: border-box;
width: 50%;
padding-right: 20px;
}
.block-right {
float: right;
box-sizing: border-box;
width: 50%;
}
.clear:after { clear: both }
.clear { clear: both }
#addressbox p {
color: #333;
font-weight: 400;
font-size: 13px;
line-height: 12px;
}
#contact li {
display: inline;
padding-right: 5px;
color: #333;
list-style: none;
font-weight: 500;
font-size: 13px;
}
#contact li a {
border-bottom: none;
color: #333;
text-decoration: none;
font-weight: 500;
font-size: 13px;
}
.coach1 li {
margin: 0px;
margin-bottom: 3px;
margin-left: 10px;
padding: 0px;
color: #667878;
list-style-type: none;
font-weight: 300;
font-size: 14px;
}
.contact-form input[type=text] {
float: left;
width: 200px;
}
.contact-form input[type=email] {
float: right;
width: 200px;
}
.contact-form input[type=submit] {
float: right;
}
.contact-form textarea {
float: left;
height: 70px;
margin-bottom: 10px;
margin-top: 20px;
width: 100%;
}
/*************************************************************
/*************************************************************
* FORMS
*************************************************************/
form label { cursor: pointer }
form textarea,
form input[type=text],
form input[type=password],
form input[type=email] {
background: #d5d5d5 url('../images/form-bg.png') left top repeat-x;
border-top: 1px solid transparent;
border-right: 1px solid #d2d2d2;
border-bottom: 1px solid transparent;
border-left: 1px solid #d2d2d2;
color: #7c7c7c;
font-family: 'Arial', sans-serif;
padding: 6px 8px;
resize: none;
}
form input:focus,
form textarea:focus {
background: #d5d5d5 none;
border: 1px solid red;
outline: none;
}
form input[type=submit] {
background: #0064C4 url('../images/form-caret.png') right center no-repeat;
border: 0;
color: #fff;
cursor: pointer;
font-family: 'Arial', sans-serif;
font-size: 14px;
font-weight: normal;
padding: 8px 50px;
text-transform: uppercase;
}
You declared block-right div width as 50%. But textarea width is overflowing parent one. Try:
.block-right {
float: right;
box-sizing: border-box;
width: 50%;
overflow:hidden;
}
DEMO FIDDLE
With Firefox, you can investigate such issues with the DOM inspector. Other Browsers have similar tools.
In the rules, you will see
.contact-form textarea {
float: left;
...
width: 100%;
}
and
form textarea {
...
padding: 6px 8px;
}
The containing block (form) has a width of 50% of 980px, which is 490px. The content width of the textarea is also 490px (100%) wide. But additionally, the textarea has a padding of 8px to the left and the right side, which is causing the overflow.
So, you must either reduce the content width to 490px - padding
.contact-form textarea {
float: left;
...
width: 474px;
}
http://jsfiddle.net/GRFX4/3/
or remove the padding
.contact-form textarea {
float: left;
...
width: 100%;
padding-left: 0;
padding-right: 0;
}
http://jsfiddle.net/GRFX4/4/