Why doesn't the max width set with the CSS container class work?

Last post 05-12-2008 2:44 AM by bubblesnout. 1 replies.

Sort Posts:

  • Why doesn't the max width set with the CSS container class work?

    05-11-2008, 10:56 AM
    • Member
      295 point Member
    • newbie2C#
    • Member since 02-15-2007, 10:37 PM
    • Posts 532

    I have created a class for the <div> that I am using as a container for my page.  In the css I have set the max width property but it does not limit the width of the page.  The width blows out past my header on a page the has a table that containes my input fields. 

     I know I can rework the table to make it narrower which would control this.  But, I like the way the table is layed out and the table isn't taking up the entire width of the page.  There is over an inch or so of blank space on either side of the table. 

     Do I need to set the padding or margin explicitly to get rid of this?  Is there a better way to deal with this?

     Thanks in advance for any help.

    This is the code for the aspx page

    <%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="InsertCust.aspx.cs" Inherits="InsertCust" Title="New Customer Interface" %>

    <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

    <div align="center" class="content_container"><br /><h4>Enter a new customer:</h4>

    <p>

    <asp:Label ID="lblMessage" runat="server" Style="position: relative"></asp:Label>&nbsp;</p>

     

    <table id=controlContainer border="" >

    <tr>

    <td align=right>

    First Name

    </td>

    <td style="width: 157px">

    <asp:TextBox ID="txtFirstName" runat="server" TabIndex="1" MaxLength="15"></asp:TextBox>

    </td>

    <td align=right>

    Last Name

    </td>

    <td style="width: 49px">

    <asp:TextBox ID="txtLastName" runat="server" TabIndex="2" MaxLength="15"></asp:TextBox>

    </td>

    </tr>

    <tr>

    <td align=right>

    Street Address

    </td>

     

    <td style="width: 157px" colspan=2>

    <asp:TextBox ID="txtStreetAddress" runat="server" TabIndex="3" MaxLength="25" Width="241px"></asp:TextBox>

    </td>

    </tr>

    <tr>

    <td style="height: 26px" align=right>

    City

    </td>

    <td style="height: 26px; width: 157px;">

    <asp:TextBox ID="txtCity" runat="server" TabIndex="4" MaxLength="20"></asp:TextBox>

    </td>

    <td style="height: 26px">

    State&nbsp<asp:TextBox ID="txtCustState" runat="server" TabIndex="5" MaxLength="2" Width="43px"></asp:TextBox>

    </td>

    <td>

    Zip&nbsp<asp:TextBox ID="txtZip" runat="server" TabIndex="6" MaxLength="10"></asp:TextBox>

    </td>

    </tr>

    <tr>

    <td style="height: 26px" align=right>

    Home Phone

    </td>

    <td style="width: 157px; height: 26px">

    <asp:TextBox ID="txtPhone1" runat="server" TabIndex="7" MaxLength="13"></asp:TextBox>

    </td>

    <td style="height: 26px">

    Work Phone

    </td>

    <td style="width: 49px; height: 26px">

    <asp:TextBox ID="txtPhone2" runat="server" TabIndex="8" MaxLength="13"></asp:TextBox>

    </td>

    </tr>

    <tr>

    <td align=right style="height: 28px" colspan="3">

    Email&nbsp <asp:TextBox ID="txtEmail" runat="server" TabIndex="9" MaxLength="30" Width="243px"></asp:TextBox>

    </td>

     

    </tr>

    <tr>

    <td colspan=4 style="height: 45px"><br />

    <asp:Button ID="btnEnter" runat="server" Text="Enter" TabIndex="10" />&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp

    <asp:Button ID="btnCancel" runat="server" Text="Cancel" TabIndex="11" /><br />

    </td>

    </tr>

    </table><br />

     

    <asp:RequiredFieldValidator ID="rfvFirstName" runat="server" ErrorMessage="A first name is required" ControlToValidate="txtFirstName"></asp:RequiredFieldValidator>

    <asp:RequiredFieldValidator ID="rfvLastName" runat="server" ErrorMessage="A last name is required" ControlToValidate="txtLastName"></asp:RequiredFieldValidator>

    <asp:RequiredFieldValidator ID="rfvStreetAdress" runat="server" ErrorMessage="A street address is required" ControlToValidate="txtStreetAddress"></asp:RequiredFieldValidator>

    <br />

    <asp:RequiredFieldValidator ID="rfvCity" runat="server" ErrorMessage="A city or county is required" ControlToValidate="txtCity"></asp:RequiredFieldValidator>

    <br>

    <asp:RequiredFieldValidator ID="rfvZip" runat="server" ErrorMessage="A zip code is required" ControlToValidate="txtZip"></asp:RequiredFieldValidator>

    <asp:RequiredFieldValidator ID="rfvPhone1" runat="server" ErrorMessage="A phone number is required" ControlToValidate="txtPhone1"></asp:RequiredFieldValidator>

    &nbsp;<br />

    </div>

    </asp:Content>

     --------------------------------------------------------------------------------

    This is the css code for the container

    .content_container

    {

    min-height:30em;

    max-width: 800px; /* this doesn't work the way I thought it would. It renders wider than the max. */

    }

     

     

     

    There are only two ways to learn, through your experiences and through someone else's experiences.
    Thanks to those who share their experiences to help me learn.
  • Re: Why doesn't the max width set with the CSS container class work?

    05-12-2008, 2:44 AM
    Answer
    • Participant
      1,037 point Participant
    • bubblesnout
    • Member since 08-08-2007, 6:54 PM
    • Posts 238

    This is because the max-width css property is not standard, and is not recognized by all browsers. I'm not sure which ones recognize it, but I strongly suggest you don't use it. Instead of max-width:800px;, try replacing it with the following:

    height:expression(this.scrollWidth>799?'800px':'auto');

Page 1 of 1 (2 items)