Question

https://i.stack.imgur.com/bhrYD.png here is a screenshot

I am trying to style it such that the h1 will sit on the left, the input is in the middle, and then I want to have some links on the right.

I tried using float and it just ruins everything.

Edit

When I used float: left or float: right, I get 2 divs to separate but the positioning is awful.

Some html I have:

<div id="container">
            <div id="header">
                <div id="nytm">
                    <h1>New York Tech Map</h1>
                </div>
                <div id="form">
                    <form>
                        <input type="text" name="zip">
                        <input type="submit" value="Search By Zip">
                    </form>
                </div>
                <div id="navlinks">
                </div>
            </div>
</div>

Here is the css:

#container {
    min-height: 100%;
    position: relative;
}
#header {
    background: #EDEDED;
    height: 79px;
    border-bottom: 1px solid #666;  
}

#nytm{
    display: inline;
}

#form{
    margin-top: 24px;
    display: inline;
}

#navlinks{
    display: inline;
}

Answer 1

the way i would do this is first make one large div, then put each field into their own divs, this creates a large div with equal spaced divs inside it, itll be easier to do css on it then.