Why is content floating next to DIV?

Question

I'm trying to build a form using floating divs as opposed to my normal approach of using a table. I've reached the submit button and am trying to center it. Normally a DIV, being a block element, will automatically use up a whole line and have a line break after it won't it? But mine doesn't and I can't figure out why. I tried explicitly setting it's width to 100% and it still won't use the full width. To confuse me more, the div is styled with clear:both; which I thought should prevent any content from floating next to it. I also tried putting its following text in its own div but nothing changed. Why does the text float next to the submit div?

<style type="text/css">
    #rlpContactForm
    {
        width:275px;
    }
    #rlpContactForm label
    {
        display:block;
        float:left;
        width:112px;
        text-align:right;
        font-weight:bold;
    }
    #rlpContactForm input
    {
        float:left;
        margin:0 0 5px 5px;
    }
    #rlpContactForm input[type="text"]
    {
        border: 1px solid #999999;
    }
    #rlpContactForm input[type="text"]
    {
        width: 146px;   /*175 available - total width of label (including margins/borders/10pxwiggle room)*/
        padding: 1px 0px 1px 0px;   /* Otherwise IE adds 1px right and left padding automatically */
    }
    #rlpContactForm input[type="text"].age
    {
        width: 44px;    /* Sized for 3 boxes to fit 1 line */
        margin: 0 0 5px 5px;
        text-align:center;
    }

    #rlpContactForm .submit
    {
        float:none;
        clear:both;
        width:100%;
        text-align:center;
    }
</style>

...

<div id="rlpContactForm">
        <label>First Name:</label>
        <asp:TextBox ID="txtFName" runat="server" />
        <label>Last Name:</label>
        <asp:TextBox ID="txtLName" runat="server" />
        <label>E-mail:</label>
        <asp:TextBox ID="txtEmail" runat="server" />
        <label>Phone:</label>
        <asp:TextBox ID="txtPhone" runat="server" />
        <label>Children's Ages:</label>
        <asp:TextBox ID="txtAge1" runat="server" CssClass="age"/>
        <asp:TextBox ID="txtAge2" runat="server" CssClass="age"/>
        <asp:TextBox ID="txtAge3" runat="server" CssClass="age"/>

        <div class="submit"><asp:Button ID="btnSubmit" runat="server" Text="Submit"/></div>
        Thank you for your interest. A team member will contact you shortly.
    </div>

IE and Firefox show like

|Submit|Thank you for your interest. A
        team member will contact you
shortly.

Could you please post the HTML that is being output once you request this page? — Asad Saeeduddin, Feb 21 '13 at 21:41
It renders as you would expect:

Thank you for your interest. A team member will contact you shortly. — xr280xr, Feb 21 '13 at 22:29

Rick Kuipers · Accepted Answer · 2013-02-21T22:36:34.313

1

Float the text as well if you don't want that to happen:

<div class="float:left">Thank you for your interest. A team member will contact you shortly.</div>

EDIT

I now understand what you mean, even though the above answer works for you, this is a better way to do it:

.submit
    {
        float:none;
        clear:both;
        width:100%;
        text-align:center;
        overflow:hidden;
    }

Because the input element inside the .submit div had a float left, the .submit div loses its height. To prevent this you add overflow:hidden.

I've never known what exactly happens and what the right terms are so you would have to look that up. I just know this is how it works :P

edited Feb 21 '13 at 22:36

answered Feb 21 '13 at 21:40

Rick Kuipers

6,616
2
17
37

Thanks Rick! That does put the text on the next line. But the question is "Why?". Why is the div behaving like an inline element? If all that is on my page is
asdfasdfasdf, the "asdfasdfasdf" text is on its own line. I don't understand the difference. – xr280xr Feb 21 '13 at 22:08
@mori57 That's what I was missing was that the button was still float left. But I'm still a little surprised at that result. What if I wanted a 100% wide div with the first child floating left? – xr280xr Feb 22 '13 at 00:00
@xr280xr: In that case, Rick's answer is right on the money, and you should clear the float using the width:100%; overflow:hidden;, then keep the input button float:left. The two techniques are compatible... though if you were going to do that, I'd also drop the text-align:center for clarity's sake, as (if I recall correctly) that is inherited by child elements, and might give you unexpected results if you tried combining this with a text-replacement technique. – Jason M. Batchelor Feb 22 '13 at 04:28

score 1 · Answer 2 · answered Feb 21 '13 at 22:36

1

Stop. Wait. No, the answer is really a lot easier than all of this.

The problem is that your .submit container clears, yes, but it doesn't /contain/ the button you put inside it. That button is still floated.

Try something like this:

#rlpContactForm .submit input {
    float:none;
}

answered Feb 21 '13 at 22:36

Jason M. Batchelor

2,951
16
25

That's what I was thinking too. – xr280xr Feb 21 '13 at 23:42
I chose Rick's answer because he identified the problem and answered "why?" first. Removing float left, is how I fixed it though. – xr280xr Feb 22 '13 at 15:29
No worries. Important thing is that you learned something that helped you! :) Glad it worked out! – Jason M. Batchelor Feb 22 '13 at 16:23

Why is content floating next to DIV?

2 Answers2