Get 2 Divs in one box? - html

Question

I was wondering how I would get 2 divs in one div
html {
margin: auto;
width: 960px;
height: auto;
}
#navbar {
height: 90px;
background-color: #080808 !important;
display: block;
}
.logo {
padding-left: 31px;
height: 90px !important;
width: 90px !important;
}
.navitems li,
.navitems ul {
list-style-type: none;
display: inline-block;
}
.navitems {
float: right;
}
<div id="navbar">
<div class="logo">
<img src="images/logo.png" alt="" width="90px" height="90px">
</div>
<div class="navitems">
<li>
<ul>Home</ul>
<ul>Contact Us</ul>
<ul>About</ul>
</li>
</div>
</div>

Answer 1

It's probably better to use flex.
Set "display: flex" and "justify-content: space-between" on the parent element (navigator). I also changed the image to just have a background color that stands out.
html {
margin: auto;
width: 960px;
height: auto;
}
#navbar {
height: 90px;
background-color: #080808 !important;
display: flex;
justify-content: space-between;
}
img {
background-color: #0ff;
}
.logo {
padding-left: 31px;
height: 90px !important;
width: 90px !important;
}
.navitems li,
.navitems ul {
list-style-type: none;
display: inline-block;
}
<div id="navbar">
<div class="logo">
<img width="90px" height="90px">
</div>
<div class="navitems">
<li>
<ul>Home</ul>
<ul>Contact Us</ul>
<ul>About</ul>
</li>
</div>
</div>
More on flex properties:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

If using float, the floating items must be placed before "regular" (non-floating) items in the DOM tree. In this instance, you would want to move your <div class="navitems"> before <div class="logo">. Also, you might want to permutate your <ul> and <li> tags. <ul> contains <li>s, not the other way around. ;)

Answer 3

The 2 divs are in 1 div only but the fact is float property does not changes the flow .Floated elements remain a part of the flow of the web page unlike absolute and fixed positioning so place the div class="navitems" above the div class="logo".Moreover interchange the ul and li you have used them incorrectly conceptually although it doesnt make any difference visually

Answer 4

First, use display: inline-block; on those two DIVs. Also, use vertical-align: middle; on both to align them vertically centered to their container.
But there a mistake in your code: ul and li should be used the other way round, the lis are inside the ul . And also note that list-style-type: none; is only assigned to the ul, and display: inline-block; only to the li elements.
#navbar {
height: 90px;
background-color: #080808 !important;
display: block;
}
.logo {
display: inline-block;
padding-left: 31px;
height: 90px !important;
width: 90px !important;
vertical-align: middle;
}
.navitems {
display: inline-block;
vertical-align: middle;
}
.navitems ul {
list-style-type: none;
}
.navitems li {
display: inline-block;
margin-right: 4em;
}
<div id="navbar">
<div class="logo">
<img src="http://placehold.it/90x90/fb4" alt="" width="90px" height="90px">
</div>
<div class="navitems">
<ul>
<li>Home</li>
<li>Contact Us</li>
<li>About</li>
</ul>
</div>
</div>