Two elements on the same line using div tags?

Question

In the end, our team would like to move away from the tables, but it seems that div tags are so much harder to use. In the above figure, the layout was created using a table, but I cannot figure out how to get the basic structure of the columns using div tags. How can I get these buttons in one line? HTML newbie here.

Answer 1

Not too complicated:

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

Answer 2

In short, if you want to put many elements with div tags in one line, you must specify a left float and width for each div. For instance:

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

Answer 3

As bad as using tables to position elements on a page, forms are one exception that I often make. Sure, you can float your DIVs, but you are going to write a lot more code to do this than using tables. Plus we are talking about a table format with rows and columns. If you should not use tables for table format, then why are there any tags in HTML?

Answer 4

If you tell the elements the position: absolute, you can set the value left: and upper: the 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

Answer 5

Maybee is better to use float: let it then display: inline-block; because IE9 can display text fields in two lines. For an example, consider http://interestingwebs.blogspot.com/2012/10/div-side-by-side-in-one-line.html .