I tried looking around SO, but I can't really figure out anything that works.

As the title says, I need to align two divs to be centered and side by side.

<div id="wrapper">

<div id="dashboard" style="width: 70%;">

    <h3 id="dash" style="color:#99FF00; font-family:monospace;">

        <table style="color:#99FF00; font-family:monospace;" cellpadding="7">
            <tr>
                <td>generation</td>
                <td>1</td>
            </tr>
            <tr>
                <td>currently living</td>
                <td><p id="initial_current"></p></td>
            </tr>
            <tr>
                <td>recently newborn</td>
                <td>0</td>
            </tr>
            <tr>
                <td>recently died</td>
                <td>0</td>
            </tr>
            <tr>
                <td>recently surviving</td>
                <td>n/a</td>
            </tr>
        </table>


        <table style="color:#99FF00; font-family:monospace;" cellpadding="7">
            <tr>
                <td>total living</td>
                <td><p id="initial_total"></p></td>
            </tr>
            <tr>
                <td>total newborns</td>
                <td>0</td>
            </tr>
            <tr>
                <td>total deaths</td>
                <td>0</td>
            </tr>
            <tr>
                <td>total survived</td>
                <td>n/a</td>
            </tr>
            <tr>
                <td>the answer to life</td>
                <td>?</td>
            </tr>
        </table>
    </h3>
</div>

<div id="board" style="color:#99FF00; font-size:15pt; font-family:monospace;">
</div>

Basically, the 'wrapper' is the parent div. I want to center 'dashboard' and 'board'. I hava javascript generating the text within 'board'.

I roughly want it looking like this:

I tried looking around SO, but I can't really figure out anything that works.

As the title says, I need to align two divs to be centered and side by side.

<div id="wrapper">

<div id="dashboard" style="width: 70%;">

    <h3 id="dash" style="color:#99FF00; font-family:monospace;">

        <table style="color:#99FF00; font-family:monospace;" cellpadding="7">
            <tr>
                <td>generation</td>
                <td>1</td>
            </tr>
            <tr>
                <td>currently living</td>
                <td><p id="initial_current"></p></td>
            </tr>
            <tr>
                <td>recently newborn</td>
                <td>0</td>
            </tr>
            <tr>
                <td>recently died</td>
                <td>0</td>
            </tr>
            <tr>
                <td>recently surviving</td>
                <td>n/a</td>
            </tr>
        </table>


        <table style="color:#99FF00; font-family:monospace;" cellpadding="7">
            <tr>
                <td>total living</td>
                <td><p id="initial_total"></p></td>
            </tr>
            <tr>
                <td>total newborns</td>
                <td>0</td>
            </tr>
            <tr>
                <td>total deaths</td>
                <td>0</td>
            </tr>
            <tr>
                <td>total survived</td>
                <td>n/a</td>
            </tr>
            <tr>
                <td>the answer to life</td>
                <td>?</td>
            </tr>
        </table>
    </h3>
</div>

<div id="board" style="color:#99FF00; font-size:15pt; font-family:monospace;">
</div>

Basically, the 'wrapper' is the parent div. I want to center 'dashboard' and 'board'. I hava javascript generating the text within 'board'.

I roughly want it looking like this:

• javascript
• css
• html

3 Answers 3

Use position absolute and declare the margins as follows and you are good to go

Demo

<style>
.container {
   width: 300px;
   height: 100px;
   position: absolute;
   left: 50%;
   top: 50%;
   margin-left: -150px; /* Half of width */
   margin-top: -50px;    /* Half of height */
}

.left {
   float: left;
   width: 150px;
}

.right {
   float: right;
   width: 150px;
}
</style>

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
</div>

Note: Don't forget to clear floats using clear: both; else use overflow: hidden; on the container div, currently am using height: 100%; so no issues here

solution without floating: http://jsfiddle/GzvJH/

<div class="container">
   <div class="child"></div>
   <div class="child"></div>
 </div>

and css:

.container{
   width: 500px;
   height: 500px;
   line-height: 500px;
   text-align:center;
   border:1px solid red;
}

.child{

   width:100px;
   height:100px;
   border:1px solid black;
   display:inline-block;
}

<style>
    .container {
        text-align:center;
    }
    .twocolumns {
        width:50%
        display:inline-block;
    }
</style>
<div class="container">

    <div class="twocolumns">
          <p>Look at me im in column 1</p>
    </div>

    <div class="twocolumns">
          <p>Look at me im in column 2</p>
    </div>
</div>

I hope that helps!