Two divs next to eachother in the center of the page

Question

I've been struggeling with this for a while and I can't really seem to find an answer online.

So I've been trying to place two divs next to eachother, and afterall that worked. However, those divs are placed at the very left of the page and once I make my webbroswer window smaller the right div is placed on the left div, which I don't want (it should always be placed next to the left div, also if the window is smaller). Secondly, those divs should be placed in the center of the page, which I can't seem to let it work.

I placed my script in jsFiddle: http://jsfiddle.net/LZMf3/

The problem is related with the lower white boxes, the div code is #midden_box1 (left) and #midden_box2 (right). The yellow background is #midden.

style.css

@charset "utf-8";

/* BOVENKANT */
    body, html, #map {
        margin: 0;
        width: 100%;
        height: 85%;
        text-align: left;
            color: black;
            font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    }

    #bovenkant{
        width: 100%;
        height: 40px;
        background-color: black;
        text-align: center;
            line-height: 250%;
            vertical-align: middle;
            color: white;
            font-weight: bold;
            font-size: 18px;
            font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 
    }

    #box{
        width: 300px;
        background: rgba(0,0,0,0.8);
        z-index: 1000;
        position: absolute;
        top: 80px; 
        left: 50px;
        padding: 10px;
        border-radius: 10px;
        text-align: left;
            color: white;
            font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    }

                /* MIDDENSTUK */        
                    #midden{
                        background: #DBA901;
                        position: relative;
                        width: 100%;
                        height: auto;
                        overflow: hidden;
                    }

                    #midden_box1{
                        background: white;
                        width: 300px;
                        height: auto;
                        padding: 10px;
                        float: left;
                        overflow: hidden;
                        margin-left: auto;
                        margin-top: 10px;
                        margin-bottom: 10px;
                        margin-right: 10px;
                    }

                    #midden_box2{
                        width:200px;
                        background: white;
                        width: 800px;
                        height: auto;
                        float: left;
                        padding: 10px;
                        margin-right: auto;
                        margin-left: auto;
                        margin-top: 10px;
                        margin-bottom: 10px;
                    }

                            /* onderstuk */
                                #onderkant{
                                width: 100%;
                                height: 40px;
                                background-color: black;
                                text-align: center;
                                    line-height: 250%;
                                    vertical-align: middle;
                                    color: white;
                                    font-weight: bold;
                                    font-size: 15px;
                                    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif
                                }



/* TEKST OPTIES */

        /* bovenkant */

        #bovenkant a:link {
            color: white;
            text-decoration: none;
        }

        #bovenkant a:visited {
            color: white;
            text-decoration: none;
        }

        #bovenkant a:hover {
            color: #F90;
            text-decoration: none;
        }

            /* midden */

                    /* midden_box1 */
                    #midden_box1 a:link {
                        color: #630;
                        text-decoration: none;
                    }

                    #midden_box1 a:hover {
                        color: #650;
                        text-decoration: none;
                    }

                    #midden_box1 a:visited {
                        color: #630;
                        text-decoration: none;
                    }

                    #midden_box1 p {
                        line-height: 20px;
                        font-size: 9px;
                        bottom: 5px; 
                    }

                    #midden_box1 b.titel{
                        font-size: 20px;
                        line-height: 2px;
                        color: #630;
                    }

                    #midden_box1 p.datum{
                        font-size: 9px;
                        color: #630;
                    }

                    #midden_box1 b.dagboektitel{
                        font-size: 15px;
                        line-height: 1%;
                        color: #630;
                    }

                    /* midden_box2 */
                    #midden_box2 a:link {
                        color: #630;
                        text-decoration: none;
                    }

                    #midden_box2 a:hover {
                        color: #650;
                        text-decoration: none;
                    }

                    #midden_box2 a:visited {
                        color: #630;
                        text-decoration: none;
                    }

                    #midden_box2 p {
                        line-height: 20px;
                        font-size: 9px;
                        bottom: 5px; 
                    }

                    #midden_box2 b.titel{
                        font-size: 20px;
                        line-height: 2px;
                        color: #630;
                    }

                    #midden_box2 p.datum{
                        font-size: 9px;
                        color: #630;
                    }

                    #midden_box2 b.dagboektitel{
                        font-size: 15px;
                        line-height: 1%;
                        color: #630;
                    }

                    #midden_box2 p.tekst{
                        font-size: 12px;
                        white-space: pre-wrap;
                        color: #300;
                    }

index.php

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="nl">

  <head>
<?
require 'definitie.php';
require 'verbinding.php';
?>
    <title><?php echo INDEX_TITEL; ?></title>
  <link rel="stylesheet" href="./css/style.css" type="text/css">
  <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDypT9N2T2imUPhILy_zfWJP1EGUiSTDKY&sensor=false"></script>
  <script type="text/javascript" src="./js/kaart.php"></script>

  </head>

<body onload="getMap()">
<div id="bovenkant"><? echo MENU; ?></div>

<div id="map">
</div>

<div id="box">

  <b><? echo INDEX_BOX_WELKOM; ?></b>

  <p><? echo INDEX_BOX_INHOUD; ?></p>

</div>

<div id="midden">
       <div id="midden_box1">
        <b class="titel"><?php echo INDEX_BOX_MIDDEN_TITEL; ?></b>
        <?php
        $query = "SELECT * FROM blog ORDER BY datum DESC LIMIT 0,7"; // Formulering van de query
        $resultaat = mysql_query($query); //query uitvoeren
        while ($row = mysql_fetch_array($resultaat)){
        ?>
        <?php echo "
        <a href='./blog.php?id=".$row['id']."'>
        <p class='datum'>".$row['plaats']." | ".$row['datum']."</p>
        <b class='dagboektitel'>".$row['titel']."</b>
        </a><br>
        "; ?>
        <?php
        }
        ?>
        </div>

        <div id="midden_box2"> <?php $query1 = "SELECT * FROM blog ORDER BY datum DESC LIMIT 0,1"; // Formulering van de query
        $resultaat1 = mysql_query($query1); //query uitvoeren
        $row1 = mysql_fetch_array($resultaat1); ?>
        <?php echo "<a href='./blog.php?id=".$row1['id']."'> <p class='datum'>".$row1['plaats']." | ".$row1['datum']." | ".$row1['auteur']."</p> <b class='titel'>".$row1['titel']."</b> </a> <p class='tekst'>".$row1['bericht']."</h5>" ?>
        </div>
</div>




<div id="onderkant">
<? echo COPYRIGHT; ?>
</div>


</body>

</html>

Answer 1

Place both the divs in a wrapper and give that wrapper a margin:0 auto then proceed as usual for placing two divs next to each other (follow here).

For working implementation of above go here.

/*markup*/<div class="wrap">
<div class="outerdiv">
<div class="div1">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</div>
<div class="div2">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros.
</div>
</div>

/*style*/ *{ margin:0 ; padding:0 ;}
.wrap{
    height:500px;
    width:500px;
    background:#f00 ;
}
.outerdiv{
    width:80%;
    height:100%;
    background:rgba(0,255,0,0.5);
    margin:0 auto ;
    overflow:auto;
}
.div1{
    float:left;
    width:60%;
    height:100%;
}
.div2{
    height:100%;
    margin-left:60%;
}