View Full Version : Line Breaks in navigation link row

04-30-2009, 03:34 AM
Such a dumb problem is driving me crazy. I have a row of navigation links across the top of the page. But the links have very long names - Holistic Health Services, Personal Life Coaching, etc. I wanted it to look like this:

Holistic Personal Blood
Health Life Green Cell
Services Coaching Living Analysis

But if I put the line break between "Health" and "Services", for example, the word "Personal" appears level with "Services". This would be super easy for me to achieve with tables, but I'm trying to stick to an all CSS design for once. Help please!

04-30-2009, 04:38 AM
Hello melissa820,
Good for you for moving away from tables!
Have a look at this. Just copy/paste the whole thing into a new .html document.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="" content="authored by http://nopeople.com/design" />
<title>CSS ul navbar with no images</title>
<style type="text/css">
html, body {
background: #FC6;
font: 1.1em arial, helvetica, sans-serif;
color: #fff;
* {
margin: 0;
padding: 0;
border: none;
#container {
width: 800px;
margin: 50px auto;
padding: 10px 0 200px 0;
background: #9CC;
ul#navlist {
background: #036;
#navlist li {
display: inline;
#navlist li a {
width: 200px;
line-height: 30px;
color: #fff;
background: #036;
text-decoration: none;
float: left;
#navlist li a:hover {
color: #00f;
#valid {
width: 180px;
margin: 30px auto;
overflow: auto;
#valid a {
float: left;
<div id="container">
<ul id="navlist">
<li><a href="#">Holistic <br /> Health <br /> Services</a></li>
<li><a href="#">Personal <br /> Life <br /> Coaching</a></li>
<li><a href="#"> <br /> Green <br /> Living</a></li>
<li><a href="#">Blood <br /> Cell <br /> Analysis</a></li>
<!--end container--></div>
<div id="valid">
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img src="http://jigsaw.w3.org/css-validator/images/vcss" width="88" height="31" alt="Valid CSS!" />
<a href="http://validator.w3.org/check?uri=referer">
<img src="http://www.w3.org/Icons/valid-xhtml10" width="88" height="31" alt="Valid XHTML 1.0 Strict" />
<!--end valid--></div>

04-30-2009, 08:40 PM
Thank you so much, that worked perfectly and it was easy (which is a huge plus!) :D