1 reply [Last post]
chewmanfoo
chewmanfoo's picture
Offline
Regular
North Texas, USA
Last seen: 8 years 49 weeks ago
North Texas, USA
Timezone: GMT-6
Joined: 2003-06-15
Posts: 21
Points: 11

How is this done, without tables?

+-------------------------------------------------------------------+
|   TL Box   |                                         |   TR Box   |
|            |                                         |            |
--------------                                         --------------
|                                                                   |
|                            Content...                             |   <--- this is hard to draw
|                                                                   |        in a text box!
|                                                                   |
|--------------                                        -------------|
|    BL Box   |                                        |    BR Box  |
+-------------------------------------------------------------------+

(easier to see if your browser is maximized... sorry)

See what I want to do? I have four boxes, positioned at the opposite corners of the panel. I would like them to autosize, based on the width of the content in them if possible. I need them to hang to the edges, regardless of whether the browser window is resized.

I also can't figure out the bottom boxes. They seem to be floating, but when I float them, they appear immediately underneath the top boxes, and certainly not hangng to the bottom of the panel.

Is this possible?

dJomp
dJomp's picture
Offline
Enthusiast
Last seen: 3 years 41 weeks ago
Joined: 2003-03-23
Posts: 422
Points: 0

boxes without tables

<html>
<body style="text-align : center;">
<div style="float:left; border : 1px solid red">Blah blah blah.<br>Wibble wobble</div>
<div style="float:right; border : 1px solid red">Blah blah blah.<br>Wibble wobble</div>

Here is some content<br>Here is some content<br>(repeat ad infinitum)

<div style="float:left; border : 1px solid blue">Blah blah blah.<br>Wibble wobble</div>
<div style="float:right; border : 1px solid blue">Blah blah blah.<br>Wibble wobble</div>
</body>

It's not perfect, the two bottom boxes are aligned by the top, but it's the best effect you'll get.

You can position them absolutely:

<div style="border : 1pt solid black; height : 100%;">
	<div style="float:left; border : 1px solid red">Blah blah blah.<br>Wibble wobble</div>
	<div style="float:right; border : 1px solid red">Blah blah blah.<br>Wibble wobble</div>

content content content

	<div style="position : absolute; border : 1px solid red; bottom : 0px; left : 0px;">Blah blah blah.<br>Wibble wobble</div>
	<div style="position : absolute; border : 1px solid red; bottom : 0px; right : 0px;">Blah blah blah.<br>Wibble wobble</div>

</div>

but then they're not in the normal flow and the content will go underneath/on top of the boxes. And they won't scroll with the page. But they will appear at the bottom of the 'first' page (when the page is first loaded, before you scroll).

You know you're a geek when you try to shoo a fly away from the monitor with your cursor.