How do I keep two divs on the same line?

Question

I\'ve been working on a dropdown menu similar to suckerfish. I\'ve got the dropdown side working now, but I have some images I\'m trying to put on either side of the links.

Answer 1

Simple do display: inline-block on both div's but be sure and set min-width and max-width both. Example below:

div {
  max-width: 200px;
  min-width:200px;
  background:grey;
  display:inline-block;
  vertical-align: top;
}

<div>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
</div>

<div>
  <p>test 2</p>
  <p>test 2</p>
  <p>test 2</p>
</div>

Answer 2

If you want to make more than one div in a single continuation, then just add the below line of code to your css file, with each div, div class etc.

display: inline-block;

Answer 3

You can make two divs inline this way:

display:inline;
float:left;

Answer 4

This method also works great for adjusting two divs to the same line for website builders like shopify, weebly, where you can't adjust the CSS files very easily. Just wanted to drop this particular answer in for other people searching for website builder solutions too.

display:inline;
float:left;

All credit goes to J D who originally discovered the solution above.

Answer 5

For me, this worked much better, as it didn't eliminate spacing between floated items:

display:inline-block;

In case that helps anyone else.