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 image, 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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With