CODEWITHSUNDEEP
htmlcss
noblerare
noblerare

Reputation: 11863

Why is my button overflowing into another page?

Here is a picture example of what is happening.

Picture with button overflowing into another page

I'm trying to build one of those one-page scrolling websites.

The white background indicates one page, the grey background indicates the beginning of another page.

As I start filling my white page with content, I notice that my button slowly starts sliding down and is now encroaching into the grey page. I don't want that to happen but rather for the white page to extend.

Here is my CSS for the pages: 

#white-page
{
    background-color: white;
    height: auto;
    min-height: 100vh;
    text-align: center;
}

#grey-page
{
    background-color: grey;
    min-height: 100vh;
}

Here is my CSS for the button. 

.download-center
{
    text-align: center;
    margin-top: 60px;   
}

.btn 
{
    text-decoration: none;
    border: 1px solid gray;
    padding: 10px 20px 10px 20px;
    border-radius: 25px;
    color: inherit;
}

Here is the relevant HTML

<section id="white-page">
    //page content here
    <div class="download-center">
        <a class="btn font-r" href="docs/resume.pdf" target="_blank">
        <img id="download-pic" src="pic/download.svg" />Download R&eacutesum&eacute
        </a>
    </div>
</section>

<section id="grey-page">
    //page content here
</section>

I tried setting the height to auto for the white page but it doesn't seem to work.

Basically, I just want the page to extend as the content requires but with a minimum of vh so that it takes up the whole of the screen first.

Edit: By removing the margin-top property, here is the result. All it does it pushes the button closer to my content but still encroaches on the page borders.

enter image description here

Upvotes: 1

Views: 99

Answers (3)

noblerare
noblerare

Reputation: 11863

I'm answering my own post because removing margin-top was not the solution that worked for me. Instead, it was increasing margin-bottom. 

margin-bottom: 40px;

Upvotes: 1

devpro
devpro

Reputation: 16117

Reduce margin from top and add position as like:

.download-center {
    text-align: center;
    margin-top: 40px;
    position: absulote;    
}

Upvotes: 1

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167172

The reason is you have restricted height and used margin-top:

.download-center {
    text-align: center;
    margin-top: 60px;   
}

Adjusting margin-top to a lesser value, say 30px will make the button stay inside.

Upvotes: 1

Related Questions