CSS issue: How to align
elements (
, header, footer, and body) vertically with responsive web design?

Question

I am trying to align the header, body, footer, and div's vertically in one column such that the web design is responsive (looks good on different screen sizes): ConfluenceInfinite.org or see dev subdomain below.

For people who are new to html and css (like me) this is a pure css/html implementation/markup including the menu.

You can go to my development subdomain to see the issue first-hand: my development subdomain: dev.confluenceinfinite.org

I have done LOT of research on this. Here is some of that research:

I don't believe this question/answer applies to my issue because my issue is vertical alignment (correct me if I am wrong). It uses fixed px values, which won't work for cell phones, and I tried the display: inline-block, but it didn't work. Here is the link to the SO question: click here

This question/answer (which got via searching OS tag vertical-alignment) also has a fixed width that I do not want to do because I want the

s to be fully dynamic for all screen sizes: click here

I don't think this helps either because it aligns elements within a container, but I want the containers/div's aligned. Am I missing something?: click here

This solution has the correct title/heading, but aligns things on the "right" vertically, which don't seem applicable to my issue: Click here

I used to use a website or program that allowed a developer to test/visualize website design on multiple screen sizes. I can no longer find that site. If you know the location of that site, please comment or put it in your answer. Thanks!

Here is my index/home page html markup:



  
    
    
    
    
    
    
    
    CII - Optimizing change for the benefit of all.
  
  
    
      
      
        
        
          
        
        
          
            
              
                
                  Home
                
                
                  Team
                
                
                  About Us
                
                
                  Definitions
                
                
                  Have Doubts?
                
                
                  Contact Us
                
                
                  Donate Today
                
                
                  Get Involved
                
                
                  The Movement
                
                
                  c11
                
                
                  The CEO's Story
                
                
                  News
                
              
            
          
        
      
      
      
      -------------------- SITE UNDER CONSTRUCTION -------------------- this is a test to see if the right side of this text is dropping off the page or not it has to be very long to test the issue
      
    
    
      
      
        
      
      
      
        
        
          

          

          Why doesn't the system favor "the good guy"? Let's rig the system in your
          favor.
          We know how to fund the "unicorn" and tame the "machine" whilst compelling
          people to change how they think, work, and have fun so it benefits good people, without breaking any laws. Truly.
          

          The world is focused on money, getting people’s attention, and offering goods and service at an equilibrium price
          where both the lowest financial cost and highest financial gain are at. CII is focused on destroying this “machine”
          and system of values in a legal, ethical, and morally sound way. CII has created technology that will facilitate,
          perpetuate, and maintain the new system by optimizing change for the benefit of all that will connect good people,
          produce optimal “humanitarian value” output, and simultaneously destroy the old system over time. CII will facilitate
          this with the help of good people in a way that will protect individuals and their livelihood achieving a better system
          for society.
          Read More this is a test to see if the right side of this text is dropping off the page or not it has to be very long to test the issue
        
        
      
    
    
    
      
        
          Go Back to Top of Page - this is a test to see if the right side of this text is dropping off the page or not it has to be very long to test the issue
        
      
      
        
          
            Get to Know Us
            
              
                Careers & Volunteer
              
              
                Blog
              
              
                About CII
              
              
                Sustainability
              
              
                News & Press Center
              
              
                Donor Relations
              
            
          
          
          
            Get Involved with CII's Platform
            
              
                Become an Affiliate
              
              
                Become a Strategic Partner
              
              
                Offer Your Product or Service/"Advertise"
              
              
                Submit an Ideology for Consideration
              
              
                Submit an Idea for Consideration
              
              
                Submit a Core Value for Consideration
              
              
                Submit a Concept for Consideration
              
              
                Submit a Core Change for Consideration
              
              
                Submit Anything Else
              
            
          
          
          
            Connect with People
            
              
                The Movement
              
              
                c11
              
              
                CII
              
            
          
          
          
            Help People
            
              
                c11 - this is a test to see if the right side of this text is dropping off the page or not it has to be very long to test the issue
              
              
                Report Something
              
              
                Pay Something Forward
              
              
                Report a "Do-gooder"
              
              
                Report a High Humanitarian Value Output Organization
              
              
                Report a High Humanitarian Value Output Business
              
              
                Report a High Humanitarian Value Output nonprofit
              
              
                Report a High Humanitarian Value Output Government/Country
              
              
                Help

Here is the style.css:

