Footer on liquid format page problem

[AndyH1]

I'm trying to create a footer on a dynamically resizable page that will fill the width 100%.

Basically I want to 3 images to make up the footer

a opening box image followed by background of box follwed by closing box image all on one line

Something like '[' + '###################' + ']'
to give
[###################]
ie the image of the box for the footer is split into 3 images, a left one, a middle one (which is repeated) and an end one

I have tried a number of ideas using divs with the background-image css set to the appropriate image. and the middle one set with the repeat-x
ie
leftdiv middlediv rightdiv

The left and right div I've set to the width of the opening and closing inmages. The problem is getting the middle div to expand between this so the footer is 100% across. If I dont specify a width it just becomes the size of the text in the middle area which isnt completely across. specifying the width as a percentage (such as 98%) doesnt help as this results in bigger smaller spaces as the screen is resized and so the left, right images dont line up.

I wondered if there's anyway I could for example make the middle bit 100% the superimpose the left and right images over this using z-index, but havent been able to do this.

The footer needs to be at the bottom of the page, so absolute position doesnt seem to be the answer either

Can anyone advise a good way of doing this with css and divs? or point me to a page, I'm running out of ideas how to do this and am not a css expert

 

[vacunita]

Try something like this maybe:

<div id="footer"><div class="rightside"></div><div class="leftside"></div></div>

#footer{
background-color:#8888dd;
overflow:hidden;
height:100px;
}


#footer .leftside{
background-color:#88dd99;
float:left;
border-left:2px solid black;
border-top:2px solid black;
border-bottom:2px solid black;
width:100px;
height:100%;
}


#footer .rightside{
background-color:#88dd99;
float:left;
border-right:2px solid black;
border-top:2px solid black;
border-bottom:2px solid black;
float:right;
width:100px;
height:100%;
}

As long as your other content on the page is not absolutely positioned, which it really shouldn't be, it will by default sit at the end of the page.

Use the main footer div to set the background image that should tile, and use the left and right divs to set the sides of the box.

See it in action here: Fluid Footer

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[AndyH1]

Thanks for your help Vacunita,

I'm actually trying to use images so tried the following based on your code, but still haven't cracked it

The side images are 4 wide x 58px high. The middle one is 1 x 58px

#footer{
clear:both;
overflow:hidden;
background:url("../images/middle_footer.png") repeat-x;
height:58px;
}

#footer .leftside{
float:left;
width:4px;
background:url("../images/left_footer.png") no-repeat;
height:58px;
}


#footer .rightside{
background:url("../images/right_footer.png") no-repeat;
float:right;
width:4px;
height:58px;
}

and the code is
<div id="footer"><span class="rightside"></span><span class="middle"><jdoc:include type="modules" name="footer" style="xhtml" /></span><span class="leftside"></span></div>

It seems to mostly work with the footer middle image appearing across the screen and the right image correctly on the end, but the left image seems to be vertical half way down.

Any idea what I'm doing wrong?

 

[vacunita]

What styles are you applying to your middle span. That's going to be affecting the left span.

As a guess: Try placing the middle span after the right span:

<div id="footer"><span class="leftside"></span><span class="rightside"></span><span class="middle">Content</span></div>

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[AndyH1]

Thanks Phil,

That seems to have sorted it. many thanks for your help
Andy