Add a Footer DIV and Header DIV to my current CSS Flexbox Layout

Question

Below is the CSS FLexbox layout I am working on. A live example is here as well as on this CodePen which is constantly updated: http://codepen.io/jasondavis/pen/OWbXNB?editors=1100

I need to add 2 DIV's to the layout and need help getting them positioned where I need them.

Add a header DIV above the right content panel
Add a Form Footer DIV like the current wrapper Footer with save and reset buttons along with saving indicator at the bottom of the Right Sidebar
Lastly I need to remove the current footer, so basdically the current footer just needs to be moved to the right sidebar.

So far I have tried multiple Flexbox CSS properties to try and get it into the desired positions with no luck so far.

This image shows what I need better...

Demo

.wrapper {
  border: 1px solid #D7DBDD;
  margin-bottom: 100px;
  max-width: 1076px;
}
.button {
  padding: 5px 15px;
  color: #FFF;
  background-color: #4EBBE4;
  border: 1px solid #16A2D7;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  font-family: Raleway, Helvetica, sans-serif;
}
.siteHeader {
  /**
   * Lay out the children of this container with
   * flexbox, which is horizontal by default.
   */
  display: flex;
  /**
   * Make the container put as much space as possible
   * between its children, with the children at either
   * end laying flush against the container's edges.
   */
  justify-content: space-between;
  padding: 10px;
  background-color: #56727C;
}
.siteHeader__section {
  /**
     * Lay out the children of this container with
     * flexbox.
     */
  display: flex;
  /**
     * Align the children in the center, along
     * the main axis. By default the children will
     * align along their top edges.
     */
  align-items: center;
}
.siteHeader__item {
  padding: 5px 15px;
  font-size: 12px;
}
.siteHeader__item + .siteHeader__item {
  margin-left: 5px;
}
.siteHeader__item.is-site-header-item-selected {
  color: #FFFFFF;
  background-color: #415F69;
  border-radius: 4px;
}
.siteHeaderLogo {
  font-size: 20px;
  line-height: 0;
  color: white;
}
.siteHeaderButton {
  cursor: pointer;
  color: #D9E9EF;
}
.container {
  display: flex;
  flex-direction: row;
}
main {
  display: flex;
  width: 100%;
}
.sideBar {
  /**
   * This container orders items according to flexbox
   * rules. By default, this would arrange its children
   * horizontally. However, the next property...
   */
  display: flex;
  /**
   * ...sets the main axis to be vertical instead of
   * horizontal, so now the children are laid out
   * vertically, from top to bottom.
   */
  flex-direction: column;
  /**
   * It will also put as much space as possible
   * between its children, with the children at either end
   * laying flush against the container's edges.
   */
  justify-content: space-between;
  height: auto;
  width: 150px;
  background-color: #FCFDFD;
  padding: 10px;
}
.sideBar-left {
  border-right: 1px solid #D7DBDD;
}
.sideBar-right {
  border-left: 1px solid #D7DBDD;
  width: 750px;
}
.sideBar__item {
  cursor: pointer;
  padding: 5px 10px;
  color: #16A2D7;
  font-size: 12px;
}
.sideBar__item.is-side-bar-item-selected {
  background-color: #EEF3F5;
  border-radius: 4px;
}
.formFooter {
  /**
   * Lay out the children of this container with
   * flexbox, which is horizontal by default.
   */
  display: flex;
  /**
   * Make the container put as much space as possible
   * between its children, with the children at either
   * end laying flush against the container's edges.
   */
  justify-content: space-between;
  /**
   * Align the children in the center, along
   * the main axis, which is horizontal in this case.
   */
  align-items: center;
  border-top: 1px solid #D7DBDD;
  padding: 10px;
}
.formFooter__section {
  /**
     * This container orders items horizontally.
     */
  display: flex;
  /**
     * It aligns them vertically in the center.
     */
  align-items: center;
}
.formFooter__item + .formFooter__item {
  margin-left: 5px;
}
.formFooterFeedback {
  color: #86969C;
  font-size: 12px;
  line-height: 0;
}
.formFooterSpinner {
  animation: formFooterSpinner 1s infinite steps(8, end);
}
@keyframes formFooterSpinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.button--clear {
  color: #16A2D7;
  background-color: #FFFFFF;
  border: 1px solid #FFFFFF;
}
.centeredPrompt {
  /**
   * Lay out the children of this container with
   * flexbox.
   */
  display: flex;
  /**
   * Rotate the main axis so that the children
   * are laid out vertically, the same as in the
   * above "Side bar" example.
   */
  flex-direction: column;
  /**
   * Instead of pushing the children apart, as in
   * previous examples, we will group them together
   * in the center of their container.
   */
  justify-content: center;
  /**
   * Align the children in the center, along
   * the main axis. Because the direction is
   * "column" this has a similar effect as setting
   * text-align: center.
   */
  align-items: center;
  min-height: 300px;
  padding: 10px;
  width: 100%;
}
.centeredPrompt__item + .centeredPrompt__item {
  margin-top: 5px;
}
.centeredPromptIcon {
  font-size: 60px;
  line-height: 0;
}
.centeredPromptLabel {
  color: #86969C;
  font-size: 30px;
  font-weight: 700;
  text-align: center;
}
.centeredPromptDetails {
  color: #86969C;
  font-size: 16px;
  margin-bottom: 10px;
  text-align: center;
}
.icon {
  color: #BCD2DA;
}
.gallery {
  /**
   * Lay out the children of this container with
   * flexbox, which is horizontal by default.
   */
  display: flex;
  /**
   * Allow the children to wrap to the next "row",
   * instead of trying to squeeze them all into
   * a single row.
   */
  flex-wrap: wrap;
  width: 100%;
  padding: 5px;
}
.photo {
  display: flex;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -ms-flex-align: end;
  align-items: flex-end;
  width: 145px;
  margin: 5px;
  padding: 5px 10px;
  font-size: 18px;
  font-weight: 700;
  text-shadow: 0 2px 3px rgba(0, 0, 0, .5);
  color: #FFF;
  background-size: cover;
  background-position: center;
  border-radius: 4px;
  height: 130px;
  opacity: 1;
  border: 4px solid #ffffff;
  cursor: pointer;
}
.photo.selected,
.photo:hover {
  opacity: 0.3;
  border: 4px solid #F44336;
}
.photo1 {
  background-image: url('http://www.flexboxpatterns.com/images/dog_2.jpg');
}
.photo2 {
  background-image: url('http://www.flexboxpatterns.com/images/dog_2.jpg');
}
.photo3 {
  background-image: url('http://www.flexboxpatterns.com/images/dog_3.jpg');
}
.photo4 {
  background-image: url('http://www.flexboxpatterns.com/images/dog_4.jpg');
}
.photo5 {
  background-image: url('http://www.flexboxpatterns.com/images/dog_5.jpg');
}
.photo6 {
  background-image: url('http://www.flexboxpatterns.com/images/dog_1.jpg');
}
.photo7 {
  background-image: url('http://www.flexboxpatterns.com/images/dog_2.jpg');
}
.photo8 {
  background-image: url('http://www.flexboxpatterns.com/images/dog_3.jpg');
}
.photo9 {
  background-image: url('http://www.flexboxpatterns.com/images/dog_4.jpg');
}
.photo10 {
  background-image: url('http://www.flexboxpatterns.com/images/dog_5.jpg');
}


  
  
    
    
      
        
      
      Inbox
      Sent
      Trash
    
    
    
      Settings
      Log out
    
  
  


  

    
    
      
      
        Inbox
        Contacts
        Account
      
      
      
        Change theme
        Legal
      
    
    


    
      
      
      
        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
      
      


    
    

    
    

      Form fields will be here loaded with Data from the selected image in the left panel
      

    
    
  


  
  
    
    
      
         Saving...
      
    
    
    
      Reset
      Save

