How to add a CSS table next to my google map?


Tags: html,css,google-maps,web

Problem :

I'm a CSS newbie and I need to learn how to use it right. I have a google map centered on the page and it displays well:

   <div class="mapContainer">
        <div id="gmap" style="margin: auto">&nbsp;</div>
    </div>

Creating the map was nothing special:

map = new google.maps.Map(document.getElementById("gmap"), mapOptions);
var mapdiv = document.getElementById("gmap");
mapdiv.style.width = '1000px';
mapdiv.style.height = '600px'

The CSS I got help with, I don't understand everything here but this far it renders correctly:

/* @override http://localhost:8000/static/css/style.css */
@import url("960.css");
@import url("reset.css");
@import url("text.css");
@import url("uni-form-generic.css");
@import url("uni-form.css");

.clearfix {display: block;}
.fleft{float:left;}

    #buttons, .koolbuttons {
        float:left;
    }

    #map {
      width: 900px;
      height: 600px;
    }
    #controls {
      margin: 0;
      list-style: none;
    }
    #controls li {
      display: inline;
      margin-left: 42px;
      font-family: Sans-Serif;
      font-size: 10pt;
    }
    #fusion-hm-li {
      visibility: hidden;
      margin-left: 8px;
    }

h1, h2, h3, h4, h5, h6, h7, h8 {
    text-shadow: #fff 1px 1px 1px;
}

a {}
a:link {color: #750006;}
a:visited {color:#0D1826;}
a:hover {color: #d2e0f7; text-decoration:none}

.nobk:hover {
    background:none;
}

body {
    font-family:  'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif;
    font-size: 12px;
    margin: 0px;
    color:#2C4F66;
    background-color:#ffffef;
    line-height:1.3;
}

#main_content {
    background: yellow;
}

#footer {
    background-color:#99b3cc;
    color:#2C4F66;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: 15px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -ms-border-radius: 4px;
    //text-shadow: #fff 1px 1px 1px;
}

#mainCol ul {
    list-style:none;
    margin:10px 0 10px 0;
    padding:0;
}

#mainCol li {
    display:inline;
    margin:0 0 0 1px;
    padding:0;
}

#mainCol li a:link, #mainCol li a:visited {
    text-decoration:none;
    font-size:1.3em;
    font-weight:bold;
    color: #000;
    background-color:#ebebeb;
    padding-left: 6px;
    padding-right: 6px;
    padding-top: 2px;
    padding-bottom: 2px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -ms-border-radius: 4px;
    text-shadow: #fff 1px 1px 1px;
}

#mainCol li a:hover {
    color:#d2e0f7;
    background-color:#336699;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -ms-border-radius: 4px;
    padding-left: 6px;
    padding-right: 6px;
    padding-top: 2px;
    padding-bottom: 2px;
    text-shadow: #666 1px 1px 1px;
}

.mapContainer #gmap {
    height: 400px;
    border-top: 2px solid #8D9BA1;
    border-bottom: 2px solid #8D9BA1;
}

.mapContainer2 #gmap {
    height: 300px;
    overflow:hidden;

}

.title1 {
    font-size: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    background-color:#99b3cc;
    color:#2C4F66;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 2px;
    padding-bottom: 2px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -ms-border-radius: 4px;
    text-shadow: #fff 1px 1px 1px;
}

/* ========== A view =========== */

#contact_info {
    background-color:#d2e0f7;
    color:#2C4F66;
    padding: 10px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -ms-border-radius: 4px;
}   

#contact_info h6{
    font-size: 12px;
}

.tag {
    font-weight:bold;
    color: #d2e0f7;
    background-color:#8D9BA1;
    padding-left: 6px;
    padding-right: 6px;
    padding-top: 2px;
    padding-bottom: 2px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -ms-border-radius: 4px;
    text-shadow: #666 1px 1px 1px;
}

a:hover .tag  {
    background-color: #2C4F66;
    text-decoration: none;
}

a:visited .tag  {
    color: #FFF
}
/* ========== DEV Info ============*/

.dev_avatar {
    float:left;
}

#dev-info {
    padding-left:220px;
}

.dev_name {
    font-size: 36px;
    font-weight: bold;
    text-shadow: #fff 1px 1px 1px;
}

.dev_location {
    font-size: 18px;
}  

.dev-result{
    font-size:18px;
    width: 32%;
    float: left;
}

.countries_list dt {
    font-size: 14px;
    font-weight: bold;
}

.countries_list dd a{
    font-size: 12px;
    text-decoration: none;
}

