Home/ Questions/Q 9199247
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T22:29:25+00:00

I have a HTML page with divs that are vertically placed in the center

  • 0

I have a HTML page with divs that are vertically placed in the center part of the page.
enter image description here
*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. 

    <%@ 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="#home">Home</a></li>
<li><a href="#news">Applications</a></li>
<li><a href="#contact">Webservice</a></li>
<li><a href="#about">Android</a></li>
<li><a href="#about">.NET</a></li>
<li><a href="#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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If you want the content to stay in the middle, you should not set a min-width but either a fixed width or a max-width. Combine this with auto margins for left and right, which will tell the browser to center the content. For example this setup:

    body {
    max-width: 800px; /* can also be "width" depending on your requirements */
    margin-left: auto;
    margin-right: auto;
}

    In the above example I applied it to the body element, but basically you can do this with any block element (in your case* one of the content divs).

    There are a lot of other examples out there for this kind of layout. For example ironmyers layouts has this one-column fixed width layout you seem to be after.

    * Note: you haven’t exactly made it easy to phrase the answer in your context, because the code you provided isn’t quite an sscce, with a lot of irrelevant markup.

    • 0