CODEWITHSUNDEEP
css
MEM
MEM

Reputation: 31387

How to properly wrap input text and button elements side by side?

I'm trying to create a search input text with a side by side button.

Here are the requirements:

  1. Those elements should be absolute centered. Both vertical and horizontal.
  2. The solution should work on IE8+ and good browsers.
  3. In the browser default font-size is bigger, no text or graphic element should be hidden or misplaced on the user browser.

I believe I have no issues with vertical align part. Using pseudo-element height: 100%; with display: inline-block; technique.

I do have issues however, on placing the button element, side by side with the input text field, without any white gaps around.

Here's the HTML:

<div id="main-wrapper">
  <div id="search-wrapper">
    <h3>Hello there</h3>
    <form action="" class="search-form">
      <input type="text" name="lorem" />
      <button type="submit">
        <span>Search</span> 
        <!-- should be a place to background image or icon font symbol.  -->       
      </button>    
    </form>
  </div>
</div>

Here's the CSS:

/* START - Absolute Centering */
#main-wrapper {
    text-align:center;
    background: yellow;
    height: 300px;
}

#main-wrapper:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

#search-wrapper {
    display: inline-block;
    vertical-align: middle;
    background-color: green;
    padding: 20px 20%;
}
/* END - Absolute Centering */

/* START - Input and Button Search - Side by Side */
.search-form {
    display: inline-block;
    border: 5px solid red;
    background: #fff;
}

.search-form input {
   font-size: 1.3em;
    height: 50px;
    border: none;
}

.search-form button {
    border: none;
    background-color: red;
    height: 50px;
    vertical-align: top; /* no dice */
    cursor: pointer;
}

Here's the fiddle: http://jsfiddle.net/uQh8D/

And here's a screenshot of ugly white parts that we wish to get rid of, as we see them on Chrome and on Firefox:

Chrome 34:

chrome white space around button issues

Firefox 28 (almost ok):

firefox button bottom white space issues

Any help would be greatly appreciated.

Upvotes: 0

Views: 4423

Answers (1)

Pete
Pete

Reputation: 58462

An easy fix to this would be to use box-sizing: border-box but IEs support of this is only partial so I wouldn't be sure if it works in ie8 - you may have to find the -ms version for it to work.

box-sizing: border-box example

A more rounded solution could be to use the display:table as it should be supported back to IE 8

display:table example

Upvotes: 4

Related Questions