CODEWITHSUNDEEP
css
urgenthelp
urgenthelp

Reputation: 69

A DIV is not wrapping around it's sub-elements?

So here is my code:

#headerMenu_outer #headerMenu_inner
{
    background-color:#333333;
}
#headerMenu_outer #headerMenu_inner li
{
    padding-left:15px;
    padding-right:15px; 
    text-align:center;
    font-size:13px;
    font-weight:bold;
    display:inline;
    color:#00FF33;
    background-color:#00CCCC;
    cursor:pointer;
}

I want headerMenu_inner to be centered inside of headerMenu_outer. Usually, "margin-left: auto" and "margin-right: auto" works. However, headerMenu_inner is occupying the entire width of headerMenu_outer. Is there anyway to make it not do that? I want it to be as wide as the li's need it to be.

Thank you

Upvotes: 0

Views: 66

Answers (1)

Derreck Dean
Derreck Dean

Reputation: 3766

#headerMenu_inner is most likely a block-level element and therefore will take up as much horizontal space as it can. Assign a width to that element, and then do your margin trick, e.g. margin: 0 auto to center it.

If you want it to be as wide as the LIs, (off the top of my head) set the LI elements to not wrap, then set the "inner" element to be display: inline-block.

Upvotes: 3

Related Questions