I have a HTML page with divs that are vertically placed in the center part of the page.
*Note: It only contains divs in the center and not the two sides.My requirement is that when I re-size my page it should have the center divs unchanged while the two sides should get thinner and thinner until the center divs are the only things that are visible. Sounds complex? Please check the link below. I want it to re-size as the site below:http://www.telerik.com/products/aspnet-ajax.aspx\[code\] <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="TestMasterPage.master.cs" Inherits="WebApplication4.TestMasterPage" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head id="Head1" runat="server"> <title></title> <asp:ContentPlaceHolder ID="head" runat="server"> </asp:ContentPlaceHolder> <style media="screen" type="text/css"> #header { margin-top:0; margin-bottom:0; margin-left:8.0em; margin-right:8.0em; min-width:800px; height:25px; background-color:#303033; border:solid 1px #CCC; } #menuBar1 { margin-top:0px; margin-bottom:0px; margin-left:8.0em; margin-right:8.0em; min-width:800px; min-height:2px; } #menuBar2 { margin-top:0px; margin-bottom:5px; margin-left:8.0em; margin-right:8.0em; min-width:800px; min-height:20px; background-color:#F5F5F5; border:solid 1px #CCC; } #mainContentArea { margin-top:5px; margin-bottom:0px; margin-left:8.0em; margin-right:8.0em; min-width:800px; height:100px; background-color:#F5F5F5; border:solid 1px #CCC; } #interfaceArea1 { margin-top:0px; margin-bottom:0px; margin-left:8.0em; margin-right:8.0em; min-width:800px; height:20px; background-color:#F5F5F5; border:solid 1px #CCC; } #contentArea1 { margin-top:0px; margin-bottom:0px; margin-left:8.0em; margin-right:8.0em; min-width:800px; height:80px; background-color:#F5F5F5; border:solid 1px #CCC; } #contentArea2 { margin-top:0px; margin-bottom:0px; margin-left:8.0em; margin-right:8.0em; min-width:800px; height:80px; background-color:#F5F5F5; border:solid 1px #CCC; } #footer { margin-top:5px; margin-bottom:0px; margin-left:8.0em; margin-right:8.0em; min-width:800px; height:35px; background-color:#303033; border:solid 1px #CCC; } ul{list-style-type:none;padding:0;overflow:hidden;margin-top:0;}li{float:left;}a:link,a:visited{display:block;width:120px;font-weight:bold;color:#FFFFFF;background-color:#303033;text-align:center;padding:4px;text-decoration:none;text-transform:uppercase;}a:hover,a:active{background-color:#CCC;} </style></head><body> <div id="header"> </div> <div id="menuBar1"> <ul><li><a href="http://stackoverflow.com/questions/14439996/#home">Home</a></li><li><a href="http://stackoverflow.com/questions/14439996/#news">Applications</a></li><li><a href="http://stackoverflow.com/questions/14439996/#contact">Webservice</a></li><li><a href="http://stackoverflow.com/questions/14439996/#about">Android</a></li><li><a href="http://stackoverflow.com/questions/14439996/#about">.NET</a></li><li><a href="http://stackoverflow.com/questions/14439996/#about">Other</a></li></ul> </div> <div id="menuBar2"> </div> <div id="mainContentArea"> <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder> </div> <div id="interfaceArea1"> </div> <div id="contentArea1"> </div> <div id="contentArea2"> </div> <div id="footer"> </div></body></html>\[/code\]