Home/ Questions/Q 6550275
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T12:11:46+00:00

I’m having a hard understading css and 960 templating system. Everything seems to work

  • 0

I’m having a hard understading css and 960 templating system. Everything seems to work fine (text and the columns layout), except that my “footer” id is not being applied at the rendered elements at the bottom, but together with my header. (The footer id is only a different background so I can track what’s happening there)

Take a look

What am I doing wrong?

Here is what I have, using Django template tags:

<html>
    <head>
        <link rel="stylesheet" href="../../static/css/reset.css" />
        <link rel="stylesheet" href="../../static/css/text.css" />
        <link rel="stylesheet" href="../../static/css/960.css" />
        <link rel="stylesheet" href="../../static/css/site.css" />
        {% block scripts %}
        {% endblock %}
        <title>
            {% block title %}
            {% endblock %}
        </title>
    </head>
    <body onload="{% block onload %}{% endblock %}">
        <div id="main_container" class="container_12">
            <div id="header" class="grid_12">
                <div class="grid_12">
                    <h1 id="main_title">Acidentes Mapeados em Uberlandia</h1>
                </div>
            </div>
            <div id="content" class="grid_12">
                {% block content %}
                {% endblock %}
            </div>
            <div id="footer">
                <div class="grid_3">
                    <ul>
                        <li>All your base are belong to us!</li>
                        <li>All your base are belong to us!</li>
                        <li>All your base are belong to us!</li>
                        <li>All your base are belong to us!</li>
                    </ul>
                </div>
                <div class="grid_3">
                    <h3>Other stuff</h3>
                    <p>Other, huh?</p>
                </div>
                <div class="grid_6">
                    <h3>Contato</h3>
                    <p>Entre em contato</p>
                </div>
            </div>
        </div>
    </body>
</html>

I’m using 906.gs!

Here is the css (sorry bout that)

body{
    font-family:Verdana,Helvetica,sans-serif;
}

#header {
    background-color:#144389;
    height:50px;
    vertical-align:middle;
}

#footer {
    background-color:#800000;
    height:300px;
}

#toolbar {
    background-color:#e3d7df;
}

#mapa {
    height:100%;
}

#main_title
{
    color:#ffffff;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I’ve seen this issue with google’s maps when NOT setting the height attribute of the container for the map (via CSS).

    #map { height:300px; width:500px } /* for instance */

    Without seeing your CSS code for that container, it’s hard to verify. It could be the overflow, position(of the footer or its parent), floats, etc. – as mentioned above.

    • 0