View Single Post
  #1 (permalink)  
Old July 19th, 2010, 03:33 PM
korinthos korinthos is offline
Registered User
Join Date: Jul 2010
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
Default page 250 overlap footer by columns:solution ok?

I was confronted with the following problem which is described on page 250:

"Either solution will have the same effect whether the margins are applied to the footer div itself or
a container, the effect will be the same (see Figure 9-21). The footer will always appear between the two
sidebars, if not always below them.
To prevent any overlap from the absolutely positioned sidebars, you can place the footer div within the
main content block. However, when the height of the sidebar columns exceeds the height of the central
column, the footer will appear significantly higher than the bottom of the page.
This is a serious shortcoming of the absolute positioning model..."

Though later the solution of floating is suggested, I didn't find a way to do that in the book. So, I came up with this:
#footer {
background-color: #FDD;
border: 1px solid #C00;
float: right;
width: 100%;
text-align: center;
margin-left: 0px;
vertical-align: bottom;}

The footer is now situated at the bottom of the page, and is not being overlapped by or in between of the left and right column.

By the way, the "footer" div in the html file is only included in the "container" div.

Can someone tell me if this is the right solution to the problem?

Thanks in advance!