Another CSS question. |
[Aug. 4th, 2007|03:48 am]
Kake
|
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. |
|
|
Comments: |
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?
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.
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.
![[User Picture]](https://l-userpic.livejournal.com/116166715/889435) | From: nou 2007-08-04 09:24 am (UTC)
| (Link)
|
What's an xdiv?
Yes, I do want the text to wrap around the menu boxes, rather than having a big white gap.
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.
![[User Picture]](https://l-userpic.livejournal.com/116166715/889435) | From: nou 2007-08-04 09:37 am (UTC)
| (Link)
|
Hurrah, thank you! The top two boxes will be fixed height, so that's not a problem.
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.
![[User Picture]](https://l-userpic.livejournal.com/116166715/889435) | From: nou 2007-08-04 07:40 pm (UTC)
| (Link)
|
Fear not. What you can see is only a very rough sketch. I promise to make sure the end result is usable.
oh, and tested on Moz, IE6 and IE7 FWIW. And I'm not even dressed yet :) | |