CSS Search box won't float left

Question

I have this

            <td width="312" valign="center" height="157" background="{{ 'BT_S3.png' | asset_url }}">
             <div style="width:95%; text-align: left; height:52px; background-image:url('{{ 'search_bar.png' | asset_url }}');" float="left">
            <form action="/search" method="get">
            <input type="text" name="q" src="{{ 'search_bar.png' | asset_url }}" />
            <input type="image" value="Search"  src="{{ 'search_button.png' | asset_url }}"  />
            </form>
            </div>
            </td>

This is my HTML for my search box located at http://clarkbetty.myshopify.com/# Password: betweu

I would like the search button to float so that the search box and button are on the same line. I have tried a lot of things but nothing works. Can someone help?

am using chrome, they are in the same line – mgraph Apr 25 '12 at 22:26 — mgraph, Apr 25 '12 at 22:26

score 1 · Answer 1 · answered Apr 25 '12 at 22:29

You should add style="float:left" to both the text box and the button elements.

<input type="text" [...] style="float:left" />
<input type="image" [...] style="float:left" />

Also note that it's even better to put these rules into a css file instead and refer to these elements by their ids or classes.

Eliran Malka · Answer 2 · 2012-04-25T22:34:50.017

0

another approach would be to apply relative positioning to the wrapping form element, and use absolute positioning on the inner controls (search field and button inputs) to control their layout inside of it.

something along these lines:

form {
    position: relative;
}
input[type='text'],
input[type='image'] {
    position: absolute;
    top: 0;
}
input[type='text'] {
    left: 0;
    width: 100%;
    padding-right: 20px;
}
input[type='image'] {
    right: 0;
    width: 20px;
}

edited Apr 25 '12 at 22:34

answered Apr 25 '12 at 22:28

Eliran Malka

15,821
6
77
100

Thank you sir! You were great help! – Chris Altamimi Apr 25 '12 at 23:11
you're most welcome. it is of courtesy to up-vote a useful answer, or mark it accepted, case it solved your problem. thanks. – Eliran Malka Apr 25 '12 at 23:31

gabitzish · Answer 3 · 2012-04-25T22:37:48.313

0

Change this line:

<input type="text" name="q" src="{{ 'search_bar.png' | asset_url }}" />

to this:

<input type="text" style="float:left;" name="q" src="{{ 'search_bar.png' | asset_url }}" />

float:left has to be inside style attribute.

edited Apr 25 '12 at 22:37

answered Apr 25 '12 at 22:30

gabitzish

9,535
7
44
65

I did so and it did not change anything. – Chris Altamimi Apr 25 '12 at 22:31
Oh, sorry, the name of the background image tricked me. You have to add style attribute to the line with the input . I'm editing my post. – gabitzish Apr 25 '12 at 22:37

CSS Search box won't float left

3 Answers3