By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,738 Members | 1,080 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,738 IT Pros & Developers. It's quick & easy.

Two "simple" layouts

P: n/a
I wish to create two simple layouts by using only HTML, CSS and the minimum
JavaScript as possible. Layouts should be "elastic"/"liquid" (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
Jul 20 '05 #1
Share this Question
Share on Google+
1 Reply


P: n/a
In article <bv**********@newsreader1.mclink.it>, no****@nowhere.com
enlightened us with...
I wish to create two simple layouts by using only HTML, CSS and the minimum
JavaScript as possible. Layouts should be "elastic"/"liquid" (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:

These worked in IE6, NN7, and Opera 7. Scrollbar down when resized only.
Make it pretty in a really small window with padding as desired.

<html>
<head>
<title> New Document </title>
<style type="text/css">
body{
text-align: center;
}
#bodyDiv {
width: 90%;
overflow: auto;
text-align: left;
}
</style>
</head>
<body>
<div id="titleDiv">Title here</div>
<div id="bodyDiv">
<div>
a bunch of text a bunch of text a bunch of text a bunch of text a bunch
of text a bunch of text a bunch of text a bunch of text a bunch of text
a bunch of text a bunch of text<br>
a bunch of text a bunch of text a bunch of text a bunch of text a bunch
of text a bunch of text a bunch of text a bunch of text a bunch of text
a bunch of text a bunch of text<br>
a bunch of text a bunch of text a bunch of text a bunch of text a bunch
of text a bunch of text a bunch of text a bunch of text a bunch of text
a bunch of text a bunch of text<br>
a bunch of text a bunch of text a bunch of text a bunch of text a bunch
of text a bunch of text a bunch of text a bunch of text a bunch of text
a bunch of text a bunch of text<br>
a bunch of text a bunch of text a bunch of text a bunch of text a bunch
of text a bunch of text a bunch of text a bunch of text a bunch of text
a bunch of text a bunch of text<br>
a bunch of text a bunch of text a bunch of text a bunch of text a bunch
of text a bunch of text a bunch of text a bunch of text a bunch of text
a bunch of text a bunch of text<br>
a bunch of text a bunch of text a bunch of text a bunch of text a bunch
of text a bunch of text a bunch of text a bunch of text a bunch of text
a bunch of text a bunch of text<br>
</div>
</body>
</html>
The second layout is similar but the inner division is on the right,
wherease on left I have a fixed image.


<html>
<head>
<title> New Document </title>
<style type="text/css">
body{
text-align: center;
width: 90%;
height: 100%;
}
#titleDiv{
position: relative;
top: 0;
height: 10%;
}
#bodyDiv {
width: 70%;
text-align: left;
position: absolute;
top: 10%;
left: 10%;
height: 90%;
}
#imgDiv {
position: absolute;
top: 10%;
width:10%;
height: 90%;
left: 0;
}
</style>
</head>
<body>
<div id="titleDiv">Title here</div>
<div id="imgDiv"><img src="warning.gif"></div>
<div id="bodyDiv">
a bunch of text a bunch of text a bunch of text a bunch of text a bunch
of text a bunch of text a bunch of text a bunch of text a bunch of text
a bunch of text a bunch of text<br>
a bunch of text a bunch of text a bunch of text a bunch of text a bunch
of text a bunch of text a bunch of text a bunch of text a bunch of text
a bunch of text a bunch of text<br>
a bunch of text a bunch of text a bunch of text a bunch of text a bunch
of text a bunch of text a bunch of text a bunch of text a bunch of text
a bunch of text a bunch of text<br>
a bunch of text a bunch of text a bunch of text a bunch of text a bunch
of text a bunch of text a bunch of text a bunch of text a bunch of text
a bunch of text a bunch of text<br>
a bunch of text a bunch of text a bunch of text a bunch of text a bunch
of text a bunch of text a bunch of text a bunch of text a bunch of text
a bunch of text a bunch of text<br>
a bunch of text a bunch of text a bunch of text a bunch of text a bunch
of text a bunch of text a bunch of text a bunch of text a bunch of text
a bunch of text a bunch of text<br>
a bunch of text a bunch of text a bunch of text a bunch of text a bunch
of text a bunch of text a bunch of text a bunch of text a bunch of text
a bunch of text a bunch of text<br>
</div>
</div>
</body>
</html>
--
--
~kaeli~
Who is General Failure and why is he reading my hard disk?
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace

Jul 20 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.