why my div is slightly moved to the right

Question

So I'm just a begginer to this HTML and CSS stuff, and I tried to make my own webpage. The thing is, it looks like this:

While I would like to get the second div(#diary) centered, but I can't do it without screwing up the whole webpage. Which will be the correct code? This is what I have:

HTML:

<div id="progress">
Blablabla
</div>

<div id="diary">
blablabla
</div>

CSS:

div {
border: 7px solid #142538;
background-color: #c7d0e1;
}  

#diary {
margin:auto;
width:30em; 
display:inline-block;
}

#progress {
font-size:16px; 
width:auto; 
float:left; 
display:inline-block;
margin-left:25px;
}

Thanks in advance ^^

Answer 1

You have mixed display: inline-block and float:left which makes no sense. Elements that float become display: block; by default. http://www.w3.org/TR/CSS2/visuren.html#float-position

There are two ways to solve your problem.

Way1 Go Inline-block all the way:

http://jsfiddle.net/fDx2U/

div {
    border: 7px solid #142538;
    background-color: #c7d0e1;
}
#diary {
    margin:auto;
    width:30em;
    display:inline-block;
    vertical-align: top;
}
#progress {
    font-size:16px;
    width:auto;
    vertical-align: top;
    display:inline-block;
    margin-left:25px;
}

How to the rid of the margin between the items: How to remove the space between inline-block elements?

Vital for this solution is the vertical-align:top; (your initial problem)

Way2 Go floating all the way:

http://jsfiddle.net/fDx2U/1/

div {
    border: 7px solid #142538;
    background-color: #c7d0e1;
}
#diary {
     margin-left: 100px;
}
#progress {
    font-size:16px;
    width:auto;
    float:left;
    margin-left:25px;
    width: 100px;
}

Vital for this solution is that the width of .diary equals the margin-left of #progress

Answer 2

Try this

#diary {
    margin:0 auto;
    width:30em; 
    display:block;
}