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

&lt;div class="container"&gt;
    &lt;div class="col_left"&gt; &lt;a href="url"&gt;&lt;img src="logo.png"&gt;&lt;/img&gt;&lt;/a&gt;

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

         &lt;h2&gt;Create new list&lt;/h2&gt;

        &lt;form name="input"&gt;
            &lt;input type="text" name="Title"&gt;
            &lt;input type="text" name="Location"&gt;
            &lt;input type="text" name="Description"&gt;
            &lt;input type="text" name="Closing date"&gt;
            &lt;input type="submit" value="Add"&gt;
        &lt;/form&gt;
    &lt;/div&gt;
&lt;/div&gt;


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.
A few suggestions

You were using this to pass classes to your main logo

.col_left img {
    float:right;
    display: block;
    line-height:40px;
    margin-left: auto;
    margin-right: auto;
}


But that will create problems if you introduce any other images there. So instead try giving that element a class. For example, a class of logo or anything that you want to name it. This way there will not be any unexpected conflicts caused by CSS inheritance

HTML

&lt;a href="/" class="logo"&gt;
  &lt;img src="http://placehold.it/100x60"&gt;
&lt;/a&gt;


CSS

.logo {
  float:right;
  display: block;
  line-height:40px;
  margin-left: auto;
  margin-right: auto;
} 


In testing, can use image placeholders. In my example, I used Placehold.it which allows you to just give a desired height

All of your &lt;li&gt;s on the left have the same rules. So you might as well give that &lt;ul&gt; a class and pass rules that way. However some rules may not apply. Also you gave both an id and class to those &lt;li&gt;s. this is what I did 

HTML

&lt;ul class="options"&gt;
  &lt;li class="user"&gt;
    &lt;a href="#"&gt;User&lt;/a&gt;
  &lt;/li&gt;
  &lt;li class="vacancy"&gt;
    &lt;a href="#"&gt;Vacancies&lt;/a&gt;
  &lt;/li&gt;
  &lt;li class="company"&gt;
    &lt;a href="#"&gt;Company&lt;/a&gt;
  &lt;/li&gt;
&lt;/ul&gt;


CSS

.user, .vacancy, .company {
  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; }


I did it that way so that you can choose to add in what you want to accept what CSS rules. 

in testing. When you have links, it is common to just use href="#"

Full code available at this CodePen.