Div containing floating left items doesn't expand properly.

Question

<div id="DateAndTime" style="clear:left; width:100%" class="Frame">
<h2>Date & Time Criteria</h2>
<h3>Permitted Days of the Week</h3>
<p class="DataForm" style="float:left">

<asp:CheckBox id="chkMonday" runat="server" Text="Monday"/><br />
<asp:CheckBox id="chkTuesday" runat="server" Text="Tuesday"/><br />
<asp:CheckBox id="chkWednesday" runat="server" Text="Wednesday"/><br />
<asp:CheckBox id="chkThursday" runat="server" Text="Thursday"/><br />
<asp:CheckBox id="chkFriday" runat="server" Text="Friday"/><br />
<asp:CheckBox id="chkSaturday" runat="server" Text="Saturday"/><br />
<asp:CheckBox id="chkSunday" runat="server" Text="Sunday"/><br />
</p>
<p class="DataForm" style="float:left">
<asp:CheckBox id="CheckBox1" runat="server" Text="Monday"/><br />
<asp:CheckBox id="CheckBox2" runat="server" Text="Tuesday"/><br />
<asp:CheckBox id="CheckBox3" runat="server" Text="Wednesday"/><br />
<asp:CheckBox id="CheckBox4" runat="server" Text="Thursday"/><br />
<asp:CheckBox id="CheckBox5" runat="server" Text="Friday"/><br />
<asp:CheckBox id="CheckBox6" runat="server" Text="Saturday"/><br />
<asp:CheckBox id="CheckBox7" runat="server" Text="Sunday"/><br />
</p>

<p style="clear:left">&nbsp</p>
</div>

If I remove the last <p style="clear:left"> line, the div does not stretch to enclose the checkboxes. Is there a better way to force it to expand than this?

Answer 1

Yes, that's how CSS works. There are workarounds (my preferred one, another approach) to allow a parent to specify that it will expand to contain its floats.

Answer 2

I'm assuming you want to 2 columns of checkboxes side-by-side. Personally I see floats as a hack when you should really be using 'display:inline-block'. There are a couple of things to note when using inline-block. In Internet Explorer 7 and below, it only works on elements that are inline to begin with, and you may find that the content ends up at the bottom of the element. Since the elements now render like a block, you may also need to set a width.

You can fix them by doing the following, change the p tags to fieldsets, which makes the code more semantic because they are, in fact, sets of fields, and apply the display rule to them along with a 'vertical-align: top' like so:

<div id="DateAndTime" style="clear:left; width:100%" class="Frame">
<h2>Date & Time Criteria</h2>
<h3>Permitted Days of the Week</h3>
<fieldset class="DataForm" style="display:inline-block; vertical-align:top">

<asp:CheckBox id="chkMonday" runat="server" Text="Monday"/><br />
<asp:CheckBox id="chkTuesday" runat="server" Text="Tuesday"/><br />
<asp:CheckBox id="chkWednesday" runat="server" Text="Wednesday"/><br />
<asp:CheckBox id="chkThursday" runat="server" Text="Thursday"/><br />
<asp:CheckBox id="chkFriday" runat="server" Text="Friday"/><br />
<asp:CheckBox id="chkSaturday" runat="server" Text="Saturday"/><br />
<asp:CheckBox id="chkSunday" runat="server" Text="Sunday"/><br />
</fieldset>
<fieldset class="DataForm" style="display:inline-block; vertical-align:top">
<asp:CheckBox id="CheckBox1" runat="server" Text="Monday"/><br />
<asp:CheckBox id="CheckBox2" runat="server" Text="Tuesday"/><br />
<asp:CheckBox id="CheckBox3" runat="server" Text="Wednesday"/><br />
<asp:CheckBox id="CheckBox4" runat="server" Text="Thursday"/><br />
<asp:CheckBox id="CheckBox5" runat="server" Text="Friday"/><br />
<asp:CheckBox id="CheckBox6" runat="server" Text="Saturday"/><br />
<asp:CheckBox id="CheckBox7" runat="server" Text="Sunday"/><br />
</fieldset>
</div>

You may have noted that you no longer need a spare div with 'clear:none'