how to use div to layout page

Question

I am using div to layout a page. The page has two columns. The first column is a map. The second column contains three rows of graphs. I used the code below. The result gives me just one column (instead of two) with four rows. What am I doing wrong?

<!-- This is where the map will live -->    
<div id="map-container" style="width:1000px; height:500px"></div>

<!-- CHARTS!!! -->

<div class="row">

    <!-- row chart -->
    <div class="col-md-1">
        <div id="rowchart2" class="dc-chart"></div>
        <center><div class="title">Severity</div></center>
    </div>

    <!-- Histogram-->
    <div class="col-md-2 col-md-offset-1">
        <div id="rowchart" class="dc-chart"></div>
        <center><div class="title">Histogram(Delta Speed)</div></center>
    </div>

    <!-- row chart -->
    <div class="col-md-4 col-md-offset-0">
        <div id="rowchart3" class="dc-chart"></div>
        <center><div class="title">Direction</div></center>     
    </div>                  
</div>

Answer 1

<div class="row">

    <div class="col-md-12">
        <div class="col-md-6">
            Column 1:


            <div id="map-container" class="col-md-12" style="width:100%; height:500px"></div>


        </div>

        <div class="col-md-6">


            OTHER DATA HERE

        </div>
    </div>


</div>