Interesting scenario...how would you handle this with CSS

HTML & CSS
1

So lets say you have a drag/drop interface, and as you drop items into a container, each item fills its own line.

However, you have another block that needs to sit flush in the bottom right. As you add more items, it would need to align/move appropriately based on more items being in the container

I have tried a couple different combination’s and can’t quite figure out a simple way to pull it off.

Even from a static html/css standpoint, how would you approach this?

See this illustration as an example:

2

Tricky. If all those links are appearing in a flexible container (a normal div) you could place the block there with absolute positioning, but the other elements would not flow around it. If you gave it a white top and left border, you would get the same visual effect, but the bottom links would partially site under the block. If you can live with that, it should be easy.

.container {
    position: relative;
}

.block {
    position: absolute;
    right: 0;
    bottom: 0;
    border-width: 5px 0 0 5px;
    border: solid #fff;
}
3

Yes as Ralph said your only option is to absolutely place it at the bottom and make sure the text is kept away from the element.

Effectively you are looking for something like “float:bottom” which only exists in my mind.

Although I cracked it for Firefox 3.5:)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Float Bottom 1</title>
<style type="text/css">

h1{text-align:center;}
body{line-height:1.2}
.test {
	text-align:justify;
	width:50&#37;;
	margin:auto;
	border:4px solid red;
	height:105px;
	display:table;
	line-height:25px;
	background:#EEE;
}
.test p {
	margin:0;
	padding:10px;
}
b {
	float:right;
	width:3px;
	height:100%;
	margin-bottom:-115px;
	display:table;
}
span {
	width:98px;
	height:98px;
	float:right;
	border:2px solid red;
	margin:0 5px 0 5px;
	clear:right;
	position:relative;
}

</style>
</head>
<body>
<h1>Float bottom in Firefox 3.5 only</h1>
<div class="test"> <b></b><span>float</span>
	<p> START text text text text text text text text text text text text text text 
		text text text text text text text text text text text text text text text 
		text text text text text text text text text text text text text text text 
		text text text text text text text text text text text text text text text 
		text text text text text text text text text text text text text text text 
		text text text text text text text text text text text text text text text 
		text text text text text text text text text text text text text text text 
		text text text text text text text text text text text text text text text 
		text text text text text text text text text text text text text text text 
		text text text text text text text text text text text text text text text 
		text text text text text text text text text text text text text text text 
		text text text text text text text text text text text text text text text 
		text text text text text text text text text text text text text text text 
		text text text text text text text text text text text text text text END</p>
</div>
</body>
</html>
4

Smarty pants. :wink:

5
Off Topic:

Paul you also have an IE8 version.

6
Off Topic:

Yes but this ones a big cheat unlike the firefox one :slight_smile:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.test {
    writing-mode:lr-bt;
    text-align:justify;
    width:50%;
    margin:auto;
    padding:10px;
    border:5px solid red;
}
span {
    width:100px;
    height:100px;
    float:right;
    background:red;
    margin:10px 10px 0;
}
</style>
</head>
<body>
<div class="test">
    <p><span>float</span> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
</div>
</body>
</html>