CODEWITHSUNDEEP
htmlcsslayout
Stefan Steiger
Stefan Steiger

Reputation: 82186

How to align a button to the right of text box without margin?

How can I align a button (submit) exactly to the right of a text or search box,
with the same height as the search box,
and without any horizontal white-space between search box and button ?

This is what I have

<input type="text" value="" placeholder="search text here" style="display: block;  width: 100px; height: 32px; margin: 0px; padding: 0px; float: left;" />
<input type="submit" value=" OK "  style="display: block; margin: 0px;  width: 20px; height: 32px; padding: 0px; float: left; border-left: none;" />

http://jsfiddle.net/Ggg2b/

But neither is the button the same height as the textbox
, and more importantly, I don't seem to be able to get rid of that 0.5 to 1mm space between text-box and button.

Upvotes: 6

Views: 63557

Answers (10)

Eric G
Eric G

Reputation: 917

One way to approach this is by putting the text input and the button in a container which uses grid layout. Using the below simple code, you will need to add width restraints on the container as it will expand to the max possible width:

.joined {
  display: grid;
  grid-template-columns: 1fr auto;
}
<section class="joined">
  <input type="text"></input>
  <button>Go</button>
</section>

Here is an example showing how it will autosize/grow with other size settings applied:

.joined-2 {
  display: grid;
  grid-template-columns: 1fr auto;
  
  min-width:280px;
  width: 80vw;
}

input {
  height:100px;
}
<section class="joined-2">
  <input type="text"></input>
  <button>Go</button>
</section>

Upvotes: 1

Shaiju T
Shaiju T

Reputation: 6609

I accomplished this same task for a search box, I hope this may help someone.

<input type="text" name="id" id="seacrhbox" class="form-control" 
placeholder="Type to search" style="width:300px;display:inline-block;margin-right: 25px;"/>

<input type="submit" value="Search" class="btn-success" style="height:32px; 
width:80px;font-weight: 600;" />

Additionaly: (not related to the question)

If you would like to retain the value of a textbox in an asp/mvc use:

value="@Request["id"]" but if you want to do it in html try this

Upvotes: 0

suhailvs
suhailvs

Reputation: 21690

Add a height to the button using CSS.

.btn {
     font-size: 16px;
     border: 0;           
     height: 34px;
     margin: 0;         
     float:left;
    }

Then add height to the textbox using style attribute and check whether the heights match.

<input type="text" value="" placeholder="search text here" style="height:28px;float:left;margin:0;" />
<input type="submit" value=" OK "  class='btn' />

fiddle demo:http://jsfiddle.net/suhailvs0/Ggg2b/7/

Upvotes: 1

Stefan Steiger
Stefan Steiger

Reputation: 82186

Ah, I got it.

There are two problems at once.
First, there may be no white-space between end of input 1 and start of input 2.
A known IE bug.

And then, for the buttons being the same size as the text-box, it's necessary to apply the box-sizing property

-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;

Like this:

label, input  {
    margin: 0.1em 0.2em;
    padding: 0.3em 0.4em;
    border: 1px solid #f90;
    background-color: #fff;
    display: block;
    height: 50px;
    float: left;

    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;

}

input[type=text] {
    margin-right: 0;
    border-radius: 0.6em 0 0 0.6em;
}
input[type=text]:focus {
    outline: none;
    background-color: #ffa;
    background-color: rgba(255,255,210,0.5);
}
input[type=submit] {
    margin-left: 0;
    border-radius: 0 0.6em 0.6em 0;
    background-color: #aef;
}
input[type=submit]:active,
input[type=submit]:focus {
    background-color: #acf;
    outline: none;
}



<form action="#" method="post">

    <input type="text" name="something" id="something" /><input type="submit" value="It's a button!" />

</form>

Upvotes: 0

m1k1o
m1k1o

Reputation: 2364

Put them into a container, set fix width and height of the container. And set the elements in the container only percentage width. If you will use border-box: sizing; you can add them border and pagging without change container's width and height.

HTML:

<div class="input-box">
    <input class="input-1" type="text" value="" placeholder="search text here"  />
    <input class="input-2" type="submit" value="OK"  />
</div>

CSS:

.input-1, .input-2{
    display: inline-block;
    height: 100%;
    margin: 0;
    padding: 0;
    float: left;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}
.input-1{
    width: 70%; /* input-1 + input-2 = 100% */
}
.input-2{
    width: 30%; /* input-1 + input-2 = 100% */
}
.input-box{
    height: 32px; /* Own value - full height */
    width: 200px; /* Own value - full width */
}

Live demo. Now new, edited.

http://jsfiddle.net/Ggg2b/14/

Upvotes: 0

Mr_Green
Mr_Green

Reputation: 41832

I made some changes in HTML markup. I wrapped the input boxes in divs and assigned width and height to the divs instead of the input boxes.

HTML

<div class="mainCls">
    <div class="textCls">
        <input type="text" value="" placeholder="search text here" />
    </div>
    <div class="submitCls">
        <input type="submit" value=" OK " />
    </div>
</div>

CSS

input[type=text], input[type=submit] {
    margin: 0px;
    padding: 0px;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    display: block;
}
div.mainCls {
    height: 35px;
    position: relative;
    border: 1px solid green;
    display:inline-block;
}
.mainCls>div {
    float: left;
    position: relative;
    height: 100%;
}
.textCls {
    width: 100px;
}
.submitCls {
    width: 30px;
}

Working Fiddle

If the input boxes are of fixed width, as in your case, then there is no need of child div's which I used above. You can just add left: 100px; /* width of the input text */ to the submit button.

Upvotes: 0

Jennifer Gahagan
Jennifer Gahagan

Reputation: 96

To show your submit button at the right side of your search you only need to change some of your code as per given below. remove the left align from the code of button. and give the to the button is 34 px 

 <input type="text" value="" placeholder="search text here" style="display: block;  width: 100px; height: 32px; margin: 0px; padding: 0px; float: left;" />
        <input type="submit" value=" OK "  style="display: block; margin: 0px;  width: 40px; height: 34px; padding: 0px; " />

Upvotes: 1

Prats
Prats

Reputation: 106

     <input type="text" value="" placeholder="search text here" class="txtbox" />
     <input type="submit" value=" OK "  class="btncls" />

        .txtbox{
            display: block;
            float: left;
            height: 32px;
            width: 100px;
        }

        .btncls{
            display: block;
            float: left;
            height: 40px;
            margin: -1px -2px -2px;
            width: 41px;
        }

OR Check on Fiddle http://jsfiddle.net/Ggg2b/9/

Upvotes: 3

Mohan Raj
Mohan Raj

Reputation: 457

Increase the width, say for example

<input type="submit" value=" OK " style="display: block; margin: 0px; width: 100px; height: 32px; padding: 0px; float: left;" />

Upvotes: 0

ParVathi
ParVathi

Reputation: 109

put this in a paragrapgh tag and there no need for float:left 

 <p><input type="text" value="" placeholder="search text here" style="display: block;  width: 100px;        height: 32px; margin: 0px; padding: 0px;" />
 <input type="submit" value=" OK "  style="display: block; margin: 0px;  width: 20px; height: 32px; padding: 0px; " /></p>

Upvotes: 0

Related Questions