Shrink wrapped container to fit the width of its child elements?

HTML & CSS
1

How can I make the parent container element (.menu.nav) expand just enough to fit the width of its top level child elements, but no more?

I don’t want it to be a fixed width, but rather, I want the width to be determined by the intrinsic width of the collection of first child elements, without wrapping to the next line.

<div class="menu nav">
	<ul class="menu">
		<li class="menu-item"><a href="#">Home</a></li>
		<li class="menu-item"><a href="#">Contact Us</a>
			<ul class="sub-menu">
				<li class="menu-item"><a href="#">Directions</a></li>
			</ul>
		</li>
		<li class="menu-item"><a href="#">About Us</a></li>
	</ul>
</div>
2

If I understand correctly then you just need to float the parent and it will shrink to fit.

I assume that’s some sort of dropdown you have there but I’d probably need to see more code if that’s not what you meant :slight_smile:

3

Edit: to update the post in case anyone else needs this. I found that if I apply float:left; width:auto to the parent element, it does the job.

4

Isn’t that what I said lol :slight_smile:

5

Yep, look at the post times :slight_smile:

You must have been answering as I was editing, LOL.

Thanks as always.

6

Aha - missed that :slight_smile:

7