.link_to_profile {
    font-size: 14px;
    height: 25px;
    width: 49%;
    float: left;
}

/* Debug class */
.show {
    background-color:pink;
}

/* Mugur CSS Starts Here */

.ybox{
    background-color:#d2e0f7;
    color:#2C4F66;
    padding: 10px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -ms-border-radius: 4px;
}

#header {
    margin-bottom:20px;
    position:relative;
}

#logo-wrap{
    position:relative;
    width:480px;
}

#logo-text{
    position:absolute;
    top:70px;
    left:150px;
}

#logo-text h1{
    font-size:24px;
    font-weight:bold;
    color:#2C4F66;
    text-shadow: #cccccc 1px 1px 1px;
}

#user-ident {
    float:right;
    clear:both;
    position:relative;
    text-align:right;
    background-color:#d2e0f7;
    color:#2C4F66;
    padding-left: 6px;
    padding-right: 6px;
    padding-top: 2px;
    padding-bottom: 2px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -ms-border-radius: 4px;
    text-shadow: #fff 1px 1px 1px;
}

#navbar{
    float:right;
    clear:both;
}

#tags {
    line-height:2;
}

#dev_bio {
    font-size:18px;
}

/* Forms */

.uniForm fieldset {
    border:1px solid #DFDFDF;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -ms-border-radius: 5px;
    padding: 5px;
}

.uniForm fieldset legend {
    font-size: 1.5em;
}

/*** Stats */
#countries_map {
    margin-left: auto;
    margin-right: auto;
}

Now I want two columns of text directly to the right of the map. If I mock it up it should look something like this:

enter image description here

And when I try to put it there the text appears everywhere except where it's supposed to. Therefore I'm asking you for help. Could you instruct me how I can get something like the following which I mocked up with tables, and this should be done with CSS? Should I make a float:right since I want the the columns of text to the right of my map? Why does my map move to the left when I do my layout experiments? I hope you can answer some of my questions. I suppose the code for the 2 columns of text should not be a table and get its layout by CSS instead so the part with the geogrphy names is going to look something like:

<div class="region_links_one">
            <ul class="regions_one">
                <li><a id="region_8" href="/andhra_pradesh/" >Andhra Pradesh</a></li>
                <li><a id="region_9" href="/arunachal_pradesh/" >Arunachal Pradesh</a></li>
                <li><a id="region_10" href="/assam/" >Assam</a></li>

                <li><a id="region_11" href="/bihar/" >Bihar</a></li>
                <li><a id="region_12" href="/chhattisgarh/" >Chhattisgarh</a></li>
                <li><a id="region_13" href="/goa/" >Goa</a></li>
                <li><a id="region_14" href="/gujarat/" >Gujarat</a></li>
                <li><a id="region_15" href="/haryana/" >Haryana</a></li>
                <li><a id="region_16" href="/himachal_pradesh/" >Himachal Pradesh</a></li>

                <li><a id="region_17" href="/jammu_kashmir/" >Jammu & Kashmir</a></li>
                <li><a id="region_18" href="/jharkhand/" >Jharkhand</a></li>
                <li><a id="region_19" href="/karnataka/" >Karnataka</a></li>
                <li><a id="region_20" href="/kerala/" >Kerala</a></li>
                <li><a id="region_21" href="/madhya_pradesh/" >Madhya Pradesh</a></li>
            </ul>

            <ul class="regions_two">
                <li><a id="region_22" href="/maharashtra/" >Maharashtra</a></li>
                <li><a id="region_23" href="/manipur/" >Manipur</a></li>
                <li><a id="region_24" href="/meghalaya/" >Meghalaya</a></li>
                <li><a id="region_25" href="/mizoram/" >Mizoram</a></li>
                <li><a id="region_26" href="/nagaland/" >Nagaland</a></li>

                <li><a id="region_27" href="/orissa/" >Orissa</a></li>
                <li><a id="region_28" href="/punjab/" >Punjab</a></li>
                <li><a id="region_29" href="/rajasthan/" >Rajasthan</a></li>
                <li><a id="region_30" href="/sikkim/" >Sikkim</a></li>
                <li><a id="region_31" href="/tamil_nadu/" >Tamil Nadu</a></li>
                <li><a id="region_32" href="/tripura/" >Tripura</a></li>

                <li><a id="region_34" href="/uttaranchal/" >Uttaranchal</a></li>
                <li><a id="region_33" href="/uttar_pradesh/" >Uttar Pradesh</a></li>
                <li><a id="region_35" href="/west_bengal/" >West Bengal</a></li>
            </ul>
        </div>

