Two elements on one line using div tags?

Eventually, our team would like to move away from tables, but it seems like div tags are so much harder to use. In the above ima开发者_运维技巧ge, the layout was created using a table, but I cant figure out how to get a basic column structure working using div tags. How can I get those buttons on the same line? HTML newbie here.

---

Not too difficult:

HTML:

<form id="login">
    <div>
        <label for="user">Username:</label>
        <input id="user" type="text" size="20">
    </div>
    <div>
        <label for="pass">Password:</label>
        <input id="pass" type="password" size="20">
    </div>
    <div>
        <input id="cancel" type="reset" value="Cancel">
        <input id="submit" type="submit" value="Login">
    </div>
</form>

CSS:

#login {
    background-color: #FEFEDD;
    border: 3px solid #7F7F7F;
    display: inline-block;
    padding: 20px;
    text-align: right;
}
#login div {
    padding: 5px;
}
#login label {
    font-weight: bold;
    margin-right: 5px;
}
#login #cancel {
    float: left;
}

Live Demo

---

To be short, if you want to put many elements with div tags in the same line you should give for each div a left float and a width. For example:

<div style="width:50px; float:left;"> Element 1</div>
<div style="width:50px; float:left;"> Element 2</div>
...

---

As bad as it is to use tables for positioning elements on a page, forms is one exception I often make. Sure you can float your DIVs, but you're going to write a lot more code to do that than using tables. Plus we're talking about a tabular format with rows and columns. If you're not supposed to use tables for a tabular format, then why have the tags in the HTML at all?

---

If you give the elements a position:absolute then you can set the left: value and the top:value to align the buttons.

div#cancelbutton {
position: absolute;
top:50px;
left:30px;
}
div#loginbutton {
position:absolute;
top:50px;
left:300px;
}

This will place the element quote: relative to the first parent element that has a position other than static. Check out http://www.w3schools.com/Css/css_positioning.asp

---

Maybee is better to use float:let then display: inline-block; because IE9 could display textboxes in two rows. Check http://interestingwebs.blogspot.com/2012/10/div-side-by-side-in-one-line.html for examples.