Width 80% - Width 20%.... Elements Still Wrapping!

HTML & CSS
1

Hi guys,

Wondering if you can help - I’ve got the following HTML (thanks Paul!), and what I’m effectively wanting to do is have the Text Input width to be 80%, and the Submit Button width to be 20%…

However when I put those into my CSS, the elements wrap. If I put the Submit Button width to be 19% it looks ok (but obviously there is going to be 1% gap).

See: http://jsfiddle.net/M6RZ8/

Anything stand out? Forgive the top part, it’s just the Eric Meyer reset! I’ve spaced out the parts we’re interested in…! Cheers for any help!


<!DOCTYPE html>
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
img, object, embed {
	max-width: 100%;
}
.clear {
	clear:both;
}








#form1 label, #form1 input {
    float: left;
    padding: 0;
}
#search {
    -moz-border-bottom-colors: none;
    -moz-border-image: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: none repeat scroll 0 0 #FFFFFF;
    border-color: #c9c9c9 -moz-use-text-color #c9c9c9 #c9c9c9;
    border-style: solid none solid solid;
    border-width: 1px medium 1px 1px;
    height: 35px;
    line-height: 35px;
    margin: 0;
	width: 80%;
	color: #BFBFBF;
	font-size: 14px;
}
#go {
	background: #e5f1f6; /* Old browsers */
	background: -moz-linear-gradient(top, #e5f1f6 0%, #d0e6ef 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e5f1f6), color-stop(100%, #d0e6ef)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #e5f1f6 0%, #d0e6ef 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #e5f1f6 0%, #d0e6ef 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #e5f1f6 0%, #d0e6ef 100%); /* IE10+ */
	background: linear-gradient(top, #e5f1f6 0%, #d0e6ef 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5f1f6', endColorstr='#d0e6ef', GradientType=0 ); /* IE6-9 */
	border-color: #AFC6CD #AFC6CD #9CBAC5 #DADAD9;
	border: 1px solid #9dbbc5;
    height: 37px;
    line-height: 27px;
    margin: 0;
    text-align: center;
    text-transform: uppercase;
    width: 20%;
	font-weight: bold;
	font-size: 12px;
	color: #6B97A8;
}

</style>
</head>
<body>
<form name="form1" id="form1">
    <fieldset>
    <input type="email" name="email" placeholder="EMAIL ADDRESS..." id="search" required />
    <input type="submit" value="SUBMIT" id="go" name="Go">
    </fieldset>
</form>
<div class="clear"></div>
</body>
</html>
2

You forgot that PADDING and BORDER add to the calculated width of an element :). Try this correction: #search { margin: 0 -1px 0 0;}

3

Fantastic! That works a treat. One other thing though…

I’m wanting to apply some padding to the Text Input, now normally I’d just apply it directly to the #search ID, but applying any sort of padding again forces the submit button onto the next line.

I’m presuming putting something like…

padding: 15px

…means that there has to be an opposite reaction to the #go ID?

Is that right?

4

Think I might have got it right… Well it looks ok in Firefox, Chrome and IE9

The problem I seemed to be having was what box sizing model was being used… I’ve amended my code to now include:


 -moz-box-sizing:border-box;
 -webkit-box-sizing:border-box;
box-sizing:border-box;

…can’t help but feel that this isn’t the best way though, especially for those older browsers which may not support the box-sizing property. Anyone know a better way?

5

box-sizing: changes the way padding abd border are calculated. Which DOES fix the problem… as long as your browser supports CSS3 and you got ALL the vendor prefixes covered.

…means that there has to be an opposite reaction to the #go ID?

For broader support… remove the box-sizing declaration and correct :#search { margin: 0 -31px 0 0;} ( or -16px if you only added the padding to either the left or the right}