2 line horizontal navigation?

**thenerdelite** · 01-26-2007, 12:05 AM

I'm working on creating a simple horizontal navigation bar (bg and fg change on hover) with an added twist. I'd like the menu to allow two lines of text for each element in the bar. I've tried limiting the width of the elements in an attempt to cause the text to wrap, but that didn't seem to do much. Any thoughts?

**jscheuer1** · 01-26-2007, 06:17 AM

If the elements are block level - like a div or a p, or if they have their display property set to block, making them block level for layout purposes, then giving them adequate height or even just allowing them to expand vertically by not giving them any height property and not containing them within an element with a restrictive height set, then they will wrap if their width is too narrow for the text.

**thenerdelite** · 01-27-2007, 04:05 AM

So, the issue isn't getting an item to wrap as much as it is getting block elements to wrap while being displayed inline.

If I remove the display:inline; element from the CSS definition for the div tag, the div elements wrap as expected. However, when the display:inline element is present in the div tag definition, the div elements in the navigation menu no longer wrap.

So it seems that the display:inline element and the display:block element are mutually exclusive, and I'm looking for a way to somehow combine the two.

I've also tried placing a block style element within an inline element with no different results.

any insight?

**jscheuer1** · 01-27-2007, 05:43 AM

A block level element may be made to appear as if it is inline if floated:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.floater {
width:8em;
height:2.5em;
float:left;
margin-right:1.5em;
border:1px solid #cccccc;
}
</style>
</head>
<body>
<div><div class="floater">some content that can wrap once</div>
<div class="floater">some content that can wrap once</div>
<div class="floater">some content that can wrap once</div>
<div class="floater">some content that can wrap once</div>
<div class="floater">some content that can wrap once</div>
<div style="clear:left;"></div></div>
</body>
</html>

**thenerdelite** · 01-27-2007, 08:04 AM

AHA! Floating the elements worked. Thanks!

Thread: 2 line horizontal navigation?

Thread Tools

Search Thread

2 line horizontal navigation?

Bookmarks

Bookmarks

Posting Permissions