SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Apr 2005
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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!

    HTML Code:
    <!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. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,813
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    You forgot that PADDING and BORDER add to the calculated width of an element . Try this correction: #search { margin: 0 -1px 0 0;}

  3. #3
    SitePoint Zealot
    Join Date
    Apr 2005
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    You forgot that PADDING and BORDER add to the calculated width of an element . Try this correction: #search { margin: 0 -1px 0 0;}
    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. #4
    SitePoint Zealot
    Join Date
    Apr 2005
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Think I might have got it right... Well it looks ok in Firefox, Chrome and IE9

    http://jsfiddle.net/sgNxR/

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

    Code:
     -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. #5
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,813
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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}


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •