How do I make the container div be as wide as the h1 element in it

Question

I need the container div to be as wide as the h1 element and to change with font size changes. Currently everything is as wide as the page.

This is the code:

<div id="container">
<h1>ABCDEFGH</h1>
<nav id="site-navigation" class="main-navigation" role="navigation">
        <div class="main-menu-container">
            <ul id="menu-main-menu" class="nav-menu">
                <li><a href="#">About</a></li>
                <li><a href="#">Menu item 2</a></li>
                <li><a href="#">Credits</a></li>
                <li><a href="#">Test item 4</a></li>
            </ul>
        </div>      
</nav>
</div>

How do I do this? Thanks!

score 2 · Accepted Answer · answered Jun 18 '13 at 10:24

2

Set the display of the container div to inline-block

<div id="container" style="display:inline-block">

You can alternatively add this line to your CSS file

#container { display: inline-block; }

answered Jun 18 '13 at 10:24

Arun

3,036
3
35
57

I fiddled around with `display: inline-block` but for some reason it didn't work when I applied it. Thank you, it works now. – user2496736 Jun 18 '13 at 10:27

score 0 · Answer 2 · answered Jun 18 '13 at 10:25

0

http://codepen.io/2ne/pen/LjrEB

#container {
  background: red;
  display: inline-block;
}

answered Jun 18 '13 at 10:25

2ne

5,766
9
30
51

score 0 · Answer 3 · answered Jun 18 '13 at 10:27

    <div id="container">
    <h1>ABCDEFGH</h1>
    <nav id="site-navigation" class="main-navigation" role="navigation">
            <div class="main-menu-container">
                <ul id="menu-main-menu" class="nav-menu">
                    <li><a href="#">About</a></li>
                    <li><a href="#">Menu item 2</a></li>
                    <li><a href="#">Credits</a></li>
                    <li><a href="#">Test item 4</a></li>
                </ul>
            </div>      
    </nav>
    </div>

    <style>
    #container{
    display: inline-block;
    }
    </style>

Hope i helped..

Rob · Answer 4 · 2013-06-18T11:15:05.613

You should use display:inline-block; on the container:

http://jsfiddle.net/gtJMD/

<div id="container" style="background:red;display:inline-block;">
<h1>ABCDEFGH</h1>
<nav id="site-navigation" class="main-navigation" role="navigation">
        <div class="main-menu-container">
            <ul id="menu-main-menu" class="nav-menu">
                <li><a href="#">About</a></li>
                <li><a href="#">Menu item 2</a></li>
                <li><a href="#">Credits</a></li>
                <li><a href="#">Test item 4</a></li>
            </ul>
        </div>      
</nav>
</div>

Jesse T-Cofie · Answer 5 · 2013-06-18T10:37:19.977

0

your CSS should have something like this

#container {
  float:left;
  display:inline-block;
}

also not that if you close your <div> outside <nav> and your <nav> is positioned relative and has a float property the width of div#container will span both the widths of the <h1> and <nav> element.

edited Jun 18 '13 at 10:37

answered Jun 18 '13 at 10:29

Jesse T-Cofie

227
3
11

How do I make the container div be as wide as the h1 element in it

5 Answers5