Page layout with CSS

[transparent]

I have the following HTML:

<div id="content">

<div id="right">Important Content</div>
<div id="left">Less Important Content</div>
</div>

I'm using the following CSS to re-order the content:

div.content{width:100%;}
div.right{float:right;}
div.left{float:left;}

I want to be able to specify that the div with id=left has a width of 300px and that the div with id=right should expand to fill the remaining space.

How do I do this?

If I just do :

div.content{width:100%;}
div.right{float:right;}
div.left{float:left;width:300px;}

the right hand div doesnt expand to fill the remaining npx

I'm stuck!!

 

[Vragabond]

Try giving your right div a left margin of 300px. That should accomplish what you're looking for.

 

[transparent]

And not floating?

 

[transparent]

Ive done :

div#content {}
div#left{position:relative; width:300px;}
div#right{position:relative;margin-left:310px;}

This works, apart from the fact that the left hand div is sitting below the left hand div!!!

What am I doing wrong??

 

[ChrisHunt]

See if you can adapt this layout to your needs:

http://www.positioniseverything.net/articles/jello.html

.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd