Home/ Questions/Q 315673
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-12T08:18:48+00:00

I have a simple CSS fixed width layout with a container and some backgrounds,

  • 0

I have a simple CSS fixed width layout with a container and some backgrounds, and a three column design.

<body>
  <form id="form1" runat="server">
    <div id="BGContainer">
      <div id="PageContainer">
      </div>
      <div id="Content">
      <div id="MainContent">
        <asp:ContentPlaceHolder ID="MainAreaContentPlaceholder" runat="server">
        </asp:ContentPlaceHolder>
      </div>
    </div>
    <div id="Bottom">
      <div id="Copyright">
        Copyright
      </div>
    </div>
    </div>
  </form>
</body>

In a different file, I have the content for the ContentPlaceHolder

<asp:Content ID="Content1" runat="server" ContentPlaceHolderID="MainAreaContentPlaceholder">
  <div id="Heading">
     Overskrift
  </div>
  <div id="LeftColumn">
    /*Content Here*/
  </div>
  <div id="CenterColumn">
    center
  </div>
  <div id="RightColumn">
    right
  </div>
</asp:Content>

The problem is that #MainContent is not resizing in height. It always stays the same height

CSS

html {
  height:100%;
}

body {
  margin:0;
  width:100%;
  height:100%;
  font-family: Verdana, Sans-Serif;
  background-image:url(../Gfx/Design/bg.png);
  background-repeat:repeat;
}

#BGContainer {
  margin:0px;
  background-image:url(../Gfx/Design/Background-top-gradient.png);
  background-repeat:repeat-x;
  height:210px;
  width:100%;
}

#PageContainer {
  background-image:url(../Gfx/Design/top-gradient.png);
  background-repeat:no-repeat;
  height:100%;
  width:1016px;
  margin-left:auto;
  margin-right:auto;
}

#Bottom {
  background-image:url(../Gfx/Design/Bottom.png);
  background-repeat:no-repeat;
  height:32px;
  width:964px;
  margin-left:auto;
  margin-right:auto;
}

#Content {
  background-color:#FFFFFF;
  background-image:url(../Gfx/Design/content-background.png);
  background-repeat:no-repeat;
  width:1000px;
  height:100%;
  margin-left:auto;
  margin-right:auto;
}

#MainContent {
  width:980px;
  height:100%;
  margin-left:auto;
  margin-right:auto;
  background-color:#FFFFFF;
}

#Copyright {
  color:#000000;
  font-size:xx-small;
  text-transform:uppercase;
  margin-left:50px;
  padding-top:5px;
}

#LeftColumn {
  width:311px;
  margin-left:10px;
  border: 1px solid gray;
  min-height:400px;
  float:left;
}

#CenterColumn {
  width:311px;
  margin-left:10px;
  border: 1px solid gray;
  min-height:400px;
  float:left;
}

#RightColumn {
  width:311px;
  margin-left:10px;
  margin-right:10px;
  border: 1px solid gray;
  min-height:400px;
  float:right;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The three columns (#LeftColumn, #CenterColumn, #RightColumn) are all floats, so they will not increase the height of #MainContent. Try putting a div (which can be empty) just after those three with clear: both. That will force it to sit below the three columns, and #MainContent will be at least tall enough to include this new div.

    If your problem is instead that #MainContent is too tall, note that it has height: 100%, which you could remove (and then apply the above fix). Hope that helps.

    • 0