Responsive footer displayed over parts of content when shrinking browser

Question

I am fairly new to CSS and HTML.

And I understand that this question has been asked several times, yet I cannot seem to fix my current issue.

I have been working on little small projects like trying to recreate other websites with extra features.

My current task is recreating a front page search area, such as google.

Implementation and Issue

I have been focusing in the responsiveness of websites when a browser resize occurs, so I have been using Flexbox as often as possible.

Implementation

A main div with a container id, with a min-height of 100% and a relative position.

Inside the container div are nav(#nav), center(#center) and footer(#footer) elements and their respective id's.

nav: a flex display, baseline align-items and min-height of 9vh.
center: a width of 100%, and a min-height of 10vh;
footer: absolute position, bottom 0, width of 100%

I have made some research into the Footer and how to keep it at the bottom of a page while being responsive when shrinking the browser, but I seem to have come to a halt or possibly I haven't fully understood yet how to get the footer to stop at a certain element.

Issue

The issue is that I cannot get the footer to function correctly. I do not wish it to overlaps with the bottons and links in the main content. It stops at the search bar when resizing the browswer, but I would like it to stop when it meets the buttons.

As you will see from the block of code snippets in the JSbin link, I have an issue with the footer.

Current HTML + CSS files and output: JSBin

*{
    margin: 0px;
    padding: 0px;
}
html, body {
    height: 100%;  
}

#container {
    min-height:100%;
    position:relative;

}

a:visited{
    color: #609;
}

/* ----- Navigation Styling ----- */

#nav {
    display: flex;
    border: 10px solid  goldenrod;               /*Colourful Borders*/
    min-height:9vh;
    justify-content:flex-end;
    align-items: baseline;
    background:#ff0;
    padding:10px;
}

/*Nav Content*/

/* ----- Center Styling ----- */

#center {
    width: 100%;
    background-color: white;
    min-height:10vh;     
}

.ctr_img {
    height: 92px;
    width: 272x;
    padding-top: 20px;
    
}
.ctr_img:hover {
    -webkit-filter: invert(100%);
}

.img_mic {
    padding: 0 8px;
    float: right;
    display:inline-block;
    top: -30px;
    position: relative;
}

.srch_bx {
    border-style: hidden;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.08);
    max-width: 40%;
    min-height: 40px;
}

.srch_in {
    width: 100%;
    border-radius: 2px;
    border: none;
    overflow: auto;
    outline: none;
    left: 0px;
    background: url(data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw%3D%3D) transparent;
    font: 16px arial,sans-serif;
    display: inline-block;
    text-align: start;
}

.mic_set {
    background-size: 30px 30px;
    height: 100%;
    width: 26px;
}

.btn_sbmt {
    padding: 20px 50%;
    min-height: 20px;
    display: flex;
    justify-content: center;
}

.btn_srch, .btn_lcky {
    background-color: #f2f2f2;
    border: 1px solid #f2f2f2;
    border-radius: 2px;
    color: #757575;
    font-family: arial,sans-serif;
    font-size: 1vw;
    font-weight: bold;
    margin: 11px 4px;
    padding: 0 16px;
    height: 36px;
}
    
.lang_diff{
    max-height: 28px;
    font-size: 0.9vw;
    margin-bottom: 24px;
    font-family: arial,sans-serif;
}

/* Footer Styling */

#footer {
    position:absolute;
    bottom:0;
    height: 5.2em; /* Height of the footer */
    width: 100%;
    min-height: 10vh;
    background-color: #f2f2f2;
    line-height: 40px; /*Specifies the line height.*/
    min-width: 400px;


}

.ctry {
    display: flex;
    margin-left: 30px;
    text-align: left;
    color: rgba(0,0,0,.54);
    border-top: 1px solid #e4e4e4;
    max-width: 150px;
}

.ctry_ftr {
    font-size: 1vw;
}

.opt_ftr {
    display: flex;
    justify-content:space-between;
    border:  1px solid #e4e4e4;
}

span.blft_ftr a, span.brght_ftr a, span.brght_stg a {
    text-decoration: none;
    color: #666;
    margin-left: 16px;
    font-size: 1vw;
}

.brght_ftr{
    margin-right: 30px;
    float: right;
}

.adv_ftr {
    padding: 0 16px;
    text-decoration: none;
    display: inline-block;
}



    
        Testing Ground
        
        
        
        
    
      
         
            
                
                Navigation Bar Content 
            
            
                
                    
                
                
                    
                        
                            
                        
                        
                            
                                
                            
                        
                    
                
                
                    
                        
                        
                    
                
                
                    Links:
                    Link1
                    Link2
                    Link3
                    Link4
                    Link5
                
            
            
                
                    
                        First half of a footer 
                    
                
                
                    
                        Footer Link 1
                        Footer Link 2
                        Footer Link 3
                    
                    
                        Footer Link 4
                        Footer Link 5

Visited Websites

tao · Accepted Answer

:)

Congratulations, first of all, for following the rules of asking on SO.

Your problem comes from placing your footer out of document flow (position:absolute). It looks like you want it placed in document flow. So change position:absolute into position:relative (or static).

To keep it at the bottom of the screen at all times, adjust your #container to display:flex;flex-direction:column;min-height:100vh and make #center grow:

#footer {
  position:static; /* this is default value of position
                    * so you could just remove `position:absolute`
                    * from your code.
                    */
}
#container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
#center {
  flex-grow: 1;
}

See it working:

* {
  margin: 0px;
  padding: 0px;
}

html,
body {
  height: 100%;
}

#container {
  min-height: 100%;
  position: relative;
}

a:visited {
  color: #609;
}


/* ----- Navigation Styling ----- */

#nav {
  display: flex;
  border: 10px solid goldenrod;
  /*Colourful Borders*/
  min-height: 9vh;
  justify-content: flex-end;
  align-items: baseline;
  background: #ff0;
  padding: 10px;
}


/*Nav Content*/


/* ----- Center Styling ----- */

#center {
  width: 100%;
  background-color: white;
  min-height: 10vh;
}

.ctr_img {
  height: 92px;
  width: 272x;
  padding-top: 20px;
}

.ctr_img:hover {
  -webkit-filter: invert(100%);
}

.img_mic {
  padding: 0 8px;
  float: right;
  display: inline-block;
  top: -30px;
  position: relative;
}

.srch_bx {
  border-style: hidden;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
  max-width: 40%;
  min-height: 40px;
}

.srch_in {
  width: 100%;
  border-radius: 2px;
  border: none;
  overflow: auto;
  outline: none;
  left: 0px;
  background: url(data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw%3D%3D) transparent;
  font: 16px arial, sans-serif;
  display: inline-block;
  text-align: start;
}

.mic_set {
  background-size: 30px 30px;
  height: 100%;
  width: 26px;
}

.btn_sbmt {
  padding: 20px 50%;
  min-height: 20px;
  display: flex;
  justify-content: center;
}

.btn_srch,
.btn_lcky {
  background-color: #f2f2f2;
  border: 1px solid #f2f2f2;
  border-radius: 2px;
  color: #757575;
  font-family: arial, sans-serif;
  font-size: 1vw;
  font-weight: bold;
  margin: 11px 4px;
  padding: 0 16px;
  height: 36px;
}

.lang_diff {
  max-height: 28px;
  font-size: 0.9vw;
  margin-bottom: 24px;
  font-family: arial, sans-serif;
}


/* Footer Styling */

#footer {
  /* position: absolute; 
     bottom: 0; */
  height: 5.2em;
  /* Height of the footer */
  width: 100%;
  min-height: 10vh;
  background-color: #f2f2f2;
  line-height: 40px;
  /*Specifies the line height.*/
  min-width: 400px;
}

.ctry {
  display: flex;
  margin-left: 30px;
  text-align: left;
  color: rgba(0, 0, 0, .54);
  border-top: 1px solid #e4e4e4;
  max-width: 150px;
}

.ctry_ftr {
  font-size: 1vw;
}

.opt_ftr {
  display: flex;
  justify-content: space-between;
  border: 1px solid #e4e4e4;
}

span.blft_ftr a,
span.brght_ftr a,
span.brght_stg a {
  text-decoration: none;
  color: #666;
  margin-left: 16px;
  font-size: 1vw;
}

.brght_ftr {
  margin-right: 30px;
  float: right;
}

.adv_ftr {
  padding: 0 16px;
  text-decoration: none;
  display: inline-block;
}

#footer {
  line-height: 2.42em;
}
#container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

#center {
  flex-grow: 1;
}


  
  
    
    Navigation Bar Content
  
  
    
      
    
    
      
        
          
        
        
          
            
          
        
      
    
    
      
        
        
      
    
    
      Links:
      Link1
      Link2
      Link3
      Link4
      Link5
    
  
  
    
      
                        First half of a footer 
                    
    
    
      
                        Footer Link 1
                        Footer Link 2
                        Footer Link 3
                    
      
                        Footer Link 4
                        Footer Link 5

Another minor issue which needed addressing was using line-height expressed in px for #footer while its height was expressed in em, causing the page to develop a vertical scrollbar. line-height:2.42em fixes it.

On a different note, it would be unfair of me to give you this answer without mentioning the major accessibility problem your example has from lowering font-size on narrow devices. Try opening the example page on any mobile and you'll understand what I mean. At all times, elements in your page should keep a font-size allowing users to read.

The main purpose of web pages is to present content. If you present the content in a form disabling user ability to receive the message, your page does not perform its function.

Responsive footer displayed over parts of content when shrinking browser

Implementation and Issue

Implementation

Issue

Visited Websites

Answers (2)

Related Questions