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
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
Comment