Beginner converting from tables -- probably very simple answer

[Rangy]

Hi,

I've decided to take the plunge and move from tables to a pure css
layout. I still "think" in tables when I do my layouts and I was
wondering the following:

I have a simple, standard two column layout:

header
nav content
footer

The items are in a 720px #wraper and the nav column is 200px wide and
the content is 500px wide.

How do I position am image, for example, specifically in the content
area? Does the image needs it's own div?

Should I use relative positioning so that the image (call it
image.jpg) is relative to the content div, and if so should I place
the image using padding? Or assign it an absolute position relative to
the content container div

Similarly, what do you do with two or three images? It seems that a
DIV for each can't be the best way ......

How you achieve this in real practice?

e.g. <div id="content">
<div id="imageOne">
<a href......>
</div>
<div>

<style>
#imageOne
{
padding: 20px
}
Thanks in advance for your help,
Rangy

[Jukka K. Korpela]

Scripsit Rangy:

I've decided to take the plunge and move from tables to a pure css
layout.

Why? That's an expensive exercise in futility when applied to existing
pages, and makes things just more difficult for new pages _unless_ you are
also changing the whole mental model of design (and layout).

I have a simple, standard two column layout:

header
nav content
footer

Crucial question: Is navigation useful? Well, yes, of course it is
indispensable, but is it useful to _keep a navigation block visible_ at any
time at any cost? The sure cost includes waste of space, and in your
"standard" layout this means wasting the precious horizontal space. For all
that you can know, the horizontal dimension of the available space ranges
from zero to infinity, and on the average it's probably smaller than you
think.

The items are in a 720px #wraper and the nav column is 200px wide and
the content is 500px wide.

That's part of a wrong mental model. A fixed width of 720 pixels is simply
too much in many circumstances.

How do I position am image, for example, specifically in the content
area?

It depends on how you wish to position it. But that's too early a question
now.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

[Ben C]

On 2007-03-04, Rangy <da*******@gmail.comwrote:

Hi,

I've decided to take the plunge and move from tables to a pure css
layout. I still "think" in tables when I do my layouts and I was
wondering the following:

I have a simple, standard two column layout:

header
nav content
footer

The items are in a 720px #wraper and the nav column is 200px wide and
the content is 500px wide.

How do I position am image, for example, specifically in the content
area? Does the image needs it's own div?

Probably not, unless you want to give it a little centred caption or
something. Just put the <imgin the content div, and it will display in
the content area, assuming you've done your two column layout in a
fairly sensible way. Use display: block or perhaps float on the <img>
element directly to change the image's position if you need to.

Should I use relative positioning so that the image (call it
image.jpg) is relative to the content div, and if so should I place
the image using padding? Or assign it an absolute position relative to
the content container div

Relative positioning isn't relative to the content div, but relative to
where the element's own box would have been if it hadn't been positioned
at all. The browser does everything as if the element had been normal
flow, and then at the last minute translates the element's box(es) by
the relative offset you've provided, leaving a gap behind it.

Absolute positioning is relative to the containing block. Fixed
positioning is relative to the viewport. The terms are highly confusing.

Similarly, what do you do with two or three images? It seems that a
DIV for each can't be the best way ......

Just put the imgs in and style them directly, no need for divs until you
run into some problem that specifically requires them.

How you achieve this in real practice?

e.g. <div id="content">
<div id="imageOne">
<a href......>
</div>
<div>

<style>
#imageOne
{
padding: 20px
}

You need to give more information about the end result you want.

[Rangy]

Thanks very much for your help. The questions was more general --
about generically placing images and other content within a "column
div" --- and you answered it.

Much appreciated.
Rangy

On Mar 4, 4:29 am, Ben C <[e-mail]:

On 2007-03-04, Rangy <[e-mail]:

Hi,

I've decided to take the plunge and move from tables to a pure css
layout. I still "think" in tables when I do my layouts and I was
wondering the following:

I have a simple, standard two column layout:

header
nav content
footer

The items are in a 720px #wraper and the nav column is 200px wide and
the content is 500px wide.

How do I position am image, for example, specifically in the content
area? Does the image needs it's own div?

Probably not, unless you want to give it a little centred caption or
something. Just put the <imgin the content div, and it will display in
the content area, assuming you've done your two column layout in a
fairly sensible way. Use display: block or perhaps float on the <img>
element directly to change the image's position if you need to.

Should I use relative positioning so that the image (call it
image.jpg) is relative to the content div, and if so should I place
the image using padding? Or assign it an absolute position relative to
the content container div

Relative positioning isn't relative to the content div, but relative to
where the element's own box would have been if it hadn't been positioned
at all. The browser does everything as if the element had been normal
flow, and then at the last minute translates the element's box(es) by
the relative offset you've provided, leaving a gap behind it.

Absolute positioning is relative to the containing block. Fixed
positioning is relative to the viewport. The terms are highly confusing.

Similarly, what do you do with two or three images? It seems that a
DIV for each can't be the best way ......

Just put the imgs in and style them directly, no need for divs until you
run into some problem that specifically requires them.

How you achieve this in real practice?

e.g. <div id="content">
<div id="imageOne">
<a href......>
</div>
<div>

<style>
#imageOne
{
padding: 20px
}

You need to give more information about the end result you want.