/* imports see https://medium.com/@elad/normalize-css-or-css-reset-9d75175c5d1e#_=_    */
@import "resets/normalize.css";
@import "resets/reset.local.css";
@import "resets/typography.css";

/* CORE STYLES */
:root {
  --primary-color: rgba(255, 255, 255, 0.75);
  --overlay-color: rgba(24, 39, 51 , 0.85);
  --menu-speed: 0.75s;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

body {
  font-family: 'Roboto', sans-serif;
  line-height: 1.4;
}

header {

    transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
    background: var(--cds-ui-background, #fff);
    border: none;
    max-width: 100vw; /*99rem;*/
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 1px;
    position: relative;
    z-index: 5999;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    display: flex;
    align-items: center;
    height: 3rem;
    background-color: #161616;
    border-bottom: 1px solid #393939;
    color: white;
    text-align: center;
    display: block;
}

#HeaderText {
        margin-bottom: auto;
        margin-top: auto;
        margin-left: 0;
        margin-right: 0;
        color: white;
        padding-top: 12px;
}

#SharePopup {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  width: 60px;
  /* height: 60px; */
  padding: 1rem;
  /* background: var(--primary-color); */
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: inherit;
  height: 3rem;
  color: white;
  text-align: right;
  cursor: pointer;
  background: #06D85F;
  -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    
}
#SharePopup:hover {
  background: white;
  color: black;
}

h1 {
        line-height: 35px;
        font-size: 23px;
        padding-bottom: 0;
        padding-top: 15px;
        text-align: center;
}
h2 {
    line-height: 35px;
    font-size: 23px;
    padding-bottom: 0;
    padding-top: 0px;
    text-align: left;
}
.container {
  max-width: 100vw;
  margin: auto;
  overflow: hidden;
  
  /*removed on 2020-09-28 to get text to spread accross screen more and not be so scrunched/narrow in the div/tall etc*/
  /* padding: 0 3rem; */
}

.showcase {
  background: var(--primary-color);
  color: #fff;
  height: 100vh;
  position: relative;
}

.showcase:before {
  content: '';
  /* background: url('https://images.pexels.com/photos/533923/pexels-photo-533923.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260') no-repeat center center/cover;*/
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
}

.showcase .showcase-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 80%;
}

.showcase h1 {
  font-size: 4rem;
  padding: 15px;
}

.showcase p {
  font-size: 1.3rem;
  color: black;
}

.site-wrap {
  min-width: 100vw;
  min-height: 100vh;
  /* background-color: #ffffff; /* white */ 
  /* position: relative; */
  top: 0;
  bottom: 100%;
  left: 0;
  z-index: 1;
  padding: 4em; /*spaces out content from hamburger*/
}

.site-wrap img {
    max-width: 100vw; /*60% */
    max-height: 45vh; /*60% */
    display: block;
  margin-left: auto;
  margin-right: auto;
}
.site-wrap p {
        padding: 5px;
}
.site-wrap figure {
    align-items: center;
}
.site-wrap ul
        , li {
    padding: 5px;
    margin-left: 5px; 
    padding-left: 15px;
}


.container.showcase-inner .btn {
  display: inline-block;
  border: none;
  background: white; /*var(--secondary-color);*/
  color: black;
  padding: 0.75rem 1.5rem;
  margin-top: 1rem;
  transition: opacity 1s ease-in-out;
  text-decoration: none;
   border:1px solid black;
   border-radius: 25px;
   
   /*fixmeben*/
    text-align: center;
   display: block;
   
}

.btn:hover {
  opacity: 0.7;
  background: gray;
}

/* footer stuff */

#navFooter.navLeftFooter .navFooterBackToTop .navFooterBackToTopText {
    color: white;
}
#navFooter .navFooterBackToTop span {
    display: block;
    text-align: center;
    color: #111;
    padding: 15px 0;
    line-height: 19px;
    font-size: 13px;
}
#navFooter a, #navFooter span {
    font-family: inherit;
    white-space: normal;
}

#navFooter a:link, #navFooter a:visited {
    font-family: inherit;
    color: #004B91;
    text-decoration: none;
}
a, a:active, a:link, a:visited {
    text-decoration: none;
    color: #0066c0;
}
user agent stylesheet
a:-webkit-any-link {
    color: -webkit-link;
    cursor: pointer;
}
.a-ember body {
    font-family: Arial,sans-serif;
}
body {
    color: #0F1111;
}
body {
    font-size: 13px;
    line-height: 19px;
    font-family: Arial,sans-serif;
}
html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
}
#navFooter.navLeftFooter .navFooterBackToTop {
    margin-bottom: 40px;
    background-color: gray;
}
#navFooter .navFooterBackToTop {
    background-color: #f3f3f3;
    margin-bottom: 25px;
}
/* * { */
    /* -moz-box-sizing: border-box; */
    /* -webkit-box-sizing: border-box; */
    /* box-sizing: border-box; */
