CSS list items same width

Question

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):

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).

Answer 1

You can use display: inline-block in <li> and <a> elements:

.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 {
    width: 100%;
    float: left;
    display: inline-block;
    margin: 0 1px 2px 0;
}

#leftdiv a {
    width: 100%;
    float: left; 
    text-decoration: none;
    color: #a80;
    background-color: #dddddd;
    padding: 5px 0;
    text-align: center;
}

#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;
}

<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>

Answer 2

problem 1 and 2 can be solved by making your anchors block elements:

#leftdiv a {
    display:block;
    padding: 1em;
}

problem 3 can be solved by using display:table

.maindiv {
    display:table;
}

.leftdiv{
    display:table-cell;
}

.rightdiv{
    display:table-cell;
}

Example