Re: Beginner converting from tables -- probably very simple answer

On 2007-03-04, Rangy <davidwank@xxxxxxxxx> wrote:
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 <img> in 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.
.

Relevant Pages

  • Re: equal height floated columns
    ... That limits your options to about nil as ABS positioning is the only CSS ... method that can be considered as suitable for creating a layout that is ... definitely need to have a DIV and float structure. ...
    (comp.infosystems.www.authoring.stylesheets)
  • Re: text between two images, floats the best?
    ... based layout to CSS. ... I took the out of the div ... appearance of centredness if you have enough text. ... *much* bigger right padding and the right a much bigger left ...
    (comp.infosystems.www.authoring.html)
  • Re: Filling remainder of height
    ... Using tables for layout, while frowned upon by some, isn't ... regardless of whether the bulk of yours use old browsers or not. ... can be added to a DIV tag that can't be added to a table, ...
    (alt.html)
  • Re: 2 divs on same line
    ... Tables (when used as a way to perform the overall layout) are quite rigid ... design your prefer... ... Software Developer & Consultant ... by default a div will render on a separate line. ...
    (microsoft.public.dotnet.framework.aspnet)
  • Re: Beginner converting from tables -- probably very simple answer
    ... Does the image needs it's own div? ... assuming you've done your two column layout in a ... Or assign it an absolute position relative to ... Absolute positioning is relative to the containing block. ...
    (comp.infosystems.www.authoring.stylesheets)