Putting two <ul>'s next to each other - html

Question

I'm having some trouble with putting two ul's next to each other.
div.container > nav > ul > li > div {
width: 100%;
margin-top: 13px;
padding: 25px;
position: absolute;
border-bottom: 1px #222222 solid;
background-color: #ffffff;
}
div.container > nav > ul > li > div > ul {
width: 200px;
border-left: 2px #555555 solid;
}
div.container > nav > ul > li > div > ul > li {
padding: 3px;
}
div.container > nav > ul > li > div > h4 {
width: 242px;
color: #d60000;
}
div.container > nav > ul > li > div > ul > li > a {
text-decoration: none;
color: #222222;
font-size: 12px;
}
div.container > nav > ul > li > div > ul > li > a:hover {
color: #d60000;
}
<div>
<h4>Website</h4>
<ul>
<li>
<a href=''>Basic</a>
</li>
<li>
<a href=''>Premium</a>
</li>
<li>
<a href=''>Without Hosting</a>
</li>
<li>
<a href=''>Without Database</a>
</li>
<li>
<a href=''>Multiple Website's</a>
</li>
</ul>
<h4>Hosting</h4>
<ul>
<li>
<a href=''>Hosting</a>
</li>
<li>
<a href=''>Host a personal site</a>
</li>
<li>
<a href=''>Host an existing website</a>
</li>
</ul>
</div>
The problem that I'm getting now is that the <ul>'s drop down under each other, where I like them to be inline.
Has anyone a proper solution for the problem. I searched through other's questions about this topic, all methods did not work.

Answer 1

1 method:
you need 2 div
<div>
<h4>Website</h4>
<ul>
<li>
<a href=''>Basic</a>
</li>
<li>
<a href=''>Premium</a>
</li>
</ul>
</div>
<div>
<h4>Hosting</h4>
<ul>
<li>
<a href=''>Hosting</a>
</li>
<li>
<a href=''>Host a personal site</a>
</li>
</ul>
</div>
Css
div {
display:inline-block;
float:left;
}
Example: https://jsfiddle.net/d2q6kbnw/
2nd method, make your h and ul tag into inline tag using css...
display:inline-block; float:left;

Answer 2

Wrap each ul into a parent div and apply display: inline-block; and vertical-align: top; to them.
Here's a Fiddle to demonstrate.

Answer 3

You can wrap the headling/list groups in a div and float them left:
div.container > nav > ul > li > div {
width: 100%;
margin-top: 13px;
padding: 25px;
position: absolute;
border-bottom: 1px #222222 solid;
background-color: #ffffff;
}
div.container > nav > ul > li > div > ul {
width: 200px;
border-left: 2px #555555 solid;
}
div.container > nav > ul > li > div > ul > li {
padding: 3px;
}
div.container > nav > ul > li > div > h4 {
width: 242px;
color: #d60000;
}
div.container > nav > ul > li > div > ul > li > a {
text-decoration: none;
color: #222222;
font-size: 12px;
}
div.container > nav > ul > li > div > ul > li > a:hover {
color: #d60000;
}
.wrapper {
float: left;
}
<div>
<div class="wrapper">
<h4>Website</h4>
<ul>
<li>
<a href=''>Basic</a>
</li>
<li>
<a href=''>Premium</a>
</li>
<li>
<a href=''>Without Hosting</a>
</li>
<li>
<a href=''>Without Database</a>
</li>
<li>
<a href=''>Multiple Website's</a>
</li>
</ul>
</div>
<div class="wrapper">
<h4>Hosting</h4>
<ul>
<li>
<a href=''>Hosting</a>
</li>
<li>
<a href=''>Host a personal site</a>
</li>
<li>
<a href=''>Host an existing website</a>
</li>
</ul>
</div>
</div>

Answer 4

You create 2 div "left" and "right" :
<div class="left">
<h4>title</h4>
<ul>...<ul>
</div>
<div class="right">
<h4>title</h4>
<ul>...<ul>
</div>
.left,
.right{
display: inline-block;
vertical-align: top;
}
fiddle

Answer 5

You can do this:
CSS
div.container > nav > ul > li > div {
width: 100%;
margin-top: 13px;
padding: 25px;
position: absolute;
border-bottom: 1px #222222 solid;
background-color: #ffffff;
}
div.container > nav > ul > li > div > ul {
width: 200px;
border-left: 2px #555555 solid;
}
div.container > nav > ul > li > div > ul > li {
padding: 3px;
}
div.container > nav > ul > li > div > h4 {
width: 242px;
color: #d60000;
}
div.container > nav > ul > li > div > ul > li > a {
text-decoration: none;
color: #222222;
font-size: 12px;
}
div.container > nav > ul > li > div > ul > li > a:hover {
color: #d60000;
}
div ul{
display: inline-block;
vertical-align: top;
}
HTML
<div>
<ul>
<h4>Website</h4>
<li>
<a href=''>Basic</a>
</li>
<li>
<a href=''>Premium</a>
</li>
<li>
<a href=''>Without Hosting</a>
</li>
<li>
<a href=''>Without Database</a>
</li>
<li>
<a href=''>Multiple Website's</a>
</li>
</ul>
<ul>
<h4>Hosting</h4>
<li>
<a href=''>Hosting</a>
</li>
<li>
<a href=''>Host a personal site</a>
</li>
<li>
<a href=''>Host an existing website</a>
</li>
</ul>
</div>
DEMO HERE

Answer 6

The issue is that the h4 tags are block level elements. You would need to two wrap both lists in some sort of column div like so for the desired behavior:
div.container > nav > ul > li > div {
width: 100%;
margin-top: 13px;
padding: 25px;
position: absolute;
border-bottom: 1px #222222 solid;
background-color: #ffffff;
}
div.container > nav > ul > li > div > ul {
width: 200px;
border-left: 2px #555555 solid;
}
div.container > nav > ul > li > div > ul > li {
padding: 3px;
}
div.container > nav > ul > li > div > h4 {
width: 242px;
color: #d60000;
}
div.container > nav > ul > li > div > ul > li > a {
text-decoration: none;
color: #222222;
font-size: 12px;
}
div.container > nav > ul > li > div > ul > li > a:hover {
color: #d60000;
}
div.column {
display: inline-block;
float: left;
}
<div>
<div class="column">
<h4>Website</h4>
<ul>
<li>
<a href=''>Basic</a>
</li>
<li>
<a href=''>Premium</a>
</li>
<li>
<a href=''>Without Hosting</a>
</li>
<li>
<a href=''>Without Database</a>
</li>
<li>
<a href=''>Multiple Website's</a>
</li>
</ul>
</div>
<div class="column">
<h4>Hosting</h4>
<ul>
<li>
<a href=''>Hosting</a>
</li>
<li>
<a href=''>Host a personal site</a>
</li>
<li>
<a href=''>Host an existing website</a>
</li>
</ul>
</div>
</div>