CODEWITHSUNDEEP
htmlcssvertical-alignmentnav
Will
Will

Reputation: 17

Creating a vertical menu alongside a image

I am trying to create a vertical nav alongside a image (See image form what I am trying to achieve).

http://futurform.co.uk/images/image.jpg

Ideally I'd like to restrict the whole block to a height (say 400px).

Below is the HTML structure:

<div class="navSlider">
    <nav>
        <ul>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
        </ul>
    </nav>
    <div class="slider">
        <img src="img.jpg">
    </div>
</div>

I've floated the nav and .slider and set the widths as below:

nav {
   width:28.57142%;
   background:#417050;
   float:left;
}

.slider {
   float:right;
   width:71.42857%;
}

This works fine, but I would like the nav to always be the same height as the image, and align in the middle of the div vertically.

Any help would be appreciated!

Upvotes: 1

Views: 297

Answers (1)

GreyRoofPigeon
GreyRoofPigeon

Reputation: 18123

Yes, you can. Make .navSlider act like a table, and nav and .slider as table-cell. Then vertical-align the nav.

CSS:

.navSlider {
    display: table;
    width: 100%;
}
nav, .slider {
    display: table-cell;

}
nav {
    width:28.57142%;
    background:#417050;
    vertical-align: middle;
}
.slider {
    background: lightgreen;
    height: 400px;
}

Check this demo.

Please note that nav and .slider will always have the same height with this code. If you don't want that, remove the background color from nav and add it to the ul inside it:

nav {
    width:28.57142%;
    vertical-align: middle;
}
nav > ul {
    background:#417050;
}

Check the updated Fiddle

Upvotes: 1

Related Questions