SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Evangelist ucahg's Avatar
    Join Date
    Apr 2001
    Location
    Sarnia, Ontario, Canada
    Posts
    434
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Layout of form elements >> Search box

    Hi,

    I am trying to lay out a search box in a column on my web site, but am failing miserably.

    I have attached an image of what I am aiming for, but I can't seem to get it right in CSS.

    I want the input box + submit button combination to take up 100% of the column. The submit button will be a fixed width (in em's) but the text input I want to expand to fill out the rest of the column. Is this possible in CSS (while still keeping the source order of the input before the submit button)?

    Please help [img]images/smilies/smile.gif[/img]

    (the attachment has to be approved first I believe so it won't show up right away)
    Attached Images Attached Images
    Love it? Hate it? Helpful? Useless?
    Use the rate button to let me know what you think of my post!

  2. #2
    SitePoint Enthusiast CRYSTL's Avatar
    Join Date
    Sep 2003
    Location
    Kazakhstan
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How about this one?

    Code:
    <span style='white-space:nowrap;'>
     <input style='float:right; margin-left:5px' type=submit>
     <input type=text style='width:100%;'>
    </span>
    Update: Damn, that works in Mozilla only.

  3. #3
    SitePoint Evangelist ucahg's Avatar
    Join Date
    Apr 2001
    Location
    Sarnia, Ontario, Canada
    Posts
    434
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I know, I was thinking this would just be a simple case, but I think since these are form elements they are a bit more unpredictable.

    Also I'd prefer to have the submit button after the input type in the source, but if that's not possible then I may have to have it before.
    Love it? Hate it? Helpful? Useless?
    Use the rate button to let me know what you think of my post!

  4. #4
    SitePoint Evangelist ucahg's Avatar
    Join Date
    Apr 2001
    Location
    Sarnia, Ontario, Canada
    Posts
    434
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Because this was sliding far down the page before the image was approved, and thus most people didn't even see the image, I think a bump may be forgivable in this case
    Love it? Hate it? Helpful? Useless?
    Use the rate button to let me know what you think of my post!

  5. #5
    SitePoint Addict hurricane.uk's Avatar
    Join Date
    May 2003
    Location
    Liverpool
    Posts
    361
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Set a fixed width for the button and use width: auto; for the text box?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •