I am facing an issue with my layout where I have a list taking up 100% of the height and next to it, I am attempting to place an image box.
Here is the fiddle link for reference: https://jsfiddle.net/wrdvkgyj/
Even after setting my image container to inline, the picture seems to be pushed out. I am unsure of what might be going wrong here...
HTML:
<div id="wrapper">
<div class="project-list">
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
</ul>
</div>
<div id="image-container">
<div class="image-holder">
<img src="https://semantic-ui.com/images/wireframe/image.png">
</div>
</div>
<div class="description-container"></div>
</div>
CSS:
/* wrapper */
html, body {
width: 100%;
height: 100%;
}
#wrapper {
width: 100%;
height: 100%;
border: 1px solid black;
}
/* project list */
.project-list {
border: 1px solid #cccc;
float: left;
font-size: 25px;
width: 30%;
height: 100%;
overflow-x: hidden;
}
.project-list ul {
list-style: none;
padding: 0;
margin: 0;
}
.project-list li {
float: left;
clear: left;
width: 100%;
padding: 10px;
transition: all .3s ease;
}
.project-list li:nth-child(even){
background-color: #f8f8f8;
}
/*li-hover*/
.project-list li:hover {
color: red;
background-color: #d8d8d8;
cursor: pointer;
}