1

I'm trying to create a mini-register bar on the left side of the site, and on the middle to create some data page.
So I used float:left for the mini-register bar and text-align:center for the body.
I read this Align a div to center and now tried instead of text-align property, use margin: 0 auto for whole div.
But now the body sticks to the left mini-register bar and isn't placed on the center.

Mini register bar

<div id="LoginOrRegister">
        <form action="#" method="post" style="margin-top:30px;">
Username: <input id="text" type="text" required="required">
        Password: <input type="password" required="required"></br>
        <input type="submit" value="Sign In"> <strong>Or</strong> <a href="#"><button>Register</button></a>
        </form>
    </div>

Body data 

        <div style="margin: 0 auto;">
        <p>
        <h1><u>some data</u></h1>
  </p>
  </div>

CSS

#LoginOrRegister  {
  float:left;
    border: 4px solid #0279ec; 
    padding:5px; 
    width: 260px;  
    height:140px;
    }
button, input {
  cursor:pointer;
}

A demo
http://jsbin.com/yofeluna/1

Thanks

Community
  • 1
  • 1
rolory
  • 362
  • 1
  • 2
  • 15

2 Answers2

1

I added width and text-align property to your body text container: http://jsbin.com/yofeluna/4

<div style="width: 100%; margin: 0 auto; text-align: center">
ssergei
  • 1,289
  • 9
  • 21
0

Instead of margin, give your div this instead:

position:absolute;
width:100%;
text-align:center;

position:absolute will make sure it's the center of the screen, and not the center of whatever space is left on the right of the form.

DEMO

kei
  • 20,157
  • 2
  • 35
  • 62
  • After the body there's a footer, and he goes up either though he isn't included inside of the `div`. why is this happening? – rolory Mar 18 '14 at 16:46
  • Because once you set something to `absolute`, it's taken out of the flow of the layout. You'll need to account for this if you are to use `position:absolute`. – kei Mar 18 '14 at 16:54