thelinuxlink.net

Perhaps I should post to the css list, but I am going to try here first.

This is the page I am working on with someone else: http://www.slsd.org/teacher/washkod/foundation/take2

Notice that the image in the bottom left, actually two images, line up just fine. But, if more text is put in the main body, a gap results. I thought this could be fixed by setting the bottom of the image to 0px; but this is not working.

The image is floated to the left so the text wraps around it.

I'm trying to figure out how I can make it so the image always aligns to the bottom no matter the amount of content in the main section of the page.

You can set the div to <b>position: absolute;</b> and then set the height that you want the div to remain at (in this case, <b>top: 545px;</b>). You'll also need to set the width of the footer to match the width of the rest of the stuf (I think around 800px). There are several problems with setting a footer to an absolute position. Among them, if the content on the page expands, the space will not be enough to accomodate whatever may be added. Set the .footer div to <b>position: absolute; top: 545px; width: 800px;</b> and the text will run under the .footer div. Allowing the page to expand with a mobile footer is a better option. I think the L-shaped image the teacher is wanting to go for is going to be very difficult to implement.

Perhaps making the text area as a frame with a scrollbar is an option? That would allow you to keep the page in a restricted size but still give an unlimited space for the content. But that's a bit beyond my current abilities, so I can't give you much advice on that.

Added: If you do find a fix, please post it or a link to it. I would be very interested in how to do such a thing should it be possible.

I posted to the cssd-user list and the response I got was pretty simple (why did I not think of this) but is not 100% what I want. Put the content between the header and footer in a div and style it like so:



div style="padding-left: 140px; background: url(images/montage_top.png) bottom left no-repeat; margin-bottom: 0"

This works, but if the content should be signficanlty larger that the image the content will not flow above the image as if it were floated. There will always be a 140px margin.