Home/ Questions/Q 99259
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T00:21:12+00:00

I am trying to layout a header for a web site and I would

  • 0

I am trying to layout a header for a web site and I would like to have 4 containers in the header for dropping various user controls into.

The 4 containers need to be positioned top left, top right, bottom left and bottom right inside the main the header container.

So far I can acheive this, the bit I can’t do is that the bottom left and bottom right containers need to be aligned with the bottoms of their containers at the same level.

If I assign a height to #Bottom it works fine but I don’t want to do this as I cannot predict what controls will be on the page and therefore won’t know what height to set.

It needs to work in IE7.

I hope that all makes sense.

I have created a sample app to demonstrate the problem…

<html xmlns='http://www.w3.org/1999/xhtml' > <head runat='server'>     <title></title>     <style type='text/css'>      .clearFloats     {         clear:both;     }      #topLeft     {         float:left;         border: 1px solid blue;         height:50px;     }      #topRight     {         float:right;         border: 1px solid blue;         height:50px;     }      #bottom     {         position:relative;         border: 1px solid green;     }      #bottomLeft     {         float:left;         border: 1px solid red;         position:absolute;         top:0;     }      #bottomRight     {         float:right;         border: 1px solid red;         position:absolute;         top:0;         right:0;     }      </style> </head> <body>     <form id='form1' runat='server'>     <div>         <div id='topLeft'>top left</div>         <div id='topRight'>top right</div>         <div class='clearFloats' />         <div id='bottom'>             <div id='bottomLeft'>bottom left</div>             <div id='bottomRight'>bottom right<br />Some content<br />some more content</div>             <div class='clearFloats' />         </div>     </div>     </form> </body> </html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Sorry I can’t be of more help, but I’m not sure this is possible given the constraints that you have. The main problem is that you want to align to the bottom of the bottom div, but since both bottomRight and bottomLeft are positioned absolute, the items overflow the bottom div. Therefore, using the bottom property aligns them with their bottoms on the (empty) green line in your example.

    The only think I can come up with requires you to know which of your two elements will be taller. You don’t have to know the specific height, but if you can predict which is taller and set it not to use position:absolute, then the container will function and the other (smaller) element will drop into place. Given your example, if you know that bottomRight will be taller:

    #bottomLeft {     float:left;     border: 1px solid red;     position:absolute;     bottom:0; }  #bottomRight {     float:right;     border: 1px solid red; }

    If you don’t know which will be taller ahead of time, I don’t know what else you can do. You need some content inside the bottom div to give it the proper height, so that the ‘position: absolute; bottom: 0‘ style will have the desired effect.

    • 0