CSS Layout Challenge :: pure CSS (no tables), 3 column, centered layout placing content as close to possible to the top of html body
Posted on 2004-09-28
Hi experts. Time to put the hammer down and ask for help...
I am trying to create a static layout 'centered' on a page. My #1 goal is to push content to the top of the html above navigation, etc. (e.g: <body><div>content</div><div>topnav</div>><div>header</div>...etc.)
A crude idea of what I am looking to see visually:
| topnav |
| header |
| left | content | right |
| nav | | col |
| | | |
| | |____ |
| | |
| | |
| | |
| footer |
I've read 'glish.com', 'alistapart.com', 'csszengarden.com' and the likes of CSS layout and searched my brains out, so please, no links, solutions only.
total container width: 766px
topnav, header, footer width: 762px centered
left nav width: 162px; text-align: left
right col width: 190px; text-align: center
content width: 410px
Ideally, the left nav would match the height of the content, and the right nav would stop where data ends and allow content to flow underneath.
I realize this is probably impossible and I would gladly give 2000 points if I could to the true CSS expert who can solve this or at least come close!
Thanks in advance!