Question

so using ExpressionEngine, I can generate a lot of webpages using the same template with different content. My problem is that I can’t get the footer to appear where I want it to appear: at the bottom of the background image for each separate webpage.

For example, say that one of my pages is about dogs and the other is about cats. I love dogs so I write two paragraphs about dogs while only writing one paragraph about cats. I would like for both the background image to grow and the footer to be relatively positioned at the bottom of the background image. I have tried messing with both relative and absolute positioning in css, but the minute that I get it right for the “dog” page, it screws up the format for the “cat” page. I have also tried to adjust the height of the background image.

Am I missing something? Maybe there is an easier way to position an object relative to another object in css that I am not aware of? Thanks in advance.

As I previously mentioned, this does NOT achieve the result that I would like:

#landing_details {
position: relative;
bottom: -20px;
left: 40px;
height: 900px;
}

#belowTitle {
position: relative;
bottom: 25px;
}

#landingBodyCopy {
width: 400px;
position: relative;
bottom: -50px;
 }

#landing_footer {
position: relative;
left: 120px;
bottom: -105px;
 }

These are both nested within a div id=”wrapper” which I never reference in my css. The landing details is what changes per entry. Also, the landing_footer div is kept within the landing_details div.

UPDATE:

• So the part that I highlighted in red represents the space that I would like to be eliminated from the page.

UPDATE: The basic html layout is as follows

{exp:channel:entries channel="landing_pages" url_title="{segment_2}" sort="asc" disable="categories|pagination"}

    <div id="wrapper">

<link rel="stylesheet" type="text/css" media="all" href="{stylesheet='in-store-analytics/LandingBodyStyle'}" />
    <div id="landing_details">

        <h3 class="LandingHeader"> {landing_page_header} </h3>
        <div id="belowTitle">
            <h4 class="LandingSubTitle"> {landing_page_sub_title} </h4>
                <div id="landingBodyCopy">
                    <div class="landingBodyCopyText"> {landing_body_copy} </div>
                </div>

            <div id="landing_footer">

                        {embed="embed/footer"}
            </div> <!-- End of landing footer>
        </div> <!--- End of below title-->
        </div> <!-- End of the landing details -->

         </div> <!-- END div wrapper -->


{/exp:channel:entries}

Thanks again and any help on this matter would be greatly appreciated.

Answer 1

If you do not absolutely position your footer, its default position value will be static, which means that it will naturally appear below (“at the bottom of”, like you asked for) any statically or relatively positioned preceding elements, however many there may be, and however big they are.

As for the background image growing according to content length, any div whose height is not explicitly set will expand according to the size of its content. Therefore your two-paragraph content div about dogs will be larger than the one-paragraph page about cats. If there is a background image on the content div, the div will act as a window displaying a portion of the background depending on its size. More content -> bigger content div -> more of the background image displayed. This is possibly not what you mean by having the background image “grow”, but it does effectively grow.

If you’d like to perform some kind of dynamic scaling on the bg image, you should be more specific about how you want that to work, since I’d only be guessing at your intent. As well, it would help people answer you if you can provide a barebones version of your rendered pages using jsFiddle or jsbin. Isolate the part of the layout that you want help with and mock it up.