Home/ Questions/Q 6887831
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T05:55:58+00:00

I’m a CSS newbie and I need to learn how to use it right.

  • 0

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

    Share

    Leave an answer

    You must login to add an answer.

    Need An Account,

    1 Answer

    1. Editorial Team

      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.

      • 0