Making the 'float' property more versatile

I'd like to propose an enhancement to the 'float' property:

Preface: The 'float' property is very useful when it comes to do a dynamic 
layout on block elements. It's the only way to create something like: "Put 
as many block elements as possible in a row and wrap at the right border (or 
left border, resp.) of the current containing box". Using tables you can 
only do a fixed layout like: "Put {n} block elements into a row and repeat 
this for each table row."

What I'm describing is similar to putting loads of images in a paragraph 
without using any particular layout. They are rendered next to each other 
until the right border (or left border, resp.) of the containing box is 
reached. The surplus image then is wrapped to the opposite border of the box 
and put into a new row below the first.

Problem: The 'float' property currently wraps surplus elements to 
predecessor elements being taller than the element itself. This yields a 
jaggy layout on some content (see example below).

Suggestion: I'd like to propose two new values to the 'float' property. 
These two new values should ALWAYS wrap to the left (or right) border of the 
containing box. They might be called something like: 'absolute-left' and 
'absolute-right', resp.


Sketch of the current situation (all elements style="float: left;"):

|---| |---| |---|
|   | | 2 | | 3 |
| 1 | |---| |---|
|   |
|---| |---| |---|
      | 4 | | 5 |
      |---| |---|


Sketch of the desired situation(all elements style="float: absolute-left;"):

|---| |---| |---|
|   | | 2 | | 3 |
| 1 | |---| |---|
|   |
|---|

|---| |---|
| 4 | | 5 |
|---| |---|


RFC

Axel Dahmen

===============================================
<html>

<head>
	<title>Layout Test</title>
	<style><!--
		.div
			{border: 1px solid black;
			margin: 2px;
			padding 2px;
			float: left;
			}
	--></style>
</head>

<body>
	<div class="div">This is<br>a test<br>with even more text<br>and some more 
text</div>
	<div class="div">This is<br>a test<br>with even more text</div>
	<div class="div">This is<br>a test</div>
	<div class="div">This is<br>a test</div>
	<div class="div">This is<br>a test</div>
	<div class="div">This is<br>a test</div>
	<div class="div">This is<br>a test</div>
	<div class="div">This is<br>a test</div>
	<div class="div">This is<br>a test</div>
	<div class="div">This is<br>a test</div>
	<div class="div">This is<br>a test</div>
	<div class="div">This is<br>a test</div>
	<div class="div">This is<br>a test</div>
	<div class="div">This is<br>a test</div>
	<div class="div">This is<br>a test</div>
	<div class="div">This is<br>a test</div>
	<div class="div">This is<br>a test</div>
	<div class="div">This is<br>a test</div>
	<div class="div">This is<br>a test</div>
	<div class="div">This is<br>a test</div>
	<div class="div">This is<br>a test</div>
	<div class="div">This is<br>a test</div>
	<div class="div">This is<br>a test</div>
	<div class="div">This is<br>a test</div>
	<div class="div">This is<br>a test</div>
	<div class="div">This is<br>a test</div>
	<div class="div">This is<br>a test</div>
	<div class="div">This is<br>a test</div>
	<div class="div">This is<br>a test</div>
	<div class="div">This is<br>a test</div>
	<div class="div">This is<br>a test</div>
	bla asdf bla hjkl
</body>

</html>

_________________________________________________________________
The new MSN 8: advanced junk mail protection and 2 months FREE* 
http://join.msn.com/?page=features/junkmail

Received on Tuesday, 15 July 2003 19:35:55 UTC