haxxxton · Accepted Answer

NOTE: This solution assumes that the toolbars arent going to be changing height on-the-fly.

The trick here is to apply padding to a position:relative; container, consistent with the sizing of a position:absolute; toolbar. Because it is likely you're going to be using the element's formFooter and main again, we will use utility classes to indicate that they have toolbars. These utility classes will contain the information about the padding and, in the case of the formFooter, extend their behaviour when a child of the utility class.

CSS

main.with-header{
  padding-top:50px;
  position:relative;
}
.gallery--header{
  height:50px;
  top:0;
  left:0;
  right:0;
  background-color:blue;
  position:absolute;
}
.sideBar.sideBar-with-footer{
  position:relative;
  padding-bottom:50px;
}
.sideBar.sideBar-with-footer .formFooter{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
}

HTML


    
    
        
        
            
                
            
            Inbox
            Sent
            Trash
        
        
        
            Settings
            Log out
        
    
    

    

        
        
            
            
                Inbox
                Contacts
                Account
            
            
            
                Change theme
                Legal
            
        
        

        
            
                Gallery Header
            
            
            
            
                1
                2
                3
                4
                5
                6
                7
                8
                9
                10
            
            

        
        

        
        
            
            
                
                
                    
                         Saving...
                    
                
                
                
                    Reset
                    Save

CODEPEN

Add a Footer DIV and Header DIV to my current CSS Flexbox Layout

Demo

Answers (1)

Related Questions