LAYOUTS - CSS: Professional Techniques for Modern Layout - page 152

So we have the content of the entry, and then the publication date and time information. We
could have more there, like categories or tags, but let's stick with the date and time to keep
things simple. h anks to absolute positioning, we can place it anywhere along the outer edge
of the entry.
First, as usual, create a containing block, and at the same time open up some space for the
date and time information to live:
.entry { position : relative ; margin-left : 10em ;}
h en grab the ul and position it outside the let edge of the entry div (see Figure 4-49).
. datetime { position : absolute ; width : 9em ; left : -10em ; top : 0 ;
margin : 0 ; padding : 0 ;}
. datetime li { list-style : none ; font-style : italic ;}
154
Figure 4-49: Positioning an entry's metadata to one side.
h e width is used to keep the content's right edge from getting too close to the let edge of
the actual entry content. And just like that, we've put the date and time out to the let . Of
course, l ipping this over to the right is just as simple (see also Figure 4-50):
.entry { position : relative ; margin-right : 10em ;}
. datetime { position : absolute ; width : 9em ; right : -10em ; top : 0 ;
margin : 0 ; padding : 0 ;}