Sent by peter newton on 3 November 2005 10:10
Thanks Matthijs,
I looked at the link you gave and some of the other topics on the site
its quite a useful reference.
http://www.alistapart.com/articles/negativemargins
Unfortunately though it did not solve my problem because they were
describing a fixed 200px width RIGHT hand div with the content 1st ie on the
left. In my case the Fixed width is the nav div on the left with the right
div filling the window. I tried fiddling with -ve left margins and %width
hoping to mirror the same result on the left side but no joy.
Basically I've got 2 simple needs from CSS.
1) How can I tell a right floated div to put its left margin 100px in from
the left hand side of the window.
2) How can I put another div in that space so that they will STAY side by
side no matter how you adjust the widow.
Or even more general how can I put 2 divs side by side between a header and
a footer
(left one fixed width) so that the right one fills the remaining window and
they both remain side by side no matter how you adjust the widow.
What is really frustrating is that this layout is a COMMON SIMPLE LAYOUT
used all over the net and I've been pulling my hair for days trying to
achieve this with CSS instead of tables. Surely their MUST be a way of
producing this simple design in a robust way so that you can shrink the
window without one div dropping under the other.(Imagine if I put an image
in the right div just less than the width, someone shrinks the page a tiny
bit and wham the image suddenly dissapear down under). At the moment I can't
even center the content of the main (right hand) div because the div is
stuck over on the right hand side with a large gap between the divs.
Can anyone help with this.
peter
----- Original Message -----
From: "Matthijs van de Water" [EMAIL-REMOVED]>
To: "peter newton" [EMAIL-REMOVED]>
Cc: [EMAIL-REMOVED]>
Sent: Thursday, November 03, 2005 8:22 PM
Subject: Re: [css-d] A Simple 2 column liquid layout problem.
> > I want the right (main) div to FILL (horizontally)
> > the rest of the window, Instead of sitting over on the
> > right hand side leaving a gap between the 2 divs.
>
> The trick is using width:100% and a negative margin.
>
> You should read this article:
> http://www.alistapart.com/articles/negativemargins
>
> Good luck,
>
> Matthijs
> ______________________________________________________________________
> css-discuss [EMAIL-REMOVED]]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
