September 18, 2012

How do I align a <div> to the center of a <div>?

Question by Gregory Little

I’m using HTML/CSS to make a website and on my home page I have some <div> tags that are inside <div> tags. I can’t seem to get the inner <div> tags to align to the center of the outer <div> tags. Here is the HTML code i am using (the one with the stars next to it is the one that I want to align);

    <div id="container">
<div align="center" id="box" style="background-color:black;width:375px;height:400px;border:0px solid #003300;">
<h1 id="heading"></h1>
<h2 id="otherheading"></h2>
**<div align="center" id="box" style="background-color:white;width:275px;height:225px;border:0px solid #003300;">**
<ul class="list-tick">
    <li></li>
    <hr>
    <li></li>
    <hr>
    <li></li>
    <hr>
    <li></li>
    <hr>
    <li></li>
</ul>
</div>

And this is my CSS:

#container {
  margin: auto;
  width: 1125px;
}

#container div {
  float: left;
  height: 400px;
  width: 375px;
}

Any help will be greatly appreciated. If you have further questions about the problem, I will try and explain in more detail.

Answer by Starx

Remove the floats, and add these

#container div {
  margin: 0 auto; /* Center Horizontally */
  height: 400px;
  width: 375px;
}

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+

...

Please fill the form - I will response as fast as I can!