Page Layout Table-less design

Question

I am trying to learn table-less design and having a difficult time with something that should be easy

I am trying to make a save or cancel button at the bottom right of the screen in the designer it looks good but in the browser (IE and Chrome) the buttons move into the the right part of the form

I have tried height auto and leaving it out all together. If I fix the height of the main div then it works, but I don't always know that height. Is there anyway to make the buttons "flow" at the bottom of the main div?

Thank You

The Code

    <%@ Page Title="" Language="C#" AutoEventWireup="true" MasterPageFile="~/Site.Master" CodeBehind="NewAccount.aspx.cs" Inherits="BudgetApplicationCSharp.NewAccount" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
  <style type="text/css" media="screen">
      #container
      {
          width:500px;
          margin: 5px;           
      }
      #main 
      {
          width:500px;
          height:auto;
          margin:1px;  
      }
      #left 
      {
          float:left;
          width:50%;
          padding-left:0px;
          margin:0px;

      }
      #right
      {
          float:right;
          width:50%
      }
      ol 
      {
          list-style:none;
      }
      input[type=button]
      {
          float:right;
          clear:right;
      }
       input[type=Text]
      {
           font:15px "MS Sans Serif";
      }
      label 
      {
          font:15px "MS Sans Serif";

      }
      fieldset 
      {
          padding:0px;
          margin:0px;
          border:0px none;
      }
      ol 
      {
          padding:0px;
          margin:0px;
          border:0px none;
      }
  </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<div id="container">
    <div id="main">
        <div id="left">
            <fieldset>
                <ol>
                    <li>
                        <label for="AccountName">
                            Account Name</label>
                        <input id="AccountName" runat="server" />
                    </li>
                    <li>
                        <label for="Description">
                            Description</label>
                        <input id="Description" runat="server" />
                    </li>
                    <li>
                        <label for="InstituteName">
                            Institute Name</label>
                        <input id="InstituteName" runat="server" />
                    </li>
                    <li>
                        <label for="AccountType">
                            Institute Name</label>
                        <select id="cboAccountType" runat="server">
                        </select>
                    </li>
                </ol>
            </fieldset>
        </div>
        <div id="right">
            <fieldset>
                <ol>
                    <li>
                        <label for="AccountNumber">
                            Account Number</label>
                        <input id="AccountNumber" runat="server" />
                    </li>
                    <li>
                        <label for="RoutingNumber">
                            Routing Number</label>
                        <input id="RoutingNumber" runat="server" />
                    </li>                       
                </ol>
            </fieldset>
        </div>
    </div>
    <div id="buttons">
    <input id="btnSave" type="button" value="Save" runat="server" />
    <input id="btnCancel" type="button" value="Cancel" runat="server" />
    </div>
</div>
</asp:Content>

Answer 1

this is a floating-problem. you need some kind of "clearfix". in your case i would add an overflow:hidden; to #main... this will create a new box model context, which will solve your issue. here you got a jsfiddle to demonstrate this behaviour (just remove the overflow:hidden there to see the difference) -> http://jsfiddle.net/3k3yd/

Answer 2

Adding the style rule #buttons { clear: both; } should cause the button div to go below the floated divs.

Answer 3

Add

overflow: auto 

to the #main definition.

This solves what others have said without the need for additional markup (ie adding an empty div)

Here's a fiddle with the result.

Answer 4

Your experiencing an issue common across browsers that occurs when you float two divs within a container. The issue is that the container's height does not expand to the height of the floated divs within it. The fix to this issue is commonly referred to as the clearfix.

I have applied the clearfix to your markup in this example: http://jsfiddle.net/3D7hz/

It adds this styling to your stylesheet:

/* float clearing for IE6 */
* html .clearfix{
  height: 1%;
  overflow: visible;
}

/* float clearing for IE7 */
*+html .clearfix{
  min-height: 1%;
}

/* float clearing for everyone else */
.clearfix:after{
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
  font-size: 0;
}

And adds the clearfix class to your main element in the markup:

 <div id="main" class="clearfix">

This link describes the clearfix problem in detail: http://www.positioniseverything.net/easyclearing.html