Log in

No account? Create an account
I know it's wonky and I don't care [entries|archive|friends|userinfo]

[ website | My Website ]
[ userinfo | livejournal userinfo ]
[ archive | journal archive ]

[Links:| Randomness Guide to London | Open Guide to Cambridge | Snake Soup | KakeFlickr ]

Another CSS question. [Aug. 4th, 2007|03:48 am]

Hello. I have a web design that I can almost, but not quite, get to work. Example here. What I want is for the lorum ipsem text and its header to start in the top right-hand corner instead of being below the purple boxes. But I want that part of the page to be fluid, not fixed-width. How do I do that?

(Screenshot here if your browser doesn't show three overlapping purple boxes in the top left-hand corner — and if your browser doesn't do that, please tell me what it does do and what browser it is.)

If it's not clear: This shows what I want to happen.

[User Picture]From: zonereyrie
2007-08-04 03:26 am (UTC)
Two columns - one with the boxes and one with the text?

A div with 'float: right'?

Or, conversely, put the boxes in a div a 'float: left' so the text starts to their right?
(Reply) (Thread)
[User Picture]From: drplokta
2007-08-04 07:06 am (UTC)
Yes, wrap all three boxes in another div with "float:left" defined on it. That does what you want in Firefox, haven't tested in IE or Safari.
(Reply) (Thread)
[User Picture]From: perlmonger
2007-08-04 09:19 am (UTC)
Here's my first bite.

It's trickier if you want the main text to wrap closely around all three menu boxen; I'm thinking on approaches to that.
(Reply) (Thread)
[User Picture]From: nou
2007-08-04 09:24 am (UTC)
What's an xdiv?

Yes, I do want the text to wrap around the menu boxes, rather than having a big white gap.
(Reply) (Parent) (Thread)
[User Picture]From: perlmonger
2007-08-04 09:35 am (UTC)
A commented out div! :)

How about this? It works, but at the price of two non-structural divs, and would need javascript if the top two boxes were of flexible height.
(Reply) (Parent) (Thread)
[User Picture]From: nou
2007-08-04 09:37 am (UTC)
Hurrah, thank you! The top two boxes will be fixed height, so that's not a problem.
(Reply) (Parent) (Thread)
[User Picture]From: caramel_betty
2007-08-04 01:58 pm (UTC)
Just as an aside from a design point of view (and not criticising your code, which seems to solve the question admirably)...

If the end result is intended to have a stream of continuous text in the top right, flowing around the boxes, I find it really, really uncomfortable to read. And it violates several of the basic rules of design I've been taught about making such things readablem which heavily recommend straight-line margins as far as possible.
(Reply) (Parent) (Thread)
[User Picture]From: nou
2007-08-04 07:40 pm (UTC)
Fear not. What you can see is only a very rough sketch. I promise to make sure the end result is usable.
(Reply) (Parent) (Thread)
[User Picture]From: perlmonger
2007-08-04 09:36 am (UTC)
oh, and tested on Moz, IE6 and IE7 FWIW. And I'm not even dressed yet :)
(Reply) (Parent) (Thread)