DIV next to centered div

Question

body {
    background: rgba(0, 0, 0, 0.8);
    font-family: sans-serif;
    font-size: 11px;
    color: #e0e0e0;
}

#wrapper {

}

#login {
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
    background: rgba(0, 0, 0, 0.9);
    width: 360px;
    padding: 20px;
    position: relative;

    -webkit-border-radius: 15px;
    border-radius: 15px;
}


#registercontainer {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: 1050px;
}

#register {
    position: absolute;
    left: 740px;
    top: 50px;
}

//

    <div id="wrapper">
        <div id="login">
            <h2>Login to The Something Project</h2>
            <form action="game" method="post">
                <input type="text" name="username" maxlength="20" placeholder="username"><br>
                <input type="text" name="usericon" placeholder="http://imgur.com/icon.png"><br>
                <br>
                <input type="submit" value="login">
            </form>
        </div>


        <div id="registercontainer">
            <div id="register">
                <h2>Register for The Something Project</h2>
            </div>
        </div>
    </div>

I want to have a div next to the centered div (see the image above) but what i get instead is this. http://i.imgur.com/X0e4s.png

How do i solve this?

Greetings

Answer 1

I imagine there are quite a few approaches you can take. Here is one.

Using the same HTML structure as in your example, the goal can be achieved thus:

• Make all elements except the main wrapper inline-block.
• Center the "centered" element by giving text-align: center to the main wrapper.
• Put the sidebar out of the document flow by giving it position: absolute. This requires that you give its container position: relative as well.
• Give the sidebar's container zero width and height so that it doesn't affect the centering calculations. Give it vertical-align: top so that its top edge (which is also the sidebar's top edge) aligns with the top edge of the centered element.
• Optionally specify text-align for the centered element and the sidebar if you don't want their contents to be centered within themselves.

As a bonus, with this approach you can directly specify the widths for both the centered div and the sidebar in just one place.

See it in action.

Answer 2

Please, check the repaired JSFiddle of your markup.

You need to remove #registercontainer and place #register into #login plus some position modifications according to centered block width.

HTML:

<div id="wrapper">
    <div id="login">
        <h2>Login to The Something Project</h2>
        <form action="game" method="post">
            <input type="text" name="username" maxlength="20" placeholder="username"><br>
            <input type="text" name="usericon" placeholder="http://imgur.com/icon.png"><br>
            <br>
            <input type="submit" value="login">
        </form>
        <div id="register">
            <h2>Register for The Something Project</h2>
        </div>
    </div>
</div>​

And CSS:

body {
    background: rgba(0, 0, 0, 0.8);
    font-family: sans-serif;
    font-size: 11px;
    color: #e0e0e0;
}

#login {
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
    background: rgba(0, 0, 0, 0.9);
    width: 360px;
    padding: 20px;
    position: relative;
    -webkit-border-radius: 15px;
    border-radius: 15px;
}

#register {
    position: absolute;
    left: 420px;
    top: 20px;
    width: 100px;
}​