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

bubblesnout — Mon, 12 May 2008 06:44:05 GMT

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');

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

newbie2C# — Sun, 11 May 2008 14:56:51 GMT

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> </p>

<tr>

First Name

</td>

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

</td>

Last Name

</td>

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

</td>

</tr>

<tr>

Street Address

</td>

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

</td>

</tr>

<tr>

City

</td>

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

</td>

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>

Home Phone

</td>

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

</td>

Work Phone

</td>

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

</td>

</tr>

<tr>

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

</td>

</tr>

<tr>

<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>

 <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. */

}

Client Side Web Development

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

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