CSS Float not floating?

Question

I have a snippet with two areas that i want side by side. But the second section refuses to float where it should?

<div>
    <div style="width:320px; height: 240px; float:left;">
        <div id="webcam" style="border: 1px dotted #000;"></div>
        <div style="margin:5px;">
            <img src="/img/webcamlogo.png" style="vertical-align:text-top"/>
            <select id="cameraNames" size="1" onchange="changeCamera()" style="width:245px font-size:10px;height:25px;"></select>
        </div>
    </div>

    <!-- This part refuses to float to the right side of the upper content? -->
    <div style="width:320px;height:240px; border: 1px dotted #000;">
        <img id="visitorImage" style="width:320px;height:240px;" alt=""/>
        <asp:HiddenField ID="hdnVisitorImage" runat="server" />
    </div>
</div>

Any ideas?

Is the viewport (or container) wide enough to fit both divs? Otherwise the default is to break line... — LcSalazar, Sep 23 '14 at 16:34
`But the second section refuses to float` The second area hasn't been `float`ed. — Hashem Qolami, Sep 23 '14 at 16:37

score 2 · Answer 1 · answered Sep 23 '14 at 16:38

2

add a float property to the styling of the second div. They will float next to each other towards the left.

Generally floating element will ignore other block element, and float to the parent container. Also, its not good practice to write inline styling, try to separate your semantics with your styling.

    <div style="width:320px;height:240px;display:block; border: 1px dotted #000; float:left;">

answered Sep 23 '14 at 16:38

John

488
4
19

1

+1 for `Generally floating element will ignore other block element`. For those who are curious, more [explanation here](http://stackoverflow.com/questions/25475822/why-does-css-float-not-change-the-width-of-the-following-div/25476238#25476238) – Hashem Qolami Sep 23 '14 at 16:40

score 0 · Answer 2 · answered Sep 23 '14 at 16:34

http://jsfiddle.net/o95hzjaf/

<div>
        <div style="width:320px; height: 240px; float:left;">
            <div id="webcam" style="border: 1px dotted #000;"></div>

            <div style="margin:5px;">
                <img src="/img/webcamlogo.png" style="vertical-align:text-top">
                <select id="cameraNames" onchange="changeCamera()" size="1"
                style="width:245px font-size:10px;height:25px;">
                    </select>
            </div>
        </div>
        <!-- This part refuses to float to the right side of the upper content? -->

        <div style="width:320px;height:240px; border: 1px dotted #000;float:left">
            <img alt="" id="visitorImage" style="width:320px;height:240px;"> 
        </div>
    </div>

is this what you want?

This is poor answering... Please explain your changes instead of just giving the code... — LcSalazar, Sep 23 '14 at 16:35

Cutberto Ocampo · Accepted Answer · 2014-09-23T16:56:33.237

0

Try to add display: inline-block to the second div, it worked for me. Display default value for divs is "block" which make them display in a new line; by setting it to "inline-block" you'll force it to work as an inline element (span elements are inline, and they render in the same line as the container element).

edited Sep 23 '14 at 16:56

answered Sep 23 '14 at 16:38

Cutberto Ocampo

86
7

1

You could probably flesh this answer out a little. At present its more like a comment. – Moob Sep 23 '14 at 16:43
Thanks @Moob, I edited my answer to do that but apparently didn't work the first time. Thanks anyway for the suggestion. – Cutberto Ocampo Sep 23 '14 at 16:47

score 0 · Answer 4 · edited May 23 '17 at 11:49

Simply make them both inline-block. Add a class (or inline css) to get these elements to display side by side without the need for floats and clearfixes:

.inlineblock {display:inline-block; vertical-align:top;}

EG:

<div>

<div style="width:320px; height:240px;" class="inlineblock">
    <div id="webcam" style="border: 1px dotted #000;"></div>
    <div style="margin:5px;">
        <img src="/img/webcamlogo.png" style="vertical-align:text-top"/>
        <select id="cameraNames" size="1" onchange="changeCamera()" style="width:245px font-size:10px;height:25px;">
        </select>
    </div>
</div>    
<!-- This part now sits on the right side of the upper content (space permitting) -->
<div style="width:320px; height:240px; border:1px dotted #000;" class="inlineblock">
<img id="visitorImage" style="width:320px;height:240px;" alt=""/>
<asp:HiddenField ID="hdnVisitorImage" runat="server" />
</div>

</div>

http://jsfiddle.net/pbb6d9ww/

CSS Float not floating?

4 Answers4