I am having trouble getting two lists to display side by side. The second list keeps appearing below the first list. I need them to be in separate divs because they will have different colors and content. Additionally, the lists will be dynamically populated using JavaScript, so simply positioning them with relative values is not an option.
Here is the HTML code:
<div id="left_list">
<div id="item_name">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</div>
<div id="item">
<ul>
<li>some name</li>
<li>some name</li>
<li>some name</li>
<ul>
</div>
And the corresponding CSS:
#item_name {
color: #0000FF;
font-size: 17px;
height: 100%;
margin: 0;
padding: 0;
white-space: nowrap;
width: 208px;
text-align:right;
}
#item_name li{
padding-bottom: 0px;
}
#item {
margin-left: 208px;
padding: 0;
font-size: 17px;
white-space: nowrap;
background-color: red;
}
#item li{
list-style-type: none;
}
#left_list {
background-color: #CDCDCD;
width: 208px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
display: inline-block;
*display: inline;
margin-right: 22px;
}