CSS Menu with full width of parent container

Here's an easy way to make your navigation items stretch to the full width of the container (nav) evenly.

It doesn't matter what the parent container width is, you want the items to use the full width.

CSS Menu with full width

HTML markup

<nav> <ul> <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a></li> </ul> </nav>
Code language: HTML, XML (xml)

CSS Tables

I know what you're going to say but I've found that this method has great browser compatibility. It just works.

nav { display: table; border-collapse: collapse; } nav ul { display: table-row; } nav ul li { display: table-cell; }
Code language: CSS (css)


View Demo

About Ricard Torres

Senior Front-end Software Engineer at Netcentric, from Barcelona, Haidong Gumdo Instructor (korean martial art of the sword), street photographer, travel lover, TV addict, Boston Red Sox fan, and privacy advocate.

@ricard_dev @ricard_dev

📝 Blog 🎙 Podcast

Leave a Reply

Add <code> Some Code </code> if you need to.