Solved

CSS expanding footer

Posted on 2010-09-14
2
761 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Suggested Courses

622 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