Re: [LUG] CSS Woe

[Neil Williams <linux@xxxxxxxxxxxxxx>]

On Saturday 14 August 2004 6:48, David Johnson wrote:
> Hi all,
>
> What I'm trying to create is a simple 2 column site with a navigation box
> on the left and then the content on the right.
>
> I don't want to use tables

good

> or float

bad. (really can be very useful, you know - they're all over DCLUG. You just 
need to always set a <div style="float:none;clear:both;">&nbsp;</div> before 
changing layout.)

> if I can avoid it. Surely there is a  
> simple way to do this?

CSS has two basic methods:
1. use float
2. use positioning.

Float moves the columns with the window size, positioning doesn't. (Percentage 
positioning isn't that useful - it can be very ugly.)

> I just want to move the content div into the right-hand column.

The right hand column starts at 151px, relative to contentarea, so set 
position:relative;left:151px;

You'll notice that the border on the right is now overwritten.

Either reduce the width of content by 151px OR set the Z position so that the 
contentarea is higher than the content. Note that this would chop any content 
that went passed the border.

To have content start at the same vertical position as nav, set the top 
position as negative. The position value must be equal to the line-height 
which, in turn, must be equal in both div's.

Your mistakes were:
1. not to set a font size
2. not to set relative positioning
3. not to set left as left-column+padding (I've chosen 1, you can use more).
4. not to set top as line-height * -1

body { background-color: white; }
.contentarea { 
       width: 645px;
       height:50px;
       font: sans-serif 1em;
       background-color: white; 
       margin-left: auto; 
       margin-right: auto;
       border-top: 1px solid black; 
       border-left: 1px solid black; 
       border-right: 1px solid black; 
       border-bottom: 1px solid black; 
}
.nav { 
       width:150px;
       height:1em;
       position:relative;
       font: sans-serif 1em;
       line-height:1em;
       background-color: white;
       border-right: 1px dashed gray; 
}
.content { 
       width: 344px;
       height:1em;
       font: sans-serif 1em;
       position:relative;
       line-height:1em;
       left:151px;
       top:-1em;
       background-color: white; 
} 


-- 

Neil Williams
=============
http://www.codehelp.co.uk/
http://www.dclug.org.uk/
http://www.isbn.org.uk/
http://sourceforge.net/projects/isbnsearch/

http://www.biglumber.com/x/web?qs=0x8801094A28BCB3E3

Attachment: pgp00025.pgp
Description: signature