CODEWITHSUNDEEP
htmlcssmaster-pages
user153923
user153923

Reputation:

CSS for DIV tag is working incorrectly

Somehow the CSS is going awry.

In my CSS class, the maincontent section is defined as

CSS:

.page {
  background: #B5AAAA; /* Hoof color */
  margin: 20px auto 0px auto;
}
.main {
  position: absolute;
  /* I commented this out because it is new to me.
     I was not sure if it was causing my issues or not.
  min-height: 420px;
  min-width: 960px;
  */
  top:150px;
}
.maincontent {
  background-color: #F2E6E6; /* Almost white, just a tad on the maroon side */
  position:absolute;
  border: 1px solid #4D0000;
  overflow: auto;
  left:110px;
  top:0px;
  height: 500px;
  width:100%;
}

Cutting out all of the unrelated parts of my Site.Master's HTML, I have this left:

Site.Master:

<body>
  <form runat="server">
    <asp:scriptmanager runat="server"></asp:scriptmanager>
    <div class="page">
      <div class="main">
        <div class="maincontent">
          <asp:ContentPlaceHolder ID="MainContent" runat="server"/>
        </div>
      </div>
    </div>
  </form>
</body>

Here is the section from the page that inherits it:

Sales.aspx:

<asp:Content ID="mainContent" ContentPlaceHolderID="MainContent" runat="server">
  <table border="1" >
  ... // lots of rows and columns
  </table>
  ...

So, does anyone understand why I am seeing 102px for the width of my table below?

I'd like that particular to fill the rest of the space to the Right.

Google Chrome "Inspect Element" Screenshot:

screenshot

Upvotes: 0

Views: 60

Answers (2)

David Randall
David Randall

Reputation: 770

When you absolute position something the browser needs to know what to absolutely position it against. If no positining context is created it will simply position it against the body. You need to create a new positioning context for the parent container, in this case "page"

.page {
  position: relative;
  width: 100%;
}

Edit:

It would be safer to avoid the use of absolute positioning and rely on margins for the layout:

.page {
  background: #B5AAAA; /* Hoof color */
  margin: 20px auto 0px auto;
  position: relative;
  width:100%;
}
.main {
  margin-top: 150px;
}
.maincontent {
   background-color: #F2E6E6; /* Almost white, just a tad on the maroon side */  
   border: 1px solid #4D0000;
   margin-left: 110px;
}

Upvotes: 1

Adam Jessop
Adam Jessop

Reputation: 91

The problem is that the maincontent div doesn't have any knowledge of what it should be 100% of, it will be 100% of the size of its nearest position:relative (or absolute) parent.

So set 

 .page{
    width:100%;
    position:relative
  }

Upvotes: 3

Related Questions