Search code examples
csshtmlmenualignment

Stacking DIVs and horizontally aligning them

I'm using Drupal, and I have a menu bar at the top of the page that has a width defined by whatever menu items I add to it.

So for example, if the only link is "Home", it'll have a very small width. But if I add "Contact", "About Us", etc., its width will increase.

I want to be able to add another div (call it newDiv) below the div that contains the menu bar (menuDiv) so that newDiv will have the exact same width as menuDiv.

So I guess what I'm asking is, how do I make the width of the newDiv the same as the width of menuDiv without ever explicity setting the width of menuDiv?

This picture shows what I'm talking about:

http://i51.tinypic.com/33mami9.jpg

At this link, there's pictures of the menus themselves (menuDiv), and a picture of the Div beneath it (newDiv). How can I achieve such layouts using CSS and NOT using:

<table>i should be a div</table>

I've tried things in CSS, but nothing seems to work as I want it to. Any help would be appreciated.

Solution

  • Wrap them in a block with display: inline-block;. That will adapts its width to the largest width of its children and the child <div> elements will be as wide as their parent.

    For example:

    <div id="outer">
    <div>Here is some stuff and things.</div>
    <div>Here is some stuff and things. Here is some stuff and things.</div>
</div>

    And:

    #outer {
    border: 1px solid red;
    display: inline-block;
}
#outer div {
    border: 1px solid green;
}

    And a live demo: http://jsfiddle.net/ambiguous/gXP7Q/