Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Cascading Style Sheets _ How to position properly?

Posted by: Alex McP Feb 11 2008, 11:08 AM

Hi, I have a site:



http://www.neep.org/HPSE/csstemplate/index.php



with a fixed width, centered content area. I want the effect of two div’s (#columnB and .slide) to hang out over the edge (to the left and right respectively)



I tried absolute positioning first, and realized that they won’t scale with different browser widths. I tried relative, but the “hole” left behind was too large, and when I added new content to columnA, columnB just sunk lower and lower. I want both elements to be pegged to the borders, and not move when anything is resized. What’s the best way to achieve this effect?

Thanks so much,
Alex

Posted by: Darin McGrew Feb 11 2008, 11:21 AM

There are a number of CSS-based 3-column layouts to choose from:
http://www.glish.com/css/
http://www.maxdesign.com.au/presentation/page_layouts/
http://webhost.bridgew.edu/etribou/layouts/skidoo/
http://bluerobot.com/web/layouts/

Posted by: psycosis12 Feb 11 2008, 11:21 AM

Ah, o.k. he meant 3 column layouts...I thought he was talkin' about having it just hang over the container div like over-lap it.

Posted by: Darin McGrew Feb 11 2008, 11:39 AM

To be honest, I'm not quite sure what Alex wants. It seems to be a 3-column layout with a particular styling of borders, but I'm not sure what the styling is. Still, the 3-column layout is a better place to start than a fixed-width 1-column layout.

Posted by: Dr Z Feb 11 2008, 09:31 PM

QUOTE(Alex McP @ Feb 11 2008, 08:08 AM) *

Hi, I have a site:



http://www.neep.org/HPSE/csstemplate/index.php



with a fixed width, centered content area. I want the effect of two div’s (#columnB and .slide) to hang out over the edge (to the left and right respectively)



I tried absolute positioning first, and realized that they won’t scale with different browser widths. I tried relative, but the “hole” left behind was too large, and when I added new content to columnA, columnB just sunk lower and lower. I want both elements to be pegged to the borders, and not move when anything is resized. What’s the best way to achieve this effect?

Thanks so much,
Alex



Take a look at http://web-zonez.com/revolution/zonez/index.html, it may give you some some ideas and/or some unorthodox alternatives.

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)