[Pmwiki-users] CSS layout in pmwiki-0.6

Thu Jan 15 17:06:45 CST 2004

On Fri, Jan 16, 2004 at 12:36:06PM +1300, John Rankin wrote:
> 
> I think you need something like:
> 
> div#leftmenu {
>   float: left;
>   width: 120px;
> }
> div#body {
>   margin-left: 150px;
> }
> div#footer {
>   clear: left;
> }

What happens if someone generates a <br clear='all' /> in the output,
e.g., to vertically jump below a floating image?  Would this also cause a 
jump below the left menu <div> if it was fairly long?  (I haven't tested
this at all--I'm just curious what would happen.)

> So I don't understand how to define once "this is how wide the body is,
> this is how wide the side menu is" and have it change all the affected
> layout elements. Of course, that's what styles are for, I just can't see
> how to do it right now.

Oh.  Well, I'll start with a few CSS lines and examples from the new layout 
scheme and we can work to more difficult questions from there.  To set 
the overall width of the HTML layout (formerly in $BodyWidth), one just 
sets the width of the <body> tag:
   body { width:760px; }

The left side menu is held in a table cell called 'wikileft', and we can
set its width directly.
   #wikileft { width:120px; }

The table cell that contains the wikititle and wikitext is called 'wikibody',
and it's pretty well constrained to take up the remaining horizontal space,
so its width is automatically determined (640px in this case).  However, we 
probably don't want the page text to run right up against the left menu, 
so we can add margin or some padding on the left side
   #wikibody { padding-left:10px; }

and, of course, we can explicitly set the width of #wikibody 
having it computed automatically isn't working
   #wikibody { width:640px; }

That's really all there is to it--everything else appears to pretty
much work after that, at least from the various tests I've run.
But I bet there are still lots of skeletons in the CSS closet, so I'm
hoping people will help me find where things don't seem to work right.

Pm