Floating multiple divs in one row

I'm trying to show 4 widgets next to each other in a WordPress footer. I added into functions.php and footer.php files, so that the widget-content gets loaded.

But I'm unsure on how to display the widgets next to each other and starting at the same position as the header content, like in regular 4-column footer WordPress themes.

After a lot of tries, I managed to show them all in one row. left- & right-margins dont work anymore.

enter image description here

The css part looks like this:

.widgetfooter {
            margin-left: auto;
            margin-right: auto;
            display: flex;
            float: left;
            width: 15%;
            max-width: 1200px;
}

I includes the widget into the footer.php file like this:

<?php if ( is_active_sidebar( 'footer-sidebar1' ) ) : ?>
    <div class="footer-widget-area" >
        <?php dynamic_sidebar( 'footer-sidebar1' ); ?>
    </div>
<?php endif; ?>

In the functions.php:

register_sidebar( array(   
    'name' => __( 'Footer Widget Area1', 'scentchild' ),
    'id' => 'footer-sidebar1',
    'description' => __( 'Appears on the footer, which has its own widgets', 'footer-sidebar1' ),
    'before_widget' => '<div id="%1$s" class="widgetfooter">',
    'after_widget' => '</div>',
    'before_title' => '<h3 class="widget-title">',
    'after_title' => '</h3>',
) );

Can somebody help me out with the css, please?

1 answer

  • answered 2018-04-14 15:30 Andrei Gheorghiu

    Structure:

    grandparent
      parent 
        child
        child
        child
        child
    

    Float (in the middle):

    grandparent { 
      text-align:center;
    }
    parent {
      margin: 0 auto;
      max-width: /* desired content width, in px, according to theme
                  * mind responsiveness here...
                  */
    }
    child {
      margin: 0; 
      display: inline-block; 
      width: 25%; 
      float: left;
    }
    

    Flex

    (preferred, as you have more alignment options, especially if your children are smaller than parent available space and you want them to evenly distribute. It also allows vertical alignment - read more on flex if interested):

    grandparent, parent { 
      display:flex; 
      justify-content: center; /* horizontal alignment, 
                                * if flex-direction is row (default) 
                                */
    }
    child {
      flex: 0 0 25%;
    }
    /* optional: */
    parent {
      max-width: ... /* desired max-width here */ 
      align-items: center; /* vertical alignment */
    }
    

    Both of the above work if none of the rules are overridden by other rules. So you'd need to replace grandparent, parent and child with appropriate selectors.

    You'll also need to specify rules for how to display the widgets at lower screen widths, inside @media queries, tuned in with your theme's responsiveness breakpoints.