Two "simple" layouts

Collapse
This topic is closed.
X
X
 
  • Time
  • Show
Clear All
new posts
  • Dario de Judicibus

    Two "simple" layouts

    I wish to create two simple layouts by using only HTML, CSS and the minimum
    JavaScript as possible. Layouts should be "elastic" (no fixed widths and
    heights) and cross-browser enabled.

    The first one is a non-scrollable page which contains a centered title and a
    centered division with automatic scrolling on overflow, that is:

    +---------------------+
    | TITLE |
    | +--------------++ |
    | | || |
    | | || |
    | | || |
    | | || |
    | +============== ++ |
    +---------------------+
    LAYOUT 1

    When the page resizes, the inner division should resize accordingly.
    The second layout is similar but the inner division is on the right,
    wherease on left I have a fixed image.

    +---------------------+
    | TITLE |
    | +---+ +--------++ |
    | | | | || |
    | | | | || |
    | +---+ | || |
    | | || |
    | +========++ |
    +---------------------+
    LAYOUT 2

    Note that it is VERY important do not assume pre-defined widths or heights.
    Layouts should be all based on percentages and relative values.
    Cross-browsing prevents iframe usage.

    I was able to do that on IE, but it does not work in firebirds and other
    browsers. I used mostly <DIV>. I tried also <TABLE> but with no success. The
    box model is different for different browsers, and scroll bars sometimes do
    not appear, or appear when they should not, or sizing or positioning is
    wrong.

    Any help appreciated.

    Dario de Judicibus


  • kaeli

    #2
    Re: Two &quot;simple&qu ot; layouts

    In article <bvqdun$1dgj$1@ newsreader2.mcl ink.it>, nospam@nowhere. com
    enlightened us with...[color=blue]
    >
    > Any help appreciated.
    >[/color]

    Not a bit of this requires javascript. Just good CSS.
    Ask over in comp.infosystem s.www.authoring.stylesheets

    --
    --
    ~kaeli~
    Why did kamikaze pilots wear helmets?



    Comment

    Working...