Two rows in one row, vertical alignment maybe

I have a horizontal div and I want the height of the elements in it to all be the same. The thing is, one of them is in two rows. I was thinking of setting the height of the div by setting the line-heights of the elements contained in it, but on one of the inside elements (it’s split into two rows), I can’t figure out how to do it. The line height should be in this example 2.6 (x100% which is default in pure.css), but if I set the table-row spans to add up to 2.6, they push the height of the div further than the elements that are specified to line-height 2.6. For some reason, it seems to work when I add them up to 2.5 (1 + 0.5) like in the code below. I can’t figure out why.

A somewhat working example of what I want is available at http://tinyurl.com/oy4r756, however it doesn’t work in all situations and I wanted to start afresh with some more understanding of what’s going on.

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Your page title</title>
	<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">
	<style>
#headerbar a {line-height:2.6;padding:0 20px;border:0;color:#F1F8E0;}
	</style>


</head>

<body>

<div class="pure-menu pure-menu-open header pure-menu-horizontal" style="background:#b29562;">
	<a href="#content" id="skip" style="background:blue;display:inline-block;vertical-align:middle;border:0;padding:0 20px;line-height:2.6;color:#F1F8E0;">Skip to content</a>
	<div href="#" style="background:magenta;display:inline-block;padding:0 20px;vertical-align:middle;color:#F1F8E0;text-transform:uppercase;">
		<span style="display:table-row;line-height:2;">Dubrovnik</span>
		<span style="display:table-row;line-height:0.5;">Hotels</span>
	</div>
	<ul id="headerbar" style="background:#aaa;display:inline-block;text-transform:uppercase;"> 
		<li><a href="#">Home</a>
		<li><a href="#">Hotels</a>
		<li><a href="#">Historic City</a>
		<li><a href="#">Culture</a>
		<li><a href="#">Weddings</a>
	</ul>
</div>
</body>
</html>

Hi,

You seem to be making this a lot harder than it should be.:slight_smile:

I would simply put all those links in the same structure and use display:table-cell to keep them all the same height automatically. No need for weird calculations (as a general rule you would never set line-height to less than .9 or you may end up hiding the glyphs).

This is how I would do it.

<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.headerbar {background:#b29562}
.headerbar nav {
    margin:0;
    display:table;
}
.headerbar a {
    display:table-cell;
    vertical-align:middle;
    padding:5px 20px;
    color:#F1F8E0;
    text-decoration:none;
    line-height:1.2;
    text-align:center;
    border-right:1px solid #fff;
}
a.skip {
    background:blue;
    color:#F1F8E0;
}
a.hotels {
    background:magenta;
    color:#F1F8E0;
    text-transform:uppercase;
}
.headerbar a:hover{background:red;}
</style>

</head>

<body>
<div class="headerbar">
       <nav>
        <a class="skip" href="#" >Skip to content</a> 
        <a class="hotels" href="#">Dubrovnik<br>Hotels</a> 
        <a href="#">Home</a> 
        <a href="#">Hotels</a> 
        <a href="#">Historic City</a> 
        <a href="#">Culture</a> 
        <a href="#">Weddings</a> 
      </nav>
</div>
</body>
</html>

Simple and logical html with automatic equalising cells (IE8+).

Yes, I’ve noticed myself doing that. The live example I linked was basically hacked together in a way that worked most of the time but not in a way I understood (especially coming back to it a while after I first coded it) so I wanted to start fresh with methods I understood, but ended up doing the same thing. This makes sense because the tallest cell will force the other ones to expand vertically automatically. Thanks for the help

I think I may have done it again. Let’s say that I want to mark up the links as an unordered list (either because I think it makes more sense for a list of links, or I might want to add dropdown links in the future). I also think I can remove the container div, giving me this markup:

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>Your page title</title>
	<style>
.headerbar {
	background:#b29562
}
.headerbar ul {
	list-style-type:none;
	display:table;
	margin:0;
	padding:0;height:100%;
}
.headerbar ul li {
	display:table-cell;vertical-align:middle;
}
.headerbar a {
	display:block;
	height:100%;
	padding:0 20px;
	color:#F1F8E0;
	text-decoration:none;
	line-height:1.2;
	text-align:center;
	border-right:1px solid #fff;
}
a.skip {
	background:blue;
}
a.hotels {
	background:magenta;
	text-transform:uppercase;
}
.headerbar a:hover{background:red;}
	</style>


</head>

<body>
<nav class="headerbar">
	<ul>
		<li><a class="skip" href="#" >Skip to content</a> 
		<li><a class="hotels" href="#">Dubrovnik<br>Hotels</a> 
		<li><a href="#">Home</a> 
		<li><a href="#">Hotels</a> 
		<li><a href="#">Historic City</a> 
		<li><a href="#">Culture</a> 
		<li><a href="#">Weddings</a>
	</ul>
</nav>

But now I’ve set myself up into using the line-height method again, haven’t I? The point is that I need the anchor to take up the height of its parent, the li (table-cell), while having the text of the anchor vertically centered within itself. Is the line-height method the only way of achieving this?

That’s why I used the html5 nav element because it is meant for a list of nav links but without implicitly using a list structure. There’s no need to put a list inside a nav element as the semantics of the nav element define its use perfectly without further mark up.

The problem with your method that is is now the list element that has full height and not the anchors (even though you give them 100% height that will only refer to the current cell and not adjacent cells (assuming that browsers let you use height:100% on cell content which is not always the case)). It also means you lose the vertical alignment because your anchor is now `100% tall so there is nothing to center; you would then need another cell inside the anchor to mimic yet another table.

e.g. Like this:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Your page title</title>
<style>
.headerbar {
    background:#b29562
}
.headerbar ul {
    list-style-type:none;
    display:table;
    margin:0;
    padding:0;
    height:1px;
}
.headerbar ul li, .headerbar a span {
    display:table-cell;
    vertical-align:middle;
}
.headerbar a {
    display:table;
    height:100%;
    width:100%;
    color:#F1F8E0;
    text-decoration:none;
    line-height:1.2;
    text-align:center;
    border-right:1px solid #fff;
}
.headerbar span{    padding:0 20px}
a.skip {background:blue;}
a.hotels {
    background:magenta;
    text-transform:uppercase;
}
.headerbar a:hover {background:red;}
</style>
</head>

<body>
<nav class="headerbar">
        <ul>
                <li><a class="skip" href="#" ><span>Skip to content</span></a>
                <li><a class="hotels" href="#"><span>Dubrovnik<br>
                        Hotels</span></a>
                <li><a href="#"><span>Home</span></a>
                <li><a href="#"><span>Hotels</span></a>
                <li><a href="#"><span>Historic City</span></a>
                <li><a href="#"><span>Culture</span></a>
                <li><a href="#"><span>Weddings</span></a>
        </ul>
</nav>
</body>
</html>

All in all the nav method is simpler and less html and more robust.:slight_smile:

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.