Vertical divide line / vertical rule

HTML & CSS
1

I’m trying to apply a vertical divider line in my header, but I can’t figure out how to do it.

I tried borders, but they aren’t tall enough.

Is there a better way to make a vertical divider line / vertical rule that is always the full height of my header?

2

Nope, can’t be done… without a little sample code or a sketch, anyway. :slight_smile:

Would you mind posting something that we can use to posit a useful response. I feel sure something is possible. :slight_smile:

3

True, it would be beneficial to the community if I at least provided a sketch. Here is a sketch of the layout I am trying to achieve with the vertical rule pointed to.

4

OK, a sketch was a dumb aid to suggest.

If you will not post code, then how about some supporting information, such as:

What determines the height of the header?

What prevents you from using a vertical border on a contained block?

The issue is obviously not as simple as the sketch suggests. Why not describe the requirements up front so we can at least offer better guesses?

5

First guess.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<!--
http://www.sitepoint.com/forums/showthread.php?1013745-vertical-divide-line-vertical-rule
Thread: vertical divide line / vertical rule
2013.03.26 12:06
team1504

table-cells do the vertical-align:middle thing very easily,
and you get your vertical border.
-->
<head>
    <title>template</title>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <meta http-equiv="content-language" content="en-us">
    <style type="text/css">

.outer {
    width:90%;
    margin:0 auto;
}
.header {
    display:table;
    table-layout:auto;
    width:100%;
    background-color:#379185;
    border-bottom:4px solid #000;
}
.tcell {
    display:table-cell;
    width:1%;
    text-align:center;
    vertical-align:middle;
}
.tcell + .tcell {
    width:99%;
    border-left:4px solid #000;
}
img {
    display:inline-block;
    width:160px;
    height:100px;
    background-color:#aaa;
}
h1 {
    background-color:#faa;
}
.content {
    background-color:#add1cc;
    overflow:hidden;
}

    </style>
</head>
<body>
<div class="outer">
    <div class="header">
        <div class="tcell"><img src="#" alt="logo"></div>
        <div class="tcell"><h1>Title Title Title Title Title Title</h1></div>
    </div>
    <div class="content">
        <p>paragraph</p>
        <p>paragraph</p>
        <p>paragraph</p>
        <p>etc.</p>
    </div>
</div>
</body>
</html>
6

Thank you for your help it is much appreciated!