Question

I am using a wrapper but I am pretty confused. I want the two resultbox divs to be in line with the submit div.

Take a look here:

http://jsfiddle.net/QtVwr/

What am I doing wrong?

I’m not very familiar with CSS.

Answer 1

Part of the problem is that there are issues with your HTML. Here’s a start:

1. make sure all the divs are closed.
2. remove the floats from your css
3. add display:inline-block;
4. remove the inline styles from your HTML.
5. correct the .wrapper class to be .wrapper1 (matching the HTML)

So, this is more what you want, I assume:

.wrapper1 {
    height:70px;
    width: 800px;
    background: #ffffff;
    border: 1px solid grey;
    color: #BDBDBD;
}

.resultbox {
    width: 300px;
    background: #ffffff;
    color: #BDBDBD;
    display: inline-block;
}

.submit {
    height:15px;
    width: 32px;
    margin-top:10px;
    background: #ffffff;
    border: 1px solid;
    color: #BDBDBD;
    display: inline-block;

}

and the HTML

<div class="wrapper1">
    <div class="resultbox" style="" >
        <div class="locationresult" style=""  form action="weezyresults.php" method="post">
            <input type="text" name="search"  size="36" value="" style="" />
        </div>    
    </div>

    <div class="resultbox" style="" >
        <div class="locationresult" style=""  form action="weezyresults.php" method="post">
            <input type="text" name="search"  size="36" value="" style="" />
        </div>    
    </div>

    <div class="resultbox" style="width:35px;" >
       <div class="submit"></div>
    </div>    

</div>

Example: http://jsfiddle.net/QtVwr/2/

You will still need to fiddle with it. But this is a start.