Solved

CSS expanding footer

Posted on 2010-09-14
2
755 Views
Last Modified: 2012-05-10
I'm trying to make a footer, which has a fixed center with an expanding background. Something like this:

<<<expanding>>>   <<<fixed>>>  <<<expanding>>>

The header on my page is arranged the same way and it is working properly, but when I try to duplicate the same thing for my footer the sides are pushed beneath the fixed center. My page is here:

http://www.glowfishtw.com/play3on3/index.aspx

I'm trying to get the footer to look just like the header. My CSS and page is below. Thanks for any help.

The footer HTML:
  <div id="content_footer">&nbsp;</div>
  <div class="left_footer column_footer">
    <div id="leftcol_footer">&nbsp;</div>
  </div>
<div class="right_footer column_footer">
    <div id="rightcol_footer">&nbsp;</div>
</div>

The CSS:
#content_footer {
      width: 900px;
      height: 80px;
      text-align: left;
      overflow:auto;
      margin-top: 0;
      margin-right: auto;
      margin-bottom: 0;
      margin-left: auto;
      background-image: url(../images/header.png);
      padding-top: 150px;
      padding-left: 80px;
}

.column_footer {
      width: 50%;
      position: absolute;
}

.left_footer {
      left: 0;
}        
.right_footer {right: 0;}

#leftcol_footer {
      margin-right: 486px;
      height: 230px;
      background-image: url(../images/top_bg_stripe_long.png);
}

#rightcol_footer {
      margin-left: 480px;
      height: 230px;
      background-image: url(../images/top_bg_stripe_long.png);
}

0
Comment
Question by:elliottbenzle
2 Comments
 
LVL 15

Accepted Solution

by:
ludofulop earned 500 total points
ID: 33669788
hi, what about something like this?

<div style="background-color: red; height: 230px; margin: 0px 50px; text-align: center;">
    <div style="background-color: yellow; width: 900px; height: 80px; margin-top: 150px;">lorem ipsum</div>
</div>
0
 
LVL 4

Author Closing Comment

by:elliottbenzle
ID: 33676571
Thanks, that helped a lot.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

863 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now