/* } */
user agent stylesheet
div {
    display: block;
}
#navFooter a:link, #navFooter a:visited {
    font-family: inherit;
    color: #004B91;
    text-decoration: none;
}
#navFooter a, #navFooter span {
    font-family: inherit;
    white-space: normal;
}
a, a:active, a:link, a:visited {
    text-decoration: none;
    color: #0066c0;
}
user agent stylesheet
a:-webkit-any-link {
    color: -webkit-link;
    cursor: pointer;
}

/* body { */
    /* color: #0F1111; */
/* } */
/* body { */
    /* font-size: 13px; */
    /* line-height: 19px; */
    /* font-family: Arial,sans-serif; */
/* } */
/* html { */
    /* font-size: 100%; */
    /* -webkit-text-size-adjust: 100%; */
/* } */
 /* start footer table 1 starting with Get to know us */

#navFooter .navAccessibility.navFooterVerticalColumn {
    display: table;
    margin: 0 auto;
}

#navFooter.navLeftFooter .navFooterVerticalColumn {
    /* changed 2020-09-28 18:10 */
    max-width: 100vw;
    background: rgb(105,105,105);
}
#navFooter .navAccessibility.navFooterVerticalRow {
    display: table-row;
}
#navFooter .navAccessibility.navFooterLinkCol {
    display: table-cell;
    padding: 0 10px;
}
#navFooter .navAccessibility.navFooterLinkCol {
    line-height: 120%;
}

.navFooterLinkCol {
    color: #333;
    vertical-align: top;
}

#navFooter.navLeftFooter .navFooterColHead {
    font-weight: 700;
}
.navFooterColHead {
    font-family: inherit;
    color: white;
    font-size: 16px;
    margin: 6px 0 14px 0;
    white-space: nowrap;
}
.navFooterLinkCol ul {
    padding: 0;
    margin: 0;
}
.a-ordered-list, .a-unordered-list, ol, ul {
    padding: 0;
}
.a-unordered-list, ul {
    margin: 0 0 0 18px;
    color: #111;
}
#navFooter.navLeftFooter .navFooterLinkCol ul li {
    margin: 0 0 10px;
}
.navFooterLinkCol ul li {
    list-style-type: none;
    white-space: nowrap;
    margin: 0 0 8px 0;
}

.a-ordered-list li, .a-unordered-list li, ol li, ul li {
    word-wrap: break-word;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 25px;
    padding: 0px;
}
.a-unordered-list li, ul li {
    list-style: disc;
}
li {
    display: list-item;
    text-align: -webkit-match-parent;
}

.a-unordered-list, ul {
    margin: 0 0 0 18px;
    color: #111;
}

#navFooter .navAccessibility.navFooterLinkCol {
    line-height: 120%;
}
.navFooterLinkCol {
    color: #333;
    vertical-align: top;
}
#navFooter.navLeftFooter a.nav_a:link, #navFooter.navLeftFooter a.nav_a:visited, #navFooter.navLeftFooter li.nav_a_carat span.nav_a_carat {
    color: #DDD;
}
#navFooter a:link, #navFooter a:visited {
    font-family: inherit;
    color: #004B91;
    text-decoration: none;
}
#navFooter a, #navFooter span {
    font-family: inherit;
    white-space: normal;
}
a, a:active, a:link, a:visited {
    text-decoration: none;
    color: #0066c0;
}

