Question

My problem is that I cannot inline the label with the input horizontally and the inputs vertically

I wish to have an output like this:

But I’m using a table on this. Now I want not to use table but I dont know how to do it. I try to make but it is very wrong.

Here’s my css

   article#login, article#register {
    padding:5px 0 5px;
    border:1px solid black;
    width:200px;
    margin:0 auto;
}

And here’s my html

<section id="siteContent" class="tabs">
    <h1>Section</h1>
    <article id="login">
        <h1>Login</h1>
        <label>E-mail:</label>
        <input type="email">
        <label>Password:</label>
        <input type="password">
        <input type="button" value="Login">
    </article>
    <article id="register">
        <h1>Register</h1>
        <label>Name:</label>
        <input type="text">
        <label>E-mail:</label>
        <input type="email">
        <label>Password:</label>
        <input type="password">
        <label>Re-type:</label>
        <input type="password">
    </article>
</section>

Answer 1

As far as I am aware, there is no true way to achieve horizontal and vertical alignment without a table.(I was just proven wrong by @TimMedora) However, if you want your input boxes to appear on the same line as the label, you’re going to want to adjust their size. They are currently larger than your box, and thus get pushed around by the other elements. Once you do this however, you’ll still want to apply the following css(or something similar) so your elements stay on their individual lines:

label {
    display: inline-block;
}

DEMO