Thread: Footer Headach

    #1
  1. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2016
    Location
    Lakewood, WA
    Posts
    238
    Rep Power
    64

    Footer Headach


    I would like to build a footer structure something like this:
    Code:
    <footer class="footer">
         <div class="A"></div>
         <div class=B"></div>
         <div class="C"></div>
         <div class="D"></div>
         <div class="E"></div>
    </footer>
    Where:

    A) The footer expands to the full viewport whatever that may be (and contracts as well)
    B) DIV A spans the full width as well (or can if what's in it is that wide)
    C) DIV's B, C, and D are lined up in a row
    D) DIV E is like DIV A
    E) For "responsiveness", at a certain minimum width, I would use @media queries to reduce it all to a nice easy stack.

    But it's the wide layout that has me perplexed. I can get three div's to line up, but the outer footer tag has to expand with them because it has the background.

    Do I need another DIV to wrap around A though E for the overall background? Whatever holds the background has to get taller or shorter as content in B, C, and D expands and contracts.

    I'm not sure where to go. It's making my head hurt.

    See a sketch here => demo.png
  2. #2
  3. Impoverished Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,817
    Rep Power
    9646
    If you can set the widths for B, C, and D - maybe you have a fixed width, or maybe you can use 33% - then
    - A: width 100%
    - B/C/D: whatever width, float left
    - E: width 100%, clear both

    Another cooler option is flexbox: force full widths for A and E, widths 33% with equal weighting for B-D.
  4. #3
  5. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4308
    Originally Posted by requinix
    Another cooler option is flexbox: force full widths for A and E, widths 33% with equal weighting for B-D.
    Flex is great, but when you use it, you have to keep in mind that older browsers don't support it, especially when you use multiline Flex (e.g. not just a single row or column of elements in the Flex container).
  6. #4
  7. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2016
    Location
    Lakewood, WA
    Posts
    238
    Rep Power
    64
    I had forgotten about flex. How about mobile? How is mobile with flex? Last time I played with flex I thought it was awesome, is it worth browser sniffing and forking to different css based on ability to play nice with flex?

    I know what I'm putting into these empty boxes because it's my personal site. But it's part of a template system that I could reuse for other content.
    Last edited by Arty Zifferelli; January 17th, 2018 at 08:07 PM.
  8. #5
  9. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4308
    Have a look at the compatibility tables:
    https://caniuse.com/#search=flex
    https://developer.mozilla.org/en-US/..._compatibility

    User-agent browser sniffing should only be considered as a last resort after consulting an expert. Fortunately, @supports can be used for this, to use multiline Flex when it's available and inline-blocks otherwise:
    Code:
    .blocksWrap {w\ord-spacing:-.31em}
    :root .blocksWrap {letter-spacing:-.31em}
    html:not(:-webkit-any-link) .blocksWrap {word-spacing:normal}
    
    .blocksWrap .block {
    	word-spacing: normal;
    	letter-spacing: normal;
    	float: none;
    	display: inline-block;
    	vertical-align: top;
    	-webkit-box-sizing: border-box;
    	-moz-box-sizing: border-box;
    	box-sizing: border-box;
    }
    
    @supports (flex-wrap:wrap) {
    	.blocksWrap {
    		display: flex;
    		flex-wrap: wrap;
    		align-items: flex-start;
    	}
    }
  10. #6
  11. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2016
    Location
    Lakewood, WA
    Posts
    238
    Rep Power
    64
    For the benefit of others though I MAKE NO GUARANTEES!

    The CSS...
    Code:
    .footer_widget_wrapper {
      display: flex;  
      flex-flow: row wrap;
      background-image: url('https://*****/GrungeDark.png');
    }
    
    .footer_widget_wrapper > * {
      padding: 10px;
      flex: 1 100%;
    }
    
    .footer_widget_full_above {
      background: tomato;
    }
    
    .footer_widget_full_below {
      background: lightgreen;
    }
    
    .footer_widget_left {
      text-align: left;
      background: deepskyblue;
      width: 33.33% !important;
    }
    
    .footer_widget_middle {
      background: gold;
      width: 33.33% !important;
    }
    
    .footer_widget_right {
      text-align: right;
      background: hotpink;
      width: 33.33% !important;
    }
    
    @media all and (min-width: 600px) {
      .footer_widget { flex: 1 auto; }
    }
    
    @media all and (min-width: 800px) {
      .footer_widget_left    { flex: 3 0px; }
      .footer_widget_middle { order: 2; } 
      .footer_widget_left    { order: 1; }
      .footer_widget_right { order: 3; }
      .footer_widget_full_below  { order: 4; }
    }
    The HTML...
    PHP Code:
    <!-- Footer Widgets -->
    <div class="footer_widget_wrapper">
         <div class="footer_widget_full_above">  
              TOP  <?php if ( is_active_sidebar'footer_widget_full_above' ) ) {
              
    dynamic_sidebar'footer_widget_full_above' ); } ?>
         </div>
         <div class="footer_widget_left">
              LEFT  <?php if ( is_active_sidebar'footer_widget_left' ) ) {
              
    dynamic_sidebar'footer_widget_left' ); } ?>
         </div>
         <div class="footer_widget footer_widget_middle">
              MIDDLE <?php if ( is_active_sidebar'footer_widget_middle' ) ) {
              
    dynamic_sidebar'footer_widget_middle' ); } ?>
         </div>
         <div class="footer_widget footer_widget_right">
              RIGHT  <?php if ( is_active_sidebar'footer_widget_right' ) ) {
              
    dynamic_sidebar'footer_widget_right' ); } ?>
         </div>
         <div class="footer_widget_full_below">
              BOTTOM  <?php if ( is_active_sidebar'footer_widget_full_below' ) ) {
              
    dynamic_sidebar'footer_widget_full_below' ); } ?>
         </div>
    </div>
    <!-- End Footer Widgets -->
    This is obviously only the Flex, I will also have a non-flex fall-back, though it's probably unnecessary.

    Again, this works for me, others mileage may vary...
  12. #7
  13. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2016
    Location
    Lakewood, WA
    Posts
    238
    Rep Power
    64
    One thing I'm working on is the widths: the percentages don't seem to work.

IMN logo majestic logo threadwatch logo seochat tools logo