2.4 Just a little bit of CSS

While this course is not intended to cover extensive styling (CSS in web talk), let’s cover some of the basic elements that will allow you to create and position different elements in your web page. This tutorial will go through two different page layout scenario’s:

  • Fixed Map Size, Centered to the page: Map is a fixed size and centered to the page, allowing for title and description text to go above and below it
  • 2 Column Layout: Add a side panel to the left of the map, and have the map occupy the remainder of the space allowed by the browser window

Fixed Map Size Scenario

Currently, the div tag, or container that holds your map, occupies 100% of the width, and 100% of the height of the browser window. This means that there is currently no space to add additional div’s… that is, unless you decide to layer it on top of the map div. Let’s avoid that for the time being. Look at the div that is generating your map:

Currently, the “style” is set to 100% for the width and the height. You can change this to assume a fixed pixel size (instead of a percentage of the browser’s size):

Now your map does not occupy the entire real estate of the browser window, and instead, is positioned to the top left. Now, let’s add a simple title to the page:

Centering your elements

You will notice that the 2 elements of the page, the h1 and div, are both aligned to the left of the page. In most websites, it has become common practice to have the contents inside of a div that is centered on the page, rather than having it left-aligned. To do so, let’s create a div container for all the elements of the page to go in, and make sure that the container is centered to the page:

Notice that by setting the container div style to “margin: auto;”, it ensures that the div is centered to the page with the assigned pixel size (width:800px).

Fixed and Centered Map Scenario

Fixed and Centered Map Scenario

[working example]

2 Column Map Scenario

In this scenario, we want to maximize the size of the map and create a small panel to the left of the map. To do so, create a sidepanel div container before the map div. Let’s assume that we want our sidepanel to occupy 250 pixels, and the map to occupy the remainder space allowed by the browser window.

First, create the side panel div, with some content in it (in this case, some title text):

Let’s see what each of the style parameters mean:

  • position:absolute;
    This ensures that the div’s position is set to the parameters you specify
  • overflow:auto;
    This makes sure that if your content inside this container exceeds the height space allocated, that a scrollbar will show up allowing users to scroll down
  • float:left;
    This ensures that the div is aligned to the left

Notice that although we want the width to be 250 pixels, it is set at 230 pixels. Why is that? Also notice that there is a stylesheet parameter for “padding-left” and “padding-right”, each set at 10 pixels. The padding allows you to have some white space within the div to allow any text that you put in it, to have some breathing room, and not be placed flush against the left margin of the div. But combined, it takes up 20 pixels, and therefore, you must substract those 20 pixels from the total width (ie: 250 pixels – 30 pixels = 230 pixels).

Now we need to modify the map div slightly to ensure that it works well with sidepanel div:

  • margin-left:250px;
    The margin size here must be set to the pixel count from the left of the browser window that you want the map div to start from. It will then render the div to the right of the given pixel space.

Final outcome

Putting it all together, the 2 div’s combined should produce a side panel on the left, with a map on the right that occupies the remainder space for the browser window.

2 Column Map Scenario

2 Column Map Scenario

[working example]

Leave a Reply