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;
}​

Answer 3

float: right should solve your problem. remember to add an empty div-container with float:clear afterwards.

Answer 4

There are a couple of things going on here - first, your width on the "registercontainer" div is 1050 - which will force it to clear, causing the "register" div to appear below the 'centered' div.

I would go about this a different way. If you are dealing with a fixed-width site: I would float #login and #registercontainer next to each other, and give #wrapper an explicit width. Then, set #wrapper to have a margin left using a % that would approximate the placement that you're after.

See this JS Fiddle for an example. Here is the CSS (I changed the background colors for clarity):

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

#wrapper {
   width: 760px;
    background: blue;
    overflow: hidden;
    margin-left: 35%;
}

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


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


#registercontainer {
    float:left;
    margin-top: 50px;
    clear: none;
    width: 350px;
    background: red;
}

#register {

}​

Answer 5

Take a look at this fiddle. http://jsfiddle.net/nUk77/ Or even closer to your original code: http://jsfiddle.net/rSbzT/

Instead of absolute positioning the register div I positioned its container. The absolute positioning makes it break from the html flow so it doesn't interfere with the margin-right:auto;

Answer 6

Try this:

    <div style="position: relative; display: inline-block; padding: 0 30px;">
    <h2>CENTERED ELEMENT</h2>
        <div style="position: absolute; top: 0; left: 100%;">
            ELEMENT NEXT TO CENTERED DIV
    </div>

Use 100% in position absolute. And use padding for the centered element to push the side div further.