Ryan Ryan - 1 month ago 11
CSS Question

How to expand beyond parent width correctly?

I'm playing around with html/css again after an absence and have gotten myself stuck. I built a sticky footer style nav bar and want the sub links to be horizontal. The issue is the parent container contains their width. I can overcome this with negative left/right margins but that would require change anytime the amount or size of sub links change. I thought about just making it huge but that seems like a sloppy cheat and may be an issue when I get to media queries.

I considered making it position: absolute and float but those also seem like the wrong choice.

What do you consider the correct way to do this?
FIDDLE

nav{
height: 100px;
margin-bottom: 50px;
position: relative;
width: 100%;
}

nav > ul > li > ul {
margin: -150px -150px 0 -150px;
line-height: 50px;
}


I put in the negative margins to show a rough look at what I was trying.

Thanks.

Answer

Doing a bunch of reading last night, I found that I can't build CSS calculations based on children but only siblings. I did manage to get what I was going for using JS.

$(function centerSubMenue(){
    var subMenue = $('nav  ul  li  ul');
    //var subMenueItems = $('nav  ul  li  ul li');
    var width = 0;

    $(subMenue.children('li')).each(function() {
        width += $(this).outerWidth( true );
    });

    $(subMenue).css({'margin-left':width/(-2)});
    $(subMenue).css({'margin-right':width/(-2)});
});   

I'm always open to learning better ways so if I'm wrong, feel free to tell me.