CODEWITHSUNDEEP
htmlcss
n0b0dy
n0b0dy

Reputation: 3

Get 2 Divs in one box?

I was wondering how I would get 2 divs in one div

enter image description here

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><a href="#">Home</a></ul>
      <ul><a href="#team">Contact Us</a></ul>
      <ul><a href="#about">About</a></ul>
    </li>
  </div>
</div>

Upvotes: 0

Views: 67

Answers (4)

Brian
Brian

Reputation: 675

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><a href="#">Home</a></ul>
      <ul><a href="#team">Contact Us</a></ul>
      <ul><a href="#about">About</a></ul>
    </li>
  </div>
</div>

More on flex properties: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Upvotes: 2

Johannes
Johannes

Reputation: 67758

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><a href="#">Home</a></li>
      <li><a href="#team">Contact Us</a></li>
      <li><a href="#about">About</a></li>
    </ul>
  </div>
</div>

Upvotes: 0

Sheen Jain
Sheen Jain

Reputation: 1

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

Upvotes: 0

chriskirknielsen
chriskirknielsen

Reputation: 2929

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. ;)

Upvotes: 0

Related Questions