I'm making a menu with tabs on the left side of my page. To do this, I have been using `<ul>` and `<li>` to create the list of menu items. This is my HTML code:

```
<div class="maindiv">
    <div class="leftdiv" id="leftdiv">
        <ul>
            <li id="selrtab"><a href="#">Testerter</a></li>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
        </ul>
        <br />
        <form name="restartform" id="restartform" action="wt_start.php" method="post">
            <input type="submit" value="Test">
            <input type="hidden" name="hrestart" value="restartclick">
        </form>
    </div>
    <div class="rightdiv">
        <h1>Välj typ av dagbok</h1>
        <br />
        <br />
        <br />
        <form name="submitform" action="#" method="post">
            <input type="submit" value="Nästa">
        </form>
    </div>
</div>

```

To make the list, I have the following CSS:

```
.maindiv {
    margin-left: auto;
    margin-right: auto;
    width: 1000px;
    height: auto;
    background-color: #cccccc;
    padding-left: 0px;
    padding-top: 15px;
    padding-right: 0px;
    padding-bottom: 0px;
    overflow: hidden;
}

.leftdiv{
    padding-top: 15px;
    width: 165px;
    float: left;
    background-color: #cccccc;
}

.rightdiv{
    overflow: hidden;
    background-color: #aaaaaa;
    padding-left: 10px;
}

#leftdiv ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: right;
}

#leftdiv li {
    margin: 0 1px 2px 0;
}

#leftdiv a {
    padding: 0 1em;
    text-decoration: none;
    color: #a80;
    background-color: #dddddd;
}

#leftdiv a:hover {
    background-color: #cccccc;
    color: #540;
}0123456789a

#leftdiv #selrtab {
}

#leftdiv #selrtab a {
    margin: 0 -1 2px 0;
    font-weight: bold;
    color: black;
    color: black;
    background-color: #aaaaaa;
}

#leftdiv form {
    margin-top: 10px;
    float: bottom;
}

```

I have a few problems, which I will try to explain in the following screenshot (maindiv is pink to distinguish it from leftdiv):

![Screenshot](https://i.stack.imgur.com/jQwyw.png)

Problem 1: How can I make so that all list items are the same (fixed) width? Now it looks bad when the background is shorter for shorder list items.

Problem 2: I want to make the list items a little larger (higher). I tried to change padding (the started overlapping, covering each other) and height (they were placed further from each other, still having the same height). How can I do this?

Problem 3: As you can see, leftdiv and rightdiv are not the same height. Is it possible to make it so that the height always are the same for both (and the currently largest height of either of them).