/* working on navFooterColSpacerInner */
#navFooter .navAccessibility.navFooterColSpacerInner, #navFooter .navAccessibility.navFooterLinkCol {
    display: table-cell;
    padding: 0 5px;
}
.navFooterVerticalColumn .navFooterColSpacerInner {
    width: 5%;
    padding: 0 15px;
}
#navFooter.navLeftFooter .nav-footer-line {
    border-top: 1px solid #3a4553;
    margin-top: 40px;
}
#navFooter.navLeftFooter div.navFooterLine {
/* working */   
    max-width: 25%;
}
#navFooter.navLeftFooter .navFooterLinkLine {
    margin: 10px auto;
}
#navFooter.navLeftFooter .navFooterLogoLine, #navFooter.navLeftFooter .navFooterPadItemLine {
    text-align: center;
    max-width: 100vw;
    margin: 30px auto 15px;
}
div.navFooterLine {
    font-family: inherit;
    color: #767676;
    font-size: 11px;
    text-align: center;
    line-height: 18px;
    white-space: nowrap;
}
.navFooterLinkLine {
    margin: 0 8px 0 8px;
}
#navFooter a, #navFooter span {
    font-family: inherit;
    white-space: normal;
}
.navFooterPadItemLine a, .navFooterPadItemLine span {
    padding: 0 .6em;
}
.navFooterLinkLine span, .navFooterLinkLine ul {
    list-style-type: none;
    display: inline-block;
    padding: 0;
    margin: 0;
}
#navFooter.navLeftFooter div.navFooterLine {
    font-size: 12px;
}
#navFooter.navLeftFooter .navFooterLogoLine, #navFooter.navLeftFooter .navFooterPadItemLine {
    text-align: center;
    max-width: 100vw;
    margin: 30px auto 15px;
}
div.navFooterLogoLine {
    margin: 30px 8px 4px 8px;
    font-size: 1px;
    line-height: 0;
}
div.navFooterLine {
    font-family: inherit;
    color: #767676;
    font-size: 11px;
    text-align: center;
    line-height: 18px;
    white-space: nowrap;
}
a, a:active, a:link, a:visited {
    text-decoration: none;
    color: #0066c0;
}
#navFooter .nav-logo-base {
    background-position: -10px -90px;
    width: 76px;
    height: 23px;
    margin: 0 auto;
    background: url('/images/CII_Logo.png');
}
.nav-globe .nav-globe, .nav-globe .nav-icon {
    
    /* background-color: black;  */
}

#FigLogoTiny {
    /*working*/
    /* max-width: 5%; */
    max-height: 5%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    
    /* position: absolute; */
    /* bottom: 100%; */
    /* right: 100%; */
    
}

I am happy to include the imports if that is helpful. I assume you can see that by inspecting the website directly, but I am happy to edit this question to include the import css. Trying to keep the question as organized and short as possible.

I will be watching this question to see if anyone needs anything further to answer it or provide any assistance at all. I will edit the question as soon as possible if necessary. Thanks!

PS - I'm trying to make the solution/my website work across all browsers and all screen sizes without any scripts, if that is possible.

PSS - On a computer you have to size the window down to see the issue...that's what I did in the computer screenshot above to illustrate the issue.

EDIT-1: I should also state that the preferable responsiveness/dynamic/movement/etc. for the footer is to have a div column slide down below the other div columns if it doesn't fully fit on the page/isn't all visible to the user.

mountainclimber11 · Accepted Answer

Here is the simplest example I found to solve the footer issue. This allows the footer divs to come down and create a new row as the screen is resized. Its a bit over simplified, but easy to understand. Here is the code:







Flexible Boxes


  1
  2
  3  
  4
  5
  6  
  7
  8


text - XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX.

...it is a slight modification of this example: Click here

Rene van der Lende's comment contains the code I ended up using to solve the same issue as the code above (the footer) but with a more professional look...sort of. It has a bit more eye candy/more professional look, but is much more complex to understand for a beginner: Click Here

Here is the code from the link above, but you can see it in action in the link above:







