How to handle horizontally uneven navigation in CSS?

Tags: css

Problem :

I'm redoing a site for a friend and I was wondering what the best practice would be for doing horizontally uneven navigation:

My idea was to just do 4 divs with varying heights but I was wondering how other people would handle this same problem.


Solution :

CSS positioning

Ordinarily I'd recommend floating the elements in a horizontal nav bar. But in a case like this, if the navigation area has a fixed height and the content won't change, CSS positioning might be the best fit. That allows you to easily control the exact placement of the nav elements.

Give the nav container position: relative and a fixed height, and give the nav elements position: absolute and set the values for left and top as needed.

JSFiddle Demo


<ul class="nav">
    <li class="design"><a href="#">Design</a></li>
    <li class="services"><a href="#">Services</a></li>
    <li class="bio"><a href="#">Bio</a></li>
    <li class="contact"><a href="#">Contact</a></li>


.nav {
    position: relative;
    height: 200px;
.nav li {
    position: absolute;
.nav   {left: 20px;  top: 40px;}
.nav {left: 160px; top: 50px;}
.nav      {left: 340px; top: 20px;}
.nav  {left: 450px; top: 60px;}

.nav li a {
    display: inline-block;
    font-size: 30px;
    line-height: 46px;

    CSS Howto..

    How to add & show 4d image in web site with css

    How to use list tag in single line

    How to apply CSS string using Javascript/jQuery without parsing/tokenizing to retrieve property-value pairs?

    How to debug HTML5/CSS for background video in RoR app

    How to make specific checkbox items bold (not all) via CSS?

    using jquery show/hide doesn't keep css in div

    How to make section element in css to full width

    How to add a fade out at the end of this CSS animation?

    How to make a site have a built in user-friendly editor?

    How to create angled double border effect CSS

    How to make headers glossy in IE7,8,9 using CSS

    How do I chain an infinite css animation to a one-time css animation?

    How to set div height to 100% of chosen print paper?

    How to align two columns of text in CSS

    How to split page and reveal stuff underneath?

    how to make small loading circle by changing css height and width?

    How to expand a div with css

    How to change css styles on alloy-ui form validator?

    How can I know if the user tampered with the CSS or JavaScript to change the appearance of my website?

    css show separator icon for icons

    How can I make an unclickable HTML “Ghost” Div?

    ExtJS how to remove grid row underline when selected and over

    How to fill Frameless grid dynamically?

    How do I highlight only the innermost table row of a nested table?

    How to keep CSS from render-blocking my website?

    How to give different style, color to dotted border of links?

    How can I animate my div to go from top to bottom whithout interfering with the content inside?

    How do I download many of the same pictures fewer times with html, css, jquery, etc.?

    How to get CSS Variables working in Dart

    How do I vertically centering text inside a responsive box that has a (fluid height) [duplicate]