Working with centering floated li elements with no width in CSS

Question

I'm trying to work with an issue I've had before with CSS with Wordpress and would like to get an extra few sets of eyes on it to see if in fact what I'm doing is the best way for it or is there is a better way.

I'm setting a social media section within my main

in the header and footer of my website. My "social media bar" is however not a set size as it is a wordpress website and there may a few more socialmedia buttons added to it. This is the basis of my code:

This is how it appears in my header and footer.

<li id="header-widget-area">
<ul class="icons-medium">

    <li class="site-icon"><a target="_blank" href="#">Icon 1</a></li>
    <li class="site-icon"><a target="_blank" href="#">Icon 2</a></li>
    <li class="site-icon"><a target="_blank" href="#">Icon 3</a></li>
    <li class="site-icon"><a target="_blank" href="#">Icon 4</a></li>
</ul>
</li>



#header-widget-area ul {
    float: right;
    padding: 0;
    width: 300px;
    border: 1px solid red;
}

#header-widget-area ul.icons-medium li, #footer-widget-area-right ul.icons-medium li {
    background: none repeat scroll 0 0 transparent;
    float: right;
    padding: 0;
    width: 60px;
    list-style-type: none;

}

My jsfiddle - http://jsfiddle.net/nejsgyp3/

I want to have it floated to the right to align with some boxes and content I have there for both my header and footer (easy peasy!) but then for media queries I'd like to have the element centered and social media icons inside to be centered as well. So I've done this but I still have to keep a width on this or it won't center.

Added slight modifications to CSS for this

#header-widget-area ul {
    float: none;
    padding: 0;
    width: 300px;
    border: 1px solid red;
    overflow:auto;
    margin: 0 auto;
}

#header-widget-area ul.icons-medium li, #footer-widget-area-right ul.icons-medium li {
    background: none repeat scroll 0 0 transparent;
    float: left;
    padding: 0;
    width: 60px;
    list-style-type: none;

}

My jsfiddle - http://jsfiddle.net/wswvokpu/

So my goal is to allow for more to be added but not have that extra space to the right in my media queries so this is properly centers. Also, is there a way for my "Icon 1" to remain positioned to the right in the media query? Or is the only way to do what I'm trying to do is to always have a set width and then when a new icon is added it would follow suit underneath as long as I keep the height auto? Which would then mean if a new icon was added to the header the height of the would expand thus pushing the box that is below it down?

Thanks in advance!

Upvotes: 0

Views: 57

Answer 1

I think I understand what you are asking. Does this look right to you?

http://jsfiddle.net/nejsgyp3/1/

I have given the list elements a width of 25% each, floated left with centered text. (if you plan on using borders you will also need to set box-sizing:border-box as well - with the various vendor prefixes).

I have also centered the UL which I believe you are trying to do in your media queries.

CSS:

@media only screen and (max-width:600px) {

    ul {
        list-style:none;
        padding:0px;
        margin:0px;
    }
    #header-widget-area ul {
        float: none;
        padding: 0;
        width: 300px;
        border: 1px solid red;
        margin:0 auto;
        list-style:none;
    }
    #header-widget-area ul:after {
        content: " ";
        display:block;
        height:0px;
        clear:both;
        float:none;

    }

    #header-widget-area ul.icons-medium li, #footer-widget-area-right ul.icons-medium li {
        background: none repeat scroll 0 0 transparent;
        float: left;
        padding: 0;
        width: 25%;
        list-style: none;
        text-align:center

    }

}