CODEWITHSUNDEEP
htmlcss
JasonGenX
JasonGenX

Reputation: 5434

CSS: attach a button with perfect height alignment to input

Let's assume for a second I do not wish to use Bootstrap. How do you achieve his perfect vertical alignment of the input with its button? When I do it the button vertically misaligns. I do not wish to use "hacking" on the top-margin to fix this as I'm afraid it won't look well on all browsers.

How is bootstrap achieving this magic?

my goal is something like this:

enter image description here

Upvotes: 3

Views: 448

Answers (3)

Yotam Omer
Yotam Omer

Reputation: 15356

You will have to use a container and display both as table cells (working jsFiddle):

Markup:

<div class="container">
    <input type="text" placeholder="Your text here">
    <div class="button">
        <a>Button</a>
    </div>
</div>

CSS:

.container{
    display:inline-table;
    vertical-align:middle;
}
input{
    display:table-cell;
    padding:5px;
}
.button{
    display:table-cell;
    background:gray;
    padding:5px;
}

Note: Keep in mind general things like both having the same font size and padding. To make it look slick you can round the outer corners same as in bootstrap :)

Upvotes: 1

Amar Syla
Amar Syla

Reputation: 3653

I think the answer would be using box-sizing: border-box, as bootstrap does. This works across all recent modern browsers:

<input type="text" placeholder="Your text here">
<button>Button</button>

 

input{
    float: left;
    height: 30px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
button{
    float: left;
    height: 30px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

http://jsfiddle.net/4dgzbc3y/

Upvotes: 2

Downgoat
Downgoat

Reputation: 14361

Have an input and button with explicit heights. The input and the button will need a comment between them to "connect" otherwise they will have na ugly space

.target {
  height: 2em;
}

.target * {
  height: 100%;
  display:inline-block;
  border:none;
  outline:none;
}

.target input {
  width:79%;
  background-color:black;
  padding-left: 5px;
}

.target button {
  width:10%;
  background-color: orange;
  box-sizing: margin-box;
  padding: 0; margin: 0;
  border-top: 2px orange;
}
<div class="target">
  <input placeholder="Foo" type="text"><!--
  --><button>Bar</button>
</div>

Upvotes: 0

Related Questions