WordPress.org

Forums

[resolved] [closed] Twenty Eleven child theme CSS style 5 widgets to footer (2 posts)

  1. foodboy
    Member
    Posted 2 years ago #

    Hi

    This issue relates to my previous Topic I posted yesterday, adding five widgets to the footer of Twenty Eleven child theme cannot style them so they appear side by side across the footer

    http://wordpress.org/support/topic/css-style-five-footer-widgets-to-footer-twenty-eleven-child-theme?replies=14#post-3480847

    Alchymyth's solution form my previous topic improved the layout which is much better , however one and two are now stacked.

    #supplementary.four .widget-area {
    	float: left;
    	margin-right: 3.7%;
    	width: 22.18%;
    }
    #supplementary.four .widget-area + .widget-area + .widget-area + .widget-area {
    	margin-right: 0;
    }
    and
    #supplementary.five .widget-area {
    	float: left;
    	margin-right: 2.7%;
    	width: 17.78%;
    }
    #supplementary.five .widget-area + .widget-area + .widget-area + .widget-area + .widget-area {
    	margin-right: 0;
    }

    Produced the Result below

    one

    two

    three four five

    However still having issues getting them side by side below is the result I need across the footer

    one two three four five

    below is the CSS I have so far, does anyone know where I am going wrong? I keep reducing the width for .two and .three but one and two are stacked and three four and five display correctly side by side the class .five does get picked up by the switch statement and appears in firebug so the class .five is being used. I am currently using Alchymyth's solution for .five class see above

    Hope someone can help? Thanks in advance

    /* =Footer
    ----------------------------------------------- */

    #colophon {
    	clear: both;
    }
    #supplementary {
    	border-top: 1px solid #ddd;
    	padding: 1.625em 7.6%;
    	overflow: hidden;
    }
    
    /* Two Footer Widget Areas */
    #supplementary.two .widget-area {
    	float: left;
    	margin-right: 3.7%;
    	width: 18.62%;
    }
    #supplementary.two .widget-area + .widget-area {
    	margin-right: 0;
    }
    
    /* Three Footer Widget Areas */
    #supplementary.three .widget-area {
    	float: left;
    	margin-right: 3.7%;
    	width: 18.62%;
    }
    #supplementary.three .widget-area + .widget-area + .widget-area {
    	margin-right: 0;
    }
  2. foodboy
    Member
    Posted 2 years ago #

    I have managed to solve this issue by amending the following

    #supplementary.five .widget-area {
    	float: left;
    	margin-right: 2.7%;
    	width: 16.7%;
    }
    #supplementary.five .widget-area + .widget-area + .widget-area + .widget-area + .widget-area  + .widget-area{
    	margin-right: 0;
    }

    [duplicate - continue with http://wordpress.org/support/topic/css-style-five-footer-widgets-to-footer-twenty-eleven-child-theme?replies=15 ]

Topic Closed

This topic has been closed to new replies.

About this Topic