Basic CSS Content Placement Question

[Rangy]

Hi,

Say you have a simple layout as follows (all DIVs):

Header
Content Column
Footer

What is the best way to align and position the content WITHIN the
"Column" div? In the past I would have used nested tables but I'm not
sure of how "the pros" out there do it.

I saw some suggestions about creating a child element (e.g. <p>) and
then using absolute positioning with a parent (h1) element that is set
for relative positioning.

Any advice is greatly appreciated. There must be a better way than
<br>!

Thanks!
Rangy

 

[Adrienne Boswell]

Rangy wote:

Hi,

Say you have a simple layout as follows (all DIVs):

Header
Content Column
Footer

What is the best way to align and position the content WITHIN the
"Column" div? In the past I would have used nested tables but I'm not
sure of how "the pros" out there do it.

I saw some suggestions about creating a child element (e.g. <p>) and
then using absolute positioning with a parent (h1) element that is set
for relative positioning.

Any advice is greatly appreciated. There must be a better way than
<br>!

Thanks!
Rangy

I don't have my crystal ball with me today, but I'll bet that Column
is for navigation, isn't it? How about
<ul id="nav">
<li><a href="somewhere.html"></li>
<li><a href="thispage.html" id="thispage"></li>
</ul>

Depending on how you are generating the page (by hand static) or
server side, you can use the id="thispage" to make that link different
from the others so people will know that they are on that page.

 

[Bergamot]

I saw some suggestions about creating a child element (e.g. <p>) and
then using absolute positioning with a parent (h1) element that is set
for relative positioning.

Unless you know what you are doing, you should avoid absolute
positioning. The inexperienced often end up with broken design.

What to do instead is dependent on the particular content and what you
are really trying to achieve. There is no one best way.

BTW, nesting <p> inside <h1> is invalid. And relative positioning
probably isn't what you think it is. Read the specs at
http://www.w3.org/TR/CSS21/visuren.html