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)

this topic might help you :) http://stackoverflow.com/questions/1964297/split-div-into-2-columns-using-css — , May 10 '12 at 18:53
You could use a `span` which is naturally `inline`, rather than a `div` which is naturally `block`. — Heretic Monkey, May 10 '12 at 19:00
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? — Riet, May 10 '12 at 19:21

score 66 · Accepted Answer · answered May 10 '12 at 18:55

66

You can make two divs inline this way:

display:inline;
float:left;

answered May 10 '12 at 18:55

J D

1,768
2
18
20

3

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. – MetalFrog May 10 '12 at 19:19
5

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. – Riet May 10 '12 at 19:25
2

@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). – Michael Gorsich Feb 08 '17 at 12:27

score 14 · Answer 2 · answered Nov 30 '17 at 18:45

14

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

display:inline-block;

In case that helps anyone else.

answered Nov 30 '17 at 18:45

Maxim Lott

368
4
15

Ronnie Royston · Answer 3 · 2018-06-22T18:23:18.737

6

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>

edited Jun 22 '18 at 18:23

answered Jun 22 '18 at 18:11

Ronnie Royston

16,778
6
77
91

score 4 · Answer 4 · answered May 31 '21 at 09:23

4

Add this to the container div

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

answered May 31 '21 at 09:23

Wolfack

2,667
1
26
50

score 2 · Answer 5 · edited Jul 13 '20 at 21:25

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;

edited Jul 13 '20 at 21:25

Boken

4,825
10
32
42

answered Jul 13 '20 at 20:53

Manish Chand Rajwar

21
1

score 0 · Answer 6 · answered May 08 '20 at 21:52

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.

How do I keep two divs on the same line?

6 Answers6

Linked

Related