CODEWITHSUNDEEP
asp.nethtmlcssxhtml
kingrichard2005
kingrichard2005

Reputation: 7269

HTML element overlap

I'm working on a ASP.Net web page with two tables positioned in the center of the page with one on top of the other. The table on top contains input fields that are dynamically generated by the code-behind, so the number of input fields varies. The table on the bottom contains content that is constant and doesn't change. The layout of the page is fixed and must remain so. My question is, how do I make the bottom table dynamically adjust vertically so that it doesn't overlap with the fields from the top table. The general HTML layout of the page is something like the following:

<body style="vertical-align: middle; text-align: center;">
    <div id="container" style="position: relative; width: 910px; margin: 0px auto;">
    <form>
         <div style="width: 908px; text-align: center; margin: 75px auto; position: absolute; top: 0px; visibility: visible;">
             <table id="topTable"></table>
         </div>
    
         <table id="bottomTable" style="width: 908px; margin: 0px auto; position: absolute; top: 400px;"></table>
    </form>
    </div>
</body>

The effect I'm trying to achieve is the following:

Top Table Content

Field 1: ...

Field 2: ...

Field 3: ...

.

.

.

etc.

Bottom Table Content

Submit Button

I'm thinking I could wrap the bottom table in a div, but I'm not sure what specific styling will achieve the desired effect. I basically want to maintain the fixed positioning horizontally, but have the vertical alignment adjust to prevent overlap with the top.

UPDATE:

Here is a screen cap that shows the two tables overlapping. The buttons you see are in the bottom table, the fields are supposed to be on the top, all elements are positioned absolutely in the center of the browser screen.

enter image description here

UPDATE 2:

I updated the HTML sample above with the styles that are currently in use.

Upvotes: 0

Views: 3797

Answers (2)

Llyle
Llyle

Reputation: 6166

The reason the overflow is happening is because you use absolute positioning. (position: absolute;) The overflow you are experience is expected because your bottom table is also absolute positioned.

If you are wanting the bottom table to be below the top table then try this:

<div style="position: absolute; top: 0px;">
    <table id="topTable">
    ...
    </table>
    <table id="bottomTable">
    ...
    </table>
</div>

Here we have put the bottom table inside the div that wraps the top table and also removed the absolute positioning.

Upvotes: 1

Farzin Zaker
Farzin Zaker

Reputation: 3606

When you list, two div elements in a sequence, second div will go up and down with decrease or increasing size of first div element. (with no float = clear:both CSS and also absolute positioning)

you just need to remove your position:absolute css property from your elements and care placing of your element in your tables correctly. remember to don't assign height to div or table elements.

If you place each element, in right cell of table, no bad happens. so just do it, but carefully.

just change your code like this :

<body style="vertical-align: middle; text-align: center;">
<div id="container" style="position: absolute;top:0px; width: 910px; 
     margin: 0px auto;">
   <form>
      <div style="width: 908px; text-align: center; margin: 75px auto;">
          <table id="topTable"></table>
      </div>

      <div style="width: 908px; text-align: center; margin: 75px auto;">
          <table id="bottomTable" style="width: 908px; margin: 0px auto;"></table>
      </div>
   </form>
</div>

Upvotes: 0

Related Questions