html / css的页脚格式和间距问题

Question

I've been passed on a rather dated website, which to be honest is a bit of a mess. So at the moment I'm basically just trying to do the basics, which is challenging!

Web page in question is here http://www.yourchesham.co.uk/online.htm

I'm attempting to add historic versions of the magazines under the

Previous Editions 

section, but I don't appear to be able to move the bottom content down the page, meaning that overtime the text is going to start overlapping.

I've tried simply using <br><br> to push the page content down, but this is not working. The main block of code is shown below. Not sure how to address this?

        <div id="apDiv19">
            <div align="center" class="style21">
                <h4>Support the Businesses <br />
                    that support <span class="style17">yourAmersham</span></h4>
                </div>
            </div>
            <div id="apDiv22">Registered in 'England and Wales' Company number 08280869</div>
            <div id="apDiv23">
                <h4>Our Latest Edition</h4>
                <div style="text-align:center;"><div style="margin:8px 0px 4px;"><a href="http://www.calameo.com/books/0052756020d65a0443ab5" target="_blank">Your Amersham Issue 51 October 2017</a></div><iframe src="//v.calameo.com/?bkcode=0052756020d65a0443ab5&mode=mini" width="480" height="300" frameborder="0" scrolling="no" allowtransparency allowfullscreen style="margin:0 auto;"></iframe><div style="margin:4px 0px 8px;"><a href="http://www.calameo.com/" target="_blank">Read more publications on Calaméo</a></div></div>

                <h4>Previous Editions</h4>
                <a href="http://en.calameo.com/read/00527560211169822a565" target="_blank">September Issue</a><br>
                <a href="" target="_blank">August Issue</a>
                <br>    <br>

                <!--        <div style="background-color: #333333; width: 524px"> -->

    </div>

Answer 1

The problem isn't just with that div, its actually pretty much all of them :)

All of the divs have been given a fixed height and absolute positioning. This means they won't move and or grow (although the content will overflow of the div as you've seen).

To make the layout move and grow with the content,you will need to change everything from absolute positioning to relative positioning.

Alternatively, if you can target the css in that page only, you could just update the absolute positions of the bottom divs to move them out of the way of your new content

1. Change the height of #apDiv14 (ie the one with the latest editions, assuming this is the one you are adding the previous editions to) to height:auto;
2. manually change the top value of the following divs to suit the new content you add: #apDiv7 , #apDiv9 , apDiv10 , apDiv18 , apDiv19 (and possibly others!)

It's messy, but then so is the site itself! :)