CSS Navigation DIV - Vertical

Hi,

can somebody tell me or show me via web examples how to create a vertical div, that can be used in place of a navigation links please. Because i’m trying to create a div which a blue background, but when doing so, the browser sets it horizontally. Here is an example of what i’m trying to imagine.

The menu bar is vertical, which is what i want for myself. Or is there some attribute that can control which way a div is layed out perhaps?


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
    <title>Home Page V1</title>
<link rel="stylesheet" type="text/css" href="homepage_V1.css" />
</head>
<body>
    <div class="container">
    <div class="nav">
        <ul>
            <li><a href="#Home"> Home </a></li>
            <li><a href="#Contact"> Contact </a></li>
            <li><a href="#News"> News </a></li>
            <li><a href="#About"> About </a></li>
        </ul>
    </div>
    
    </div>
</body>
</html>

css code


/* homepage_V1.css is used to help build my homepage*/

 body
{
    margin-top: 2em;
    margin-left: 2em;
    margin-bottom: 1em;

    
}

div.container
{
    width: 80em;
    border: solid #9400D3 0.1em;
    height: 40em;
    padding-top: 1em;
    padding-bottom: 1em;
}
 
 div.nav
 {
    ??
 }
 
 ul
{
    background-color: blue;
    list-style-type: none;
    
}


Thanks

Actaully, i thnk i know how to do it.

UPDATE: I added the following snippet

div.nav
{
width: 10em;
height: 60em;
}

which reduced the length of the bar horizontally, but when adding the height, it does not lengthen the bar vertically. Is there way for me to increase the length of the div vertically?

Just remove the height. You don’t need it. The div will then naturally expand in height to accommodate whatever content it holds.

If you want a starting point then you could set a min-height instead of a height, if that’s waht you want :slight_smile: