How to level div boxes in css?

Please look at this link:

http://jsfiddle.net/eJTGr/

If you minimize the 'Javascript' area so the 'Result' area is enlarged you will see that it开发者_如何学Go is two white boxes with a grey border next to eachother with a black box at the end that is slightly out of line.

How is this put in line with the two white boxes?

Thanks!

James

You can set the position of .button1 to relative and add a top attribute. Doing this will allow you to move the button down a couple pixels — 6px in your case.

Your .button1 class would be

.button1 {
    height: 35px;
    width: 60px;
    background: #151515;
    border:1px solid;
    border-color: #BDBDBD;
    display: inline-block;
    horizontal-align: center;
    position:relative;
    top:6px;
}

Add vertical-align:bottom to the .button1 class.

.button1 {
 height: 35px;
    width: 60px;
    background: #151515;
    border:1px solid;
    border-color: #BDBDBD;
    display: inline-block;
    horizontal-align: center;
    vertical-align:bottom;
}

Reason : Your divs are defined as inline-block. Consider them like table rows. Sometime they do not take the same vertical alignment.

Note :
.search-field1 got a verticle-align: center; while .search-field2 got a horizontal-align: center;, which I think, does not exist.

just give the Button

position: absolute; 

but this isn't the best way i would do something like

.form-container {
    position: relative;
    float: none;
    }
.form-element {
    float: left;
    }

</style>

<div class="form-container">
    <form action="#" method="post" enctype="text/plain"

    <div class="form-element"><input type="text" name="" /></div>
    <div class="form-element"><input type="text" name="" /></div>
    <div class="form-element"><input type="submit" name="" /></div>

    </form>

</div>

Try removing the display-inline from the tags. Then add float:left to each. Remove vertical-align: 9px; from the inputs. I also removed the margin-top:4px from the button1 Note: the center tag has been deprecated so don't use for your websites.

Check out demo here

<input type="submit" />

instead of

<div class="button1" style="margin-top:4px;"></div>

Clean code : http://jsfiddle.net/eJTGr/30/

HTML

<div id="wrapper">
    <div id="search-field1">
        <input type="text" name="search1" />
    </div>

    <div id="search-field2">
        <input type="text" name="search2" />
    </div>

    <input type="submit" />
</div>

CSS

#wrapper { text-align: center; }

#search-field1 {
    height: 35px;
    width: 320px;
    border: 1px solid #BDBDBD;
    display: inline-block;
}

#search-field2 {
    height: 35px;
    width: 320px;
    border: 1px solid #BDBDBD;
    display: inline-block;
}

input[type="submit"] {
    height: 36px;
    width: 60px;
    border: 1px solid #BDBDBD;
    display: inline-block;
}

input[type="text"] {
    height: 35px;
    width: 320px; 
    border:0px; 
}