CODEWITHSUNDEEP
htmlcss
user3386779
user3386779

Reputation: 7175

css alignment for button and inputbox

I want to display textbox first and then button.But now button appears first.I attached css code and html 

css
   .search,.stxt{
    float: right;
    }  
html
   <form  method="POST">
     <p style="align:right;">
     <input class="stxt" type="text" name="searchtxt"><a style="padding-right:2ex;"></a>
     <button name="search" class="search">Search</button></p>
   </form>

enter image description here

Upvotes: 0

Views: 64

Answers (3)

WilliamN
WilliamN

Reputation: 89

Just move the button before your input text :

<form  method="POST">
     <p style="align:right;">
     <button name="search" class="search">Search</button></p>
     <input class="stxt" type="text" name="searchtxt"><a style="padding-right:2ex;"></a>
</form>

Or the simpliest way is to put the float right on your <p> tag and remove the others float right

Upvotes: 1

rajesh
rajesh

Reputation: 1485

Floating Elements Next to Each Other If you place several floating elements after each other, they will float next to each other if there is room.

So add the same class for both elements like below

HTML:

<form  method="POST">
     <p style="align:right;">
     <input class="stxt alignLeft" type="text" name="searchtxt"><a style="padding-right:2ex;"></a>
     <button name="search alignLeft" class="search">Search</button></p>
   </form>

And remove the float:right; in the .search,.stxt classes in CSS styles and add the following CSS:

 .alignLeft{
    float: left;
    }  
p{
    margin-left: 290px;
}

Fiddle:http://jsfiddle.net/gvmtuo5j/1/

Alternative:

Try Like this:

.search,.stxt{
    float: left;
    }  
p{
    margin-left: 290px;
}

check out this fiddle:http://jsfiddle.net/gvmtuo5j/

Upvotes: 1

James George Dunn
James George Dunn

Reputation: 523

The nature of floats will prioritise the first element in the list. This is why your input text box is to the right.

I would recommend wrapping your elements within a div and having that float to the right instead.

Upvotes: 2

Related Questions