Solved

CSS expanding footer

Posted on 2010-09-14
2
757 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

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

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

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

786 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