Give parent the same width as child

Question

(Note: For compatibility reasons I may only use HTML and CSS for this.)

I have a div containing an h4 tag. What ends up happening is my h4 tag has a auto-defined width based on how much text is included. However when I include it under my div tag the div automatically uses width:100% instead of surrounding the tag like I want it to. This becomes a problem because when I change the color of the div via hover I see a ton of extra unfilled space.

Here is one example of the issue I'm experiencing:

<a href='./HH.html'> <div id='homenav'> <h4> HH </h4> </div> </a>

This is my current CSS:

h4{padding:0px;Margin:5px;} #homenav { font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; background: #e8edff; color: #669; text-align:center; vertical-align: middle; display:-webkit-box; -webkit-box-pack:left; -webkit-box-align:left; display:-moz-box; -moz-box-pack:left; -moz-box-align:left; border-radius: 5px; padding: 2px; width:auto; } #homenav:hover { background:#D0DAFD; color:#333399; }

user2445124 · Accepted Answer · 2013-12-03 18:53:30Z

You can add display: inline-block to the parent div and remove the width attribute.

Example:

HTML: <div class="container"> <h2>Text</h2> </div> CSS: .container { display: inline-block; }

Demo: http://jsfiddle.net/5qPH9/

Tomas · Accepted Answer · 2013-12-03 19:16:14Z

You can use display: table. See your example modified: http://jsfiddle.net/cArg7/1/

h4{padding:0px;Margin:5px;} #homenav { font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; background: #e8edff; color: #669; text-align:center; vertical-align: middle; border-radius: 5px; padding: 2px; width:auto; display: table; } #homenav:hover { background:#D0DAFD; color:#333399; }

And simplify the html code, merge <a> and <div> tags:

<a href='./HH.html' id='homenav'> <h4> HH </h4> </a>

Okay now another problem that has come up is that the link is still active in that space, the div size is corrected but now if I click where that space was before the link is still active there.
@Tyler, OK, then simplify the HTML code and merge the <a> and <div> tags. jsfiddle.net/cArg7/1

Csarsam · Accepted Answer · 2013-12-03 18:55:16Z

Setting the display of the parent div to inline-block will wrap the parent div to the width of the text. See this as an example.

Collectives™ on Stack Overflow

Give parent the same width as child

3 Answers 3

Comments

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Related