Inline form fun

Get Started
1

Hi all,

For the last 3 hours I’ve been tearing the hair out of my head trying to figure out what I’m doing wrong. I’m fairly new to web design and have decided create a simple application for internal use at my place of work.

The problem I have is I’m trying to place a search input field within the tagline of my application (see attachment) but the input field refuses to go into the bar nice and neatly. The label ‘Search’ places fine but the input just won’t go in, I’ve tried everything. I’d like it to be placed right of the label but also need everthing to float nicely as I have a liquid layout and would like the application to scale nicely with different resolutions.

CSS current code:

    #tagline {
            background-color: #FF0000;
            border-top: 1px solid #000000;
            font-size: 70%;
            font-weight: bold;
            margin-top: 1em;
            padding: 0.4em;
    }

            #tagline form {
                    display: inline;
                    float: right;
            }

            #tagline form label {
                    float: left;
            }

HTML current code:

    <div id="tagline">
            <span>IPtrak</span>
            <form action="?" method="get">
                    <label for="searchbox">Search</label>
                    <input type="text" name="searchbox" id="searchbox" class="txt"/>
            </form>
    </div>

Any help or advice would be much appreciated

Regards

Mark

2

Welcome to SitePoint, g3kk0 :slight_smile:

To get a container (in this case #tagline) to contain its content (i.e. to stop floated content hanging outside of the container) there are various methods, but the easiest is to add this to the container CSS:

#tagline {
    overflow:hidden;
}
3

Hi Ralph,

Thanks very much for trying to help me figure this one out.

I’ve included the code you advised and it seems to have helped abit (see attachment). I’m still unable to resolve/understand why the search input field refuses to sit inline and to the right of the seach label.

Any ideas what could be causing this?

Thanks again for your time

Mark

4

Hmm, in my browser (Firefox) they do sit side by side. You could try floating the input too:

#tagline form input {
    float: right;
}

Or perhaps remove both floats, as the elements really should sit side by side anyway.

If that doesn’t help, then give the form, label and input a width to force their hand.

5

After I removed the padding and use a line-height instead it looked okay to me.


#tagline {
	width: 100%;
	margin-top: 1em;
	overflow: hidden;
	background-color: #FF0000;
	border-top: 1px solid #000000;
	font: 70% ;
	line-height: 300%;
	font-weight: bold;
}

Seen in all browsers

6

Hi guy’s,

I made the changes you recommended but it still wouldn’t work. So I then decided to isolate the problematic code from the rest of the app and hey presto it worked. This then steered me towards it being something else in my CSS. I then began commenting/testing and found the culprit:

    #searchbox {
            margin-top: 2em;
            padding-bottom: 2em;
            padding-left: 0.5em;
    }

My first school boy error!

I’d left this legacy code in assuming #<idname> only applied to div id’s and not element id’s too.

With this removed everything is now perfect.

Thanks again for your assistance

Regards

Mark

7

Good that you figured it out. Maybe another lesson :slight_smile: Next time post the entire CSS involved :wink: