four divs on one page?

[Pierre Jelenc]

I need to lay out a page with five main elements: A fixed div at the top
containing a navigation bar, two side-by-side columns, a centered shopping
cart at the bottom, and a full-window fixed div to provide a border. A
test page is at

http://www.marcvonem.com/discography.html

The navigation bar and absolutely positioned side by side columns look
fine (with a few cosmetic problems that will be dealt with later) but I
cannot figure out how to place the shopping cart under the two columns
(not at the bottom of the window, at the bottom of the page regardless of
the length of the page, which hopefully will grow as they release more
records!)

Any hints?

Pierre
--
Pierre Jelenc | New on Home Office Records: Ethan Lipton
| www.homeofficerecords.com www.ethanlipton.com
The Gigometer | Pepper Of The Earth: the HO blog
www.gigometer.com | www.homeofficerecords.com/blog

[Ivo]

"Pierre Jelenc" <rc**@panix.com > wrote in message
news:c1******** **@reader2.pani x.com...

I need to lay out a page with five main elements: A fixed div at the top
containing a navigation bar, two side-by-side columns, a centered shopping
cart at the bottom, and a full-window fixed div to provide a border. A
test page is at

http://www.marcvonem.com/discography.html

The navigation bar and absolutely positioned side by side columns look
fine (with a few cosmetic problems that will be dealt with later) but I
cannot figure out how to place the shopping cart under the two columns
(not at the bottom of the window, at the bottom of the page regardless of
the length of the page, which hopefully will grow as they release more
records!)

Any hints?

Pierre

The main content is not taking up space because it is absolutely positioned.
That is why the cart div is not low enough. Perhaps place it inside the main
div, or alter the main to be relative. If you knew the height of your
content, you could offset it with that amount, but you don't want to know
the height because as you say, that should grow.
HTH
Ivo

[Karl Smith]

rc**@panix.com (Pierre Jelenc) wrote:

I need to lay out a page with five main elements: A fixed div at the top
containing a navigation bar, two side-by-side columns, a centered shopping
cart at the bottom, and a full-window fixed div to provide a border. A
test page is at

http://www.marcvonem.com/discography.html

The navigation bar and absolutely positioned side by side columns look
fine (with a few cosmetic problems that will be dealt with later) but I
cannot figure out how to place the shopping cart under the two columns
(not at the bottom of the window, at the bottom of the page regardless of
the length of the page, which hopefully will grow as they release more
records!)

Get rid of that absolute positioning.

#discoleft {float: left;}
#discoright {float: right;}
form {clear: both;}

Easy one.

--
Karl Smith.
Interim President,
International Global World "Jonathon Frakes
must never work in films again!" Society

[Eric Jarvis]

Karl Smith go************@ kjsmith.com wrote:

rc**@panix.com (Pierre Jelenc) wrote:

I need to lay out a page with five main elements: A fixed div at the top
containing a navigation bar, two side-by-side columns, a centered shopping
cart at the bottom, and a full-window fixed div to provide a border. A
test page is at

http://www.marcvonem.com/discography.html

The navigation bar and absolutely positioned side by side columns look
fine (with a few cosmetic problems that will be dealt with later) but I
cannot figure out how to place the shopping cart under the two columns
(not at the bottom of the window, at the bottom of the page regardless of
the length of the page, which hopefully will grow as they release more
records!)

Get rid of that absolute positioning.

#discoleft {float: left;}
#discoright {float: right;}
form {clear: both;}

Easy one.

in general it seems best to start by using relative positioning, and only
go to absolute positioning if the design requires it...a lot of people
seem to work the other way around and I'm not entirely sure why...what am
I missing?

--
eric
www.ericjarvis.co.uk
all these years I've waited for the revolution
and all we end up getting is spin

[Neal]

On Sat, 28 Feb 2004 03:43:27 -0000, Eric Jarvis <we*@ericjarvis .co.uk>
wrote:

in general it seems best to start by using relative positioning, and only
go to absolute positioning if the design requires it...a lot of people
seem to work the other way around and I'm not entirely sure why...what am
I missing?

Well, for one I don't fully agree. Floating and absolute positioning each
have their uses, and one cannot do half of what the other does. Rather
than avoid one and use the other, you need to consider which is right for
doing what you want.

And relative positioning hasn't shown itself to be useful to me in page
layout with the exception of setting an otherwise static div as positioned
without even moving it. I can't think of a layout situation where relative
positioning would really be used... ideas?

[Eric Jarvis]

Neal ne*****@spamrcn .com wrote:

On Sat, 28 Feb 2004 03:43:27 -0000, Eric Jarvis <we*@ericjarvis .co.uk>
wrote:

in general it seems best to start by using relative positioning, and only
go to absolute positioning if the design requires it...a lot of people
seem to work the other way around and I'm not entirely sure why...what am
I missing?
Well, for one I don't fully agree. Floating and absolute positioning each
have their uses, and one cannot do half of what the other does. Rather
than avoid one and use the other, you need to consider which is right for
doing what you want.

That's absolutely true. However there's still the question of which to try
first when either will work.
And relative positioning hasn't shown itself to be useful to me in page
layout with the exception of setting an otherwise static div as positioned
without even moving it. I can't think of a layout situation where relative
positioning would really be used... ideas?

The post I was replying to was an example where absolute positioning
failed when relative positioning worked. I very rarely find any need for
absolute positioning.

--
eric
www.ericjarvis.co.uk
"live fast, die only if strictly necessary"

[Neal]

On Sat, 28 Feb 2004 14:08:20 -0000, Eric Jarvis <we*@ericjarvis .co.uk>
wrote:

The post I was replying to was an example where absolute positioning
failed when relative positioning worked. I very rarely find any need for
absolute positioning.

No, Karl used floating. That's quite different from relative positioning.

[Pierre Jelenc]

Karl Smith <go************ @kjsmith.com> writes:

Get rid of that absolute positioning.

#discoleft {float: left;}
#discoright {float: right;}
form {clear: both;}

Thanks, that works but there's something weird. Even though the page still
validates (both HTML and CSS) the links in the main part are all dead:

http://www.marcvonem.com/discography.html

"CD Baby" under each image and in the shopping cart should be links to
various pages on www.cdbaby.com. With Mozilla 1.6 the links are inactive
(no change while hovering, and nothing happens on clicking) even though
they are listed as links in the page info. With older browsers that mess
up the CSS the links are OK, and so are they in text-mode browsers.

The links in the navigation bar at the top are OK everywhere.

Pierre
--
Pierre Jelenc | New on Home Office Records: Ethan Lipton
| www.homeofficerecords.com www.ethanlipton.com
The Gigometer | Pepper Of The Earth: the HO blog
www.gigometer.com | www.homeofficerecords.com/blog

[Harlan Messinger]

rc**@panix.com (Pierre Jelenc) wrote:

Karl Smith <go************ @kjsmith.com> writes:

Get rid of that absolute positioning.

#discoleft {float: left;}
#discoright {float: right;}
form {clear: both;}
Thanks, that works but there's something weird. Even though the page still
validates (both HTML and CSS) the links in the main part are all dead:

http://www.marcvonem.com/discography.html

"CD Baby" under each image and in the shopping cart should be links to
various pages on www.cdbaby.com. With Mozilla 1.6 the links are inactive
(no change while hovering, and nothing happens on clicking) even though
they are listed as links in the page info. With older browsers that mess
up the CSS the links are OK, and so are they in text-mode browsers.

As soon as I removed position: fixed; from the #mainbox the links
reactivated.
The links in the navigation bar at the top are OK everywhere.

Pierre

--
Harlan Messinger
Remove the first dot from my e-mail address.
Veuillez ôter le premier point de mon adresse de courriel.

[Karl Smith]

rc**@panix.com (Pierre Jelenc) wrote:

Karl Smith <go************ @kjsmith.com> writes:

Get rid of that absolute positioning.

#discoleft {float: left;}
#discoright {float: right;}
form {clear: both;}

Thanks, that works but there's something weird. Even though the page still
validates (both HTML and CSS) the links in the main part are all dead:

http://www.marcvonem.com/discography.html

The links in the navigation bar at the top are OK everywhere.

That's a z-index issue - when links don't work it means they're
"behind" some transparent element with a higher z-index. Check
anything you've absolutely positioned, something is probably a lot
bigger than you intend.

E.g., that menu at the top should have "position: absolute", z-index,
top, width, and height - but *not* left, right, or bottom -
properties set.

--
Karl Smith.
Interim President,
International Global World "Jonathon Frakes
must never work in films again!" Society