Question

I’m trying to create a column of content underneath a navbar, such that the content’s width exactly matches the navbar’s width. This is proving more difficult than I expected.

Given something like this:

<div id="Wrapper">

    <!-- nav should all be on one line. #Wrapper should stretch to hold it-->   
    <nav> 
        <ul>  
            <li>link 1</li>
            <li>link 2</li>
            <li>etc</li>
        </ul> 
    </nav>

    <!-- article should not stretch #Wrapper, even if it is wider than nav -->
    <article>
        <h1>title</h1>
        <p>This should be constrained to nav's width, 
            even if by all rights it would be wider</p>
    </article>
</div>

I’m trying to achieve something like this:

+-----------------------------+
|    +-------------------+    |
|    |+-----------------+|    |
|    ||link 1 link 2 etc||    |
|    |+-----------------+|    |
|    |+-----------------+|    |
|    ||TITLE            ||    |
|    ||this should be   ||    |
|    ||constrained to   ||    |
|    ||nav's width, even||    |
|    ||if by all rights ||    |
|    ||it would be wider||    |
|    |+-----------------+|    |
|    +-------------------+    |
+-----------------------------+

I can set a fixed width on #Wrapper, but if the font changes or scales, then the navbar won’t match the width of the article.

On the other hand, I can’t find a way to allow the navbar to stretch #Wrapper while preventing the article from stretching it further.

On yet a third hand, if there were some way to have an element match a sibling’s width, I could do away with #Wrapper entirely.

Answer 1

Wrap the article in another div, position absolutely, with left and right set to 0px. New div will match the outer width AND contain the articles without stretching.

Downside is, it’s very difficult to do anything useful BELOW this arrangement.

html:

<div id="Wrapper">
    <nav> 
        <ul>  
            <li>link 1</li>
            <li>link 2</li>
            <li>etc</li>
        </ul> 
    </nav>

    <div id="WidthBinder"> <!-- all further content goes in here -->
        <article>
            <h1>title</h1>
            <p>This should be constrained to nav's width, 
                even if by all rights it would be wider</p>
        </article>
    </div>
</div>

css:

li { display: inline; }

body { text-align: center; }
body * { text-align: left; }

#Wrapper {
  display: inline-block;
  position: relative;
}

#WidthBinder {
  position: absolute;
  left: 0px;
  right: 0px;
}

fiddle: http://jsfiddle.net/yU32B/3/