CSS positioning question
July 25, 2005
Most sites that use a two-column layout—one like mine, for example—use the float property to move one section to a side and have the flow push the next to the other. Here’s a quick and dirty mockup of what I am talking about:
Now, the Classic WP layout used a relative an absolute positioning for its sidebar. When I was developing Shiva I tried to use the Stopdesign method of absolute positioning something inside a relatively positioned box, but my colossal sidebar did something like the next mockup:
Now, the question at hand would be, could the same layout on this site, without running into overflow problems, be achieved using relative positioning for all three boxes? (Red, black and blue.) Like so:
By what I know, I don’t think so, but if it could, it could solve my problems with floated elements.
UPDATE: For one thing, if I DIDN’T use a floated box anywhere in my content, and I posted an image that was too wide for either box the layout wouldn’t break. It would just run on past the box.
UPDATE 2: Just so we’re clear on the order of the document structure itself, the black box is a containing div which wraps both Blue and Red, in that order. I don’t do my sidebars early in the document.
Jay, first, thanks for adding me to your blogroll.
On the CSS dealie, I’m having a similar problem with overflow using CSS positioning. It seems to be mostly IE where the problems come up.
Without floating, I don’t think you can get a relatively positioned div to line up vertically with another div. Your red box has no idea how far up the y coordinate it’s supposed to go because you can’t predict the height of the blue box.
In your second example, did you have the right margin of the blue box set to the-width-of-the-red-box?
Brian,
Thanks for blogrolling me, too. I don’t check my referrers much and I haven’t checked for my incoming links in a while. I found yours Googling for sites that I have made because I have lost track of them already.
In the second example, the Blue Box should have a height and a width attached to it. I read that in IE there should be a height attached to both the containing div that is relatively positioned and what would be the Blue Box in my example, but unfortunately the containing div (black) does not wrap around the red, absolutely positioned div. IF—and I do mean IF—this is how the CSS spec writers conceived absolute positioning to be I will drop it. In a way it sorta kinda makes sense because an absol. positioned div is supposed to be taken “out of the normal flow” of “things, but I figure that it should be taken within the “flow” of its relatively positioned containing box.
As for Example 3. It was well worth the shot asking. I tried using vertical align: top but to no avail.
I think an absolutely-positioned box will be positioned within its parent only if the parent’s position (either rel or abs) is explicitly set. You can’t rely on relative positioning being the default.
The red box will be positioned within the black box, but won’t take up any volume, so there’s nothing to make the black box border go around the red box. To make the black box wide enough, you could set the width to 100% (I think this is problematic in some browsers), to a specific pixel width (not good for the variety of screen sizes out there), or try to use the relative blue box (which has volume in black’s eyes) to make the black box wide enough, as with the right-margin.
OK, I’m all geeked out.
CSS positioning gives me a massive headache. I used absolute positioning for the sidebar and floated the main body to the left (and fixed the width of it so it doesn’t flow into the sidebar). And I use percentage widths.
It seems to more-or-less work.