CODEWITHSUNDEEP
htmlcsswidth
user2496736
user2496736

Reputation: 23

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

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!

Upvotes: 2

Views: 312

Answers (5)

Rob
Rob

Reputation: 11788

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>

Upvotes: 0

Jesse T-Cofie
Jesse T-Cofie

Reputation: 227

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.

Upvotes: 0

copypaste
copypaste

Reputation: 175

    <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..

Upvotes: 0

2ne
2ne

Reputation: 5986

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

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

Upvotes: 0

Arun
Arun

Reputation: 3077

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; }

Upvotes: 2

Related Questions