HTML and CSS Reference
In-Depth Information
Done. Let's create a nice container area to put our graph in. Because a few unordered lists are
being used to make our graph, we'll also reset the styles for those. Giving the
#figure
and
.graph
elements a
position:relative
is important because it will anchor the place
elements exactly where we want in those containers.
/* Containers */
#wrapper
{
height
:
420px
;
left
:
50%
;
margin
:
-210px 0 0 -270px
;
position
:
absolute
;
top
:
50%
;
width
:
540px
;
}
#figure
{
height
:
380px
;
position
:
relative
;
}
#figure ul
{
list-style
:
none
;
margin
:
0
;
padding
:
0
;
}
.graph
{
height
:
283px
;
position
:
relative
;
}
Now for the legend. We position the legend right down to the bottom of its container (
#figure
)
and line up the items horizontally:
/* Legend */
