DIV next to the 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 a centered div (see image above), but instead I get this. http://i.imgur.com/X0e4s.png

How can i solve this?

Greetings

Answer 1

I assume that there are several approaches that you can take. Here is one of them.

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

• Make all the elements except the main inline-block shell.
• Center the “centered” element by pointing text-align: center to the main shell.
• Place the sidebar from the document stream by specifying position: absolute . This also requires specifying a position: relative container.
• Give the width and height of the sidebar container so that it does not affect the centering calculations. Give it vertical-align: top so that its top edge (which is also the top edge of the sidebar) aligns with the top edge of the centered element.
• Optionally, specify text-align for the centered element and sidebar if you do not want their contents centered within themselves.

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

Look at the action .

Answer 2

Please check the refurbished JSFiddle of your markup.

You need to remove #registercontainer and put #register in #login plus some position changes according to the width of the block in the center.

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

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

Instead of absolutely positioning the register div, I positioned its container. Absolute positioning makes it break from the html stream, so it does not interfere with the right margin: auto;

Answer 4

float: right should solve your problem. don't forget to add an empty div container with float:clear after that.

Answer 5

Several things happen here: firstly, your width in the “registercontainer” div is 1050, which will make it clear, which will cause the “register” div to appear under the “centered” div.

I would go about it differently. If you are dealing with a fixed-width site: I would put #login and #registercontainer next to each other and give #wrapper an explicit width. Then set #wrapper to leave a margin on the left, using%, which will roughly correspond to the placement you are after.

See the JS Fiddle example 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 6

Try the following:

  <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 absolute position. And use the spacer for the centered element to push the side panel further.