Home/ Questions/Q 4028078
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T11:10:34+00:00

Trying to achieve this with relative/absolute positioning and floating Col1 Col2 ———————————————————— – H1

  • 0

Trying to achieve this with relative/absolute positioning and floating

                 Col1                         Col2
------------------------------------------------------------
-  H1 Content aligned to top          - Some Content       -
-                                     -                    -
-                                     -                    -
-                                     -                    -
-                                     -                    -
-                                     -                    -
-                                     -                    -
- Some other content aligned to bot   -                    -
------------------------------------------------------------

Col2 drives the height of Col1

I either don’t get the height in col1 or col2 ends up overlapping Col1 when i use absolute pos on the items within Col1

Any help?

Thanks

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Best solution I have is with a fixed-height container:

    <div id="news">
  <div class="news-panel" id="left-news">
    <h2>Side Header</h2>
  </div>
  <div id="footer-news">
    <h2>Side Footer</h2>
  </div>
  <div class="news-panel" id="right-news">
    Main Content
  </div>
</div>

div#news { margin: 0px auto; position: relative; width: 895px; height: 208px; border: 1px solid gray; }
div#news div.news-panel { position: absolute; top: 0; }
div#news div#footer-news { position: absolute; bottom: 0; }
div#news div#left-news { left: 0; margin-right: 60px; width: 390px; border: 1px solid red; }
div#news div#right-news { width: 437px; right: 0px; }

    sort of works although I’d hoped not to specify a height – here it is working (see the “What’s happening” section): AgileApps

    • 0