HTML and CSS markup to achieve desired result

I am new to HTML and CSS. I was wondering if anyone could give me some advice on my use of markup and CSS to achieve this result. I am trying to get a fixed full height sidebar with a list with sprite image for each item.

This is the code I have which achieves this.

HTML

<div class="container">
    <div class="col_left"> <a href="url"><img src="logo.png"></img></a>

        <ul>
            <li class="navimg" id="user"><a href="url">User</a></li>
            <li class="navimg" id="vacancy"><a href="url">Vacancies</a></li>
            <li class="navimg" id="company"><a href="url">Company</a></li>
        </ul>
    </div>
    <div class="col_right">
        <ul>
            <li><a href="#">Create New</a></li>
        </ul>
         <h1>Title</h1>

         <h2>Create new list</h2>

        <form name="input">
            <input type="text" name="Title">
            <input type="text" name="Location">
            <input type="text" name="Description">
            <input type="text" name="Closing date">
            <input type="submit" value="Add">
        </form>
    </div>
</div>

CSS

* {
    margin: 0px;
    padding: 0px;
}
li {
    list-style-type: none;
}
.container {
    display: block;
    position:absolute;
    height:auto;
    bottom:0;
    top:0;
    left:0;
    right:0;
    background-color:white;
}
.column_wrap {
    position:relative;
}
.col_left {
    background-color:#f2f2f2;
    width:250px;
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    height:auto;
    display: block;
}
.col_left img {
    float:right;
    display: block;
    line-height:40px;
    margin-left: auto;
    margin-right: auto;
}
.col_left li a {
    color: gray;
    display: block;
    line-height: 26x;
}
.col_left li a:hover {
    color: green;
}
.col_right {
    margin-left:250px;
}
.col_right li {
    float: right;
}
.col_right a {
    float: right;
    background: green;
    padding: 10px;
    color: white;
    font-weight:bold;
}
.col_right a:hover {
    background: blue;
}
input {
    display: block;
    border: 2px solid gray;
    padding: 10px;
    margin: 10px
}
input:hover {
    border: 2px solid blue;
}
input:focus {
    border: 2px solid blue;
}
.navimg {
    background:url('http://www.otlayi.com/web_images/content/free-doc-type-sprite-icons.jpg');
width: 0px;
    height: 20px;
    padding-left: 30px;
}
#user {
    background-position: -10px -6px;
}
#vacancy {
    background-position: -48px -6px;
}
#company {
    background-position: -88px -6px;
}

However, I think there might be some areas where my code is inefficient, messy or non symantic. Can anyone give me any advice please? I would really appreciate it.