Tue, 2003-05-27 19:42
Hi there.
I'm pretty new to CSS and am currently developing my first major site.
I'd like to avoid using absolute positioning for text blocks to avoid problems with font scaling.
I'm trying to layout a header block that contains another block in the top left and one in the bottom right. Both should size to the left to fit their content.
I've enclosed a layout using absolute position. The green and red blocks should be the top right and bottom right of the blue block respectively, even though in the layout they don't quite line up (it's a quick mock up)
The blue block will not contain any content and is just for grouping (there will be an image behind it, but I intended using an image on the body tag)
The green block lines up fine, but the red is causing me a real headache.
I've tried all manner of combinations of relative position, float, top, right, bottom etc. to no avail.
Ideally it should be standards compliant and work in as many browsers as possible.
Any help would be gratefully received.
Tue, 2003-05-27 20:02
#1
why not absolute?
So you want this design (supplied using absolute postioning) converted to relative positioning? I am unclear as to why you want to avoid absolute positioning? What is the issue you are refering to with font scaling?
Thanks!
Tue, 2003-05-27 20:19
#2
Bottom aligned divs to parent block
I assume the font scaling one is of people viewing the site with different sized fonts... ie the site could be set up for 10px, but someone has their browser set to a larger font size, and so the layout falls on it's face and doesn't show some text.
It might be possible - do you want the height of the blue div set, or is the red div just meant to appear at the bottom of the page?
Tue, 2003-05-27 20:20
#3
solution.. i think.
The attached file is an example of what I think you were looking for. I put the Layer2 and Layer3 divs inside of what used to be the Layer1 div, and renamed that 'header'. Layer2 is float right relative to 'header' and Layer3 is absolute positioned from the top, to avoid IE 5.5 issues on the PC. Let me know if this works for you.
Tue, 2003-05-27 20:52
#4
Fixed by a rethink
Thanks for the pointers.
Sorry I wasn't clearer in my text or the example. Fuddled brain.
I don't want to use absolute positioning if possible, because even if the fonts are relative in size changing them can muck the page up because the absolute elements can't flow around them. The newly redesigned http://www.fastcompany.com is an example of this.
Anyway, back to my problem:
In my previous sample, the blue box is fixed height, so to give a area that the background image will show through. The main content goes below the example I enclosed.
I solved the problem however, after playing around for a while. I've attached the final code below. The blocks are differently positioned and there is a <div> block there just for positioning which doesn't seem too clean to my way of thinking but it gives the right effect.
This CSS business is more challenging fun than I first expected.
Wed, 2003-05-28 13:49
#5
good solution
Ah... now I see what you needed. Good clean solution. looks nice.