CSS: Why don't these two div (or span) elements float next to each other

Question

In the following code, I need the div elements #ldiv and #rdiv to be placed next to each other.

So I am using the CSS float property. I looked up this answer, and I think I am following it, but still the div's won't position next to each other. The second div displays in the next line.

Then I thought that div is a block level element, so I replaced the div by span elements. But that did not help either.

JSFiddle here.

<div style="padding:25px; width:400px;">

    <div style="background-color:#bf5b5b;">
    <span>Yes</span>
    <span>No</span></div>

        <div id="option_one_div">
            <div id="ldiv" style="float:left; background-color:#74d4dd; width:150px;">
            <label for="rbutton_radio_1_0" style="margin-left:30px; margin-right:30px;">
                <input for="rbutton_radio_1_0" type="radio" name="radio" value="0"/></label>
            <label for="rbutton_radio_1_1" style="margin-left:30px; margin-right:30px;">
                <input for="rbutton_radio_1_1" type="radio" name="radio" value="1"/></label>
            </div>
            <div id="rdiv" style="float:right; background-color:#74d4dd; margin-left:151px; padding-left: 20px; padding-right: 20px">
            <span>Label of first group of Radio Buttons radio buttons.</span>
            </div>
    </div>

</div>

score 5 · Accepted Answer · answered Aug 26 '14 at 11:39

In your situation you can use display:table in container(#option_one_div) in your example and display:table-cell in children elements(#ldiv, #rdiv) like this:

<div style="padding:25px; width:400px;">

    <div style="background-color:#bf5b5b;">
    <span>Yes</span>
    <span>No</span></div>

        <div id="option_one_div" style="display: table;">
            <div id="ldiv" style="background-color:#74d4dd; width:150px;display:table-cell;">
            <label for="rbutton_radio_1_0" style="margin-left:30px; margin-right:30px;">
                <input for="rbutton_radio_1_0" type="radio" name="radio" value="0"/></label>
            <label for="rbutton_radio_1_1" style="margin-left:30px; margin-right:30px;">
                <input for="rbutton_radio_1_1" type="radio" name="radio" value="1"/></label>
            </div>
            <div id="rdiv" style="display:table-cell; background-color:#74d4dd; margin-left:151px; padding-left: 20px; padding-right: 20px">
            <span>Label of first group of Radio Buttons radio buttons.</span>                
            </div>
    </div>

</div>

fiddle

As you can see you don't need floats.

score 2 · Answer 2 · answered Aug 26 '14 at 11:30

use width with float in div

<div id="rdiv" style="float:right; background-color: #74d4dd; /* margin-left: 151px; */ padding-left: 20px; width: 210px;padding-right: 20px">
            <span>Label of first group of Radio Buttons radio buttons.</span>
            </div>

plz check

score 2 · Answer 3 · answered Aug 26 '14 at 11:31

2

the total width of the elements (incl. margin/border) can not be greater than the surrounding divs width of 400px else the floating elements will be put into the next line ... see akz's answer for a quick fix

answered Aug 26 '14 at 11:31

Ingo

1,805
18
31

I tested this by increasing the width to 500px, no gain! So I think this is not due to width problems – Solace Aug 26 '14 at 12:15

score 2 · Answer 4 · answered Aug 26 '14 at 11:32

2

Just remove float:right. It will work.

  <div id="rdiv" style="background-color:#74d4dd; margin-left:151px; padding-left: 20px; padding-right: 20px">

DEMO

answered Aug 26 '14 at 11:32

Suresh Ponnukalai

13,820
5
34
54

1

you also might want to remove the `margin-left:151px;` that would look a tad nicer – Ingo Aug 26 '14 at 11:37

Hadi Rasekh · Answer 5 · 2014-08-26T11:58:10.370

the main problem is you didn't add width to the id="rdiv" and used margin-left:151px when you use some element with float, you have to add its width

<div>
    <div style="float: left;width: 110px;height: 90px;margin: 5px;">a</div>
    <div style="float: left;width: 110px;height: 90px;margin: 5px;">b</div>
    <div style="float: left;width: 110px;height: 90px;margin: 5px;">c</div>
</div>

to solve the problem, you can do one of the following things:

1: change your code to:(notice you set margin-left:151px; in th id="rdiv" and I changed it to lower value)

<div id="rdiv" style="float:right; background-color:#74d4dd; margin-left:15px; padding-left: 20px; padding-right: 20px; width:50px;">

2: remove your float=right in the id="rdiv" so the id="ldiv" could be in the float version of this element

CSS: Why don't these two div (or span) elements float next to each other

5 Answers5

Linked