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. Right now I'm using a div the size of the image, then setting the background-image property to the image I need (so that it can change using the pseudo :hover class).

Here is the CSS that applies:

ul#menu3 li {
    color: #000000;
    float: left;
    /*I've done a little playing around here, doesn't seem to do anything*/
    position: relative;
    /*margin-bottom:-1px;*/
    
    line-height: 31px;
    width: 10em;
    padding: none;
    font-weight: bold;
    display: block;
    vertical-align: middle;
    background-image: url(../../images/dropdown/button-tile.gif);
}
.imgDivRt {
    width: 20px;
    height: 31px;
    display: inline;
    float: right;
    vertical-align: middle;
    background-image: url(../../images/dropdown/button-right.gif);
}
.imgDivLt {
    width: 20px;
    height: 31px;
    display: inline;
    float: left;
    vertical-align: middle;
    background-image: url(../../images/dropdown/button-left.gif);
}    

I was using selectors to save a little on having different classes, but Internet Explorer doesn't seem to support them :(

Here is my HTML that applies:

<li><div class="imgDivLt"></div>Option 1<div class="imgDivRt"></div>
<ul>
    <li><a href="#"><div class="imgDivLt"></div>Sub 1<div class="imgDivRt"></div></a>
        <ul>
            <li><a href="#"><div class="imgDivLt"></div>Sandwich<div class="imgDivRt"></div></a></li>
            <li><a href="#"><div class="imgDivLt"></div>Sandwich<div class="imgDivRt"></div></a></li>
            <li><a href="#"><div class="imgDivLt"></div>Sandwich<div class="imgDivRt"></div></a></li>
            <li><a href="#"><div class="imgDivLt"></div>Sandwich<div class="imgDivRt"></div></a></li>
            <li><a href="#"><div class="imgDivLt"></div>Sandwich<div class="imgDivRt"></div></a></li>
            <li><a href="#"><div class="imgDivLt"></div>Sandwich<div class="imgDivRt"></div></a></li>
        </ul>
    </li>
    <li><a href="#"><div class="imgDivLt"></div>Sub 2<div class="imgDivRt"></div></a> 
    <ul>
            <li><a href="#"><div class="imgDivLt"></div>Sub 1<div class="imgDivRt"></div></a></li>
            <li><a href="#"><div class="imgDivLt"></div>Sub 2<div class="imgDivRt"></div></a> </li>
            <li><a href="#"><div class="imgDivLt"></div>Sub 3<div class="imgDivRt"></div></a></li>
            <li><a href="#"><div class="imgDivLt"></div>Sub 4<div class="imgDivRt"></div></a></li>
            <li><a href="#"><div class="imgDivLt"></div>Sub 5<div class="imgDivRt"></div></a></li>
            <li><a href="#"><div class="imgDivLt"></div>Sub 6<div class="imgDivRt"></div></a></li>
        </ul>
    </li>
    <li><a href="#"><div class="imgDivLt"></div>Sub 3<div class="imgDivRt"></div></a></li>
    <li><a href="#"><div class="imgDivLt"></div>Sub 4<div class="imgDivRt"></div></a></li>
    <li><a href="#"><div class="imgDivLt"></div>Sub 5<div class="imgDivRt"></div></a></li>
    <li><a href="#"><div class="imgDivLt"></div>Sub 6<div class="imgDivRt"></div></a></li>
</ul>
</li>
<li><div class="imgDivLt"></div>Option 2<div class="imgDivRt"></div>

I'm not sure if there's a glitch in my code, or if I'm on the wrong track. It works in Firefox, Safari, and Chrome, but not IE or Opera, so I'm not sure if they're making up for stupidity or what. Ideally, the second image floats greedily to the right in the containing block. In the problem browsers, it sits the next line down (at the far right at least).

Twopenny

this topic might help you :) #1964797 – Epidemiology

You could use a span which is naturally inline, rather than a div which is naturally block. – Goosefish

Thank you for the input. I've tried using span and clear:both, does clear need to be used on a specific type of element? – Twopenny

This code works on opera and internet explorer: <li><a href="#"><span class="imgDivLt"></span><span class="imgDivRt"></span>Sub 1</a></li> for some reason putting text between the images made IE and Opera freak out. – Twopenny

Answer 1

You can make two divs inline this way:

display:inline;
float:left;

Brueghel

Then can both float left, there's no rule as to why they can't. They'll just collapse to the left. Also, it's important to note that you don't need display inline and float. – Schelling

Where exactly in my code am I supposed to put this? It's already being used on both of my divs, and when I put it on the containing block, it did not work as expected. – Twopenny

@Riet, in IE11, I had to add this to each DIV that I wanted on the same line. Adding it to even the next outer DIV (i.e., around the DIV's I wanted on the same line) did not work. (I realize this is an old question, but the answer to Riet would have saved me some messing around, had it been answered in 2012). – Secor

Answer 2

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

display:inline-block;

In case that helps anyone else.

Harmonize

Answer 3

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>

Tussah

Answer 4

Add this to the container div

.container_class {
    display: flex;
    justify-content: center;
}

Cogitable

Answer 5

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;

Lodi

Answer 6

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.

Chivaree