Wrap one right-floated element underneath another

Question

I'm trying to put 2 divs beneath each other like this:

div 1
div 2

This is how far i've gotten in the HTML-file:

<div width="100%" z-index:"1">
            <div id="username-full">

                <div id="username-form">
                    <input type="text" name="username" id="username-input" placeholder="Username" />
                </div>

                <div id="username-text">
                    <p>Username:</p>
                </div>
            </div>
        </div>


        <div width="100%" z-index:"1">

            <div id="passwd-full">

                <div id="passwd-form">
                    <input type="text" name="passwd" id="passwd-input" placeholder="passwd" />
                </div>

                <div id="passwd-text">
                    <p>Password:</p>
                </div>

            </div>

        </div>

And this is my CSS-file:

#username-full{
    text-align:right;
    float:right;
    clear:right;
}
#username-text{
    float:right;
    margin-right:5px;
}
#username-form{
    float:right;
    margin-top:13px;
}

#passwd-full{
    text-align:right;
    float:right;

}
#passwd-text{
    float:right;
    margin-right:5px;
}
#passwd-form{
    float:right;
    margin-top:13px;
}

Fiddle

As you see, i've tried using the z-index, i've tried to give the 2 divs a width of 100% and i tried using float. Also, I've tried using positioning, but that also didn't work. I'm out of guesses :(.

Greetings, Luuk

Answer 1

I'm guessing, but have a look at this:

#passwd-full {
    ...
    clear: right;
}

Demo