Example for MadBoy










    
        headline
    
    
        
            
               
                interactive SVG
                
                    Lorem ipsum dolor sit amet, exerci dolorem est ad. Sumo rebum prompta vim ad. Legendos expetendis id sed. Ex ius quem accusamus, pri et
                        deleniti copiosae.
                
                footer
            
        
        
            
               
                subline
                
                    Lorem ipsum dolor sit amet, exerci dolorem est ad. Sumo rebum prompta vim ad. Legendos expetendis id sed. Ex ius quem accusamus, pri et
                        deleniti copiosae.
                
                footer
            
        
        
            
               
                subline
                
                    Lorem ipsum dolor sit amet, exerci dolorem est ad. Sumo rebum prompta vim ad. Legendos expetendis id sed. Ex ius quem accusamus, pri et
                        deleniti copiosae.
                
                footer
            
        
        
            
               
                subline
                
                    Lorem ipsum dolor sit amet, exerci dolorem est ad. Sumo rebum prompta vim ad. Legendos expetendis id sed. Ex ius quem accusamus, pri et
                        deleniti copiosae.
                
                footer
            
        
        
            
               
                subline
                
                    Lorem ipsum dolor sit amet, exerci dolorem est ad. Sumo rebum prompta vim ad. Legendos expetendis id sed. Ex ius quem accusamus, pri et
                        deleniti copiosae.
                
                footer
            
        
        
            
               
                subline
                
                    Lorem ipsum dolor sit amet, exerci dolorem est ad. Sumo rebum prompta vim ad. Legendos expetendis id sed. Ex ius quem accusamus, pri et
                        deleniti copiosae.
                
                footer
            
        
        
            
               
                subline
                
                    Lorem ipsum dolor sit amet, exerci dolorem est ad. Sumo rebum prompta vim ad. Legendos expetendis id sed. Ex ius quem accusamus, pri et
                        deleniti copiosae.
                
                footer
            
        
        
            
               
                subline
                
                    Lorem ipsum dolor sit amet, exerci dolorem est ad. Sumo rebum prompta vim ad. Legendos expetendis id sed. Ex ius quem accusamus, pri et
                        deleniti copiosae.
                
                footer
            
        
        
            
               
                subline
                
                    Lorem ipsum dolor sit amet, exerci dolorem est ad. Sumo rebum prompta vim ad. Legendos expetendis id sed. Ex ius quem accusamus, pri et
                        deleniti copiosae.
                
                footer
            
        
        
            
               
                subline
                
                    Lorem ipsum dolor sit amet, exerci dolorem est ad. Sumo rebum prompta vim ad. Legendos expetendis id sed. Ex ius quem accusamus, pri et
                        deleniti copiosae.
                
                footer

...please post a simpler solution that can be applied directly to my original question/code (not a simplified one) and I'll mark your answer as correct. Until then I think this is the best answer.

Pine Code answered the logo/header/image issue:

Replace:

.site-wrap img {
    max-width: 100vw;
    ...
}

...with:

.site-wrap img {
    max-width: 100%;
    ...
}

Thanks Pine code.

EDIT 1: Here is the code I actually ended up using for the footer, which was the difficult part. I ended up using the w3schools.com example mentioned above with some modifications, namely changing nowrap to wrap:

HTML:


    
      
        
          
            Go Back to Top of Page
          
        
        
          
            
              
            
          
          
        
        
        
          
            Get Involved with CII's Platform
            
              
                The Movement
              
              
                c11
              
              
                CII
              
              
                Report Something
              
              
                Pay Something Forward
              
              
                Report a "Do-gooder"
              
              
                Report a High Humanitarian Value Output Organization
              
              
                Report a High Humanitarian Value Output Business
              
              
                Report a High Humanitarian Value Output nonprofit
              
              
                Report a High Humanitarian Value Output Government/Country
              
              
                Help
              
            
          
          
            Get to Know Us
            
              
                Become an Affiliate
              
              
                Become a Strategic Partner
              
              
                Offer Your Product or Service/"Advertise"
              
              
                Submit an Ideology for Consideration
              
              
                Submit an Idea for Consideration
              
              
                Submit a Core Value for Consideration
              
              
                Submit a Concept for Consideration
              
              
                Submit a Core Change for Consideration
              
              
                Submit Anything Else
              
              
                Tactical Strategy
              
            
          
          
            Help Others
            
              
                Careers & Volunteering
              
              
                Blog
              
              
                About CII
              
              
                Sustainability
              
              
                News & Press Center
              
              
                Donor Relations
              
            
          
          
          
          
          
          
        
        
        © 2020, Confluence Infinite International NPO or its
        affiliates

CSS:

(My css is so overly complex right now I hit the SO character limit, so I only included the most critical part. For full css chat me or go to: confluenceinfinite.org and do an right-click > inspect.)

.flex-container {
  display: flex;
  flex-wrap: wrap;
  background-color: Gray;
}

.flex-container > div {
  background-color: #f1f1f1;
  width: 427px;
  margin: 11px;
  text-align: center;
  line-height: 1.75rem;
  font-size: 1rem;
  overflow-wrap: break-word;
  word-wrap: break-word;

 /* float: left; */
}

.flex-container > ul {
    list-style-type: none;
}

.flex-container > div > a:hover {
        text-decoration: underline;
        
}

CSS issue: How to align <div> elements (<div>, header, footer, and body) vertically with responsive web design?

Answers (2)

Related Questions

CSS issue: How to align &lt;div&gt; elements (&lt;div&gt;, header, footer, and body) vertically with responsive web design?

Answers (2)

Related Questions

CSS issue: How to align <div> elements (<div>, header, footer, and body) vertically with responsive web design?