Thank you

**Update**

I did this according to the answer:

 

  • Andhra Pradesh
  • Arunachal Pradesh
  • Assam
  •         <li><a id="region_11" href="/bihar/" >Bihar</a></li>
            <li><a id="region_12" href="/chhattisgarh/" >Chhattisgarh</a></li>
            <li><a id="region_13" href="/goa/" >Goa</a></li>
            <li><a id="region_14" href="/gujarat/" >Gujarat</a></li>
            <li><a id="region_15" href="/haryana/" >Haryana</a></li>
            <li><a id="region_16" href="/himachal_pradesh/" >Himachal Pradesh</a></li>
    
            <li><a id="region_17" href="/jammu_kashmir/" >Jammu & Kashmir</a></li>
            <li><a id="region_18" href="/jharkhand/" >Jharkhand</a></li>
            <li><a id="region_19" href="/karnataka/" >Karnataka</a></li>
            <li><a id="region_20" href="/kerala/" >Kerala</a></li>
            <li><a id="region_21" href="/madhya_pradesh/" >Madhya Pradesh</a></li>
        </ul>
    
        <ul class="regions_two">
            <li><a id="region_22" href="/maharashtra/" >Maharashtra</a></li>
            <li><a id="region_23" href="/manipur/" >Manipur</a></li>
            <li><a id="region_24" href="/meghalaya/" >Meghalaya</a></li>
            <li><a id="region_25" href="/mizoram/" >Mizoram</a></li>
            <li><a id="region_26" href="/nagaland/" >Nagaland</a></li>
    
            <li><a id="region_27" href="/orissa/" >Orissa</a></li>
            <li><a id="region_28" href="/punjab/" >Punjab</a></li>
            <li><a id="region_29" href="/rajasthan/" >Rajasthan</a></li>
            <li><a id="region_30" href="/sikkim/" >Sikkim</a></li>
            <li><a id="region_31" href="/tamil_nadu/" >Tamil Nadu</a></li>
            <li><a id="region_32" href="/tripura/" >Tripura</a></li>
    
            <li><a id="region_34" href="/uttaranchal/" >Uttaranchal</a></li>
            <li><a id="region_33" href="/uttar_pradesh/" >Uttar Pradesh</a></li>
            <li><a id="region_35" href="/west_bengal/" >West Bengal</a></li>
        </ul>
    </div>
    

    Which improves stuff but the map now is not centered anymore when I managed to place the element like this:

    enter image description here

    Now I'm getting happy with the result after adding another div around the map and the links:

    #holder {
      width: 945px ;
      margin-left: auto ;
      margin-right: auto ;
    }
    

    enter image description here



    Solution :

    Both the map container and the region_links_one div should be floated to the left.

    Then you'll need to ensure that the width of both divs is small enough to fit in their parent container. They should then wrap up next to each other.


      CSS Howto..

      How to make a caret in a link change color when the LINK is hovered over?

      How are media queries counted in IE's CSS selectors limit?

      How to do Icon Prefixes on Select or Multi select Form elements using Material Design CSS?

      How to add border in my clip-path: polygon(); CSS style

      How do I add a dropdown menu to my css menu?

      How to stop text from vertically centering in a table?

      CSS - How to stack divs by columns of 2

      How to parse and extract CSS selectors as strings?

      How to change default theme color teal to blue without using custom CSS in materilaize

      How to style select crossbrowser [duplicate]

      How to center this by using css?

      How to make a background with 2 gradients in CSS

      How to Create Responsive Web Page With Static Header?

      How can i change jquery-div creation to some other method

      how can the value of an href attribute be changed using javascript/css?

      How to create some elegant shadows in CSS [closed]

      How to reference css and script files into a node.js app?

      How can I drag an element into a dropdown list using jQuery UI sortable()?

      Show Loading gif on hover

      How to simplify my CSS stylesheet?

      style a navigation link when a particular div is shown

      In Firebug, how to tell what is overriding a style?

      How to place 3 different paragraphs next to each other?

      How to stop some css from getting applied to all
    • tag
    • How to apply CSS to a Mac Chrome Select Box?

      How to target itemid=“” in CSS

      Bootstrap CSS - How do I keep the search form inline with other navbar elements?

      How to get similar effect on menu

      How can I make buttons flash different background colors when clicked/

      On Edge Browser, how to change input placeholder text color using CSS?