CSS Floating Divs to the bottom inside a Div

HTML & CSS
1

Hello, Im a little stumped with positioning and floating divs.

What I need to have is a container div with some content in it, and then another inner div/img in the bottom right hand corner. The container div has a variable height and any text must wrap around the div/img. I’ve posted the basic code below, I basically want to float the image to the right and align it with the bottom of the container div but this isn’t as simple as I first thought, they should really implement a ‘sink’. Hopefully someone can help.

During my hunt for an answer to this ive heard alot about negative margins or applying js to the art-image to send it to the bottom but neither have been explained from what ive found. The relative/absolute positioning is the closest I’ve got to an answer but with no text wrapping it isn’t suitable.

Any help appreciated!

Active demo: http://www.tobybowes.karoo.net/test/tester.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> Tester </title>
  <style type="text/css">
	div{
	border:1px solid red;
	text-align:justify;
	}

	.container{
	 width: 50%;
	 position: relative;
	 overflow: hidden;
	}

	.art-image {
	 background-color: blue;
	 width: 75px;
	 height: 75px;
	 float: right;
	}
  </style>
 </head>

 <body>
  
<div class="container">
<div class="art-image">
IMAGE HERE
</div>
Content to wrap around image here
Content to wrap around image here
Content to wrap around image here
Content to wrap around image here
Content to wrap around image here
Content to wrap around image here
Content to wrap around image here
Content to wrap around image here
Content to wrap around image here
Content to wrap around image here
Content to wrap around image here
Content to wrap around image here
Content to wrap around image here
Content to wrap around image here
Content to wrap around image here
Content to wrap around image here
Content to wrap around image here
Content to wrap around image here
Content to wrap around image here
Content to wrap around image here
Content to wrap around image here
Content to wrap around image here
</div>

 </body>
</html>
2

Hi tobybowes. Welcome to the forums. :slight_smile:

There’s no ideal way to do this with CSS, though you can get close to it with something like a sandbag:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  	<title> Tester </title>
  	<style type="text/css">
	div.container{
		border:1px solid red;
		text-align:justify;
	}

	.container{
	 	width: 50%;
	 	overflow: hidden;
	 	min-width: 600px;
	}
	
	.sandbag {
		width: 1px;
		height: 100px;
		float: right;
		clear: left;
		background: red;
		overflow:hidden;
		margin-right: -1px;
	
	}
	
	.art-image {
		 background-color: blue;
		 width: 75px;
		 height: 75px;
		 float: right;
		 clear: right;
		 margin: 10px 0 0 20px;
	 }
	 	
	 p {
	 	margin: 0;
	 }
	 </style>
</head>

<body>
  
	<div class="container">
	<div class="sandbag"></div>
	<div class="art-image"></div>
	<p>Content to wrap around image here
	Content to wrap around image here
	Content to wrap around image here
	Content to wrap around image here
	Content to wrap around image here
	Content to wrap around image here
	Content to wrap around image here
	Content to wrap around image here
	Content to wrap around image here
	Content to wrap around image here
	Content to wrap around image here
	Content to wrap around image here
	Content to wrap around image here
	Content to wrap around image here
	Content to wrap around image here
	Content to wrap around image here
	Content to wrap around image here
	Content to wrap around image here
	Content to wrap around image here
	Content to wrap around image here
	Content to wrap around image here
	Content to wrap around image here</p>
	</div>

 </body>
</html>

Or an even slightly simpler method, without the extra element in the HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  	<title> Tester </title>
  	<style type="text/css">
	div.container{
		border:1px solid red;
		text-align:justify;
	}

	.container{
	 	width: 50%;
	 	overflow: hidden;
	 	min-width: 600px;
	}
	
	.container:before {
	content:" ";
		width: 1px;
		height: 100px;
		float: right;
		overflow:hidden;
		margin-right: -1px;
		border-right: red;
	
	}
	
	.art-image {
		 background-color: blue;
		 width: 75px;
		 height: 75px;
		 float: right;
		 clear: right;
		 margin: 10px 0 0 20px;
	 }
	 	
	 p {
	 	margin: 0;
	 }
	 </style>
</head>

<body>
  
	<div class="container">
	<div class="art-image"></div>
	<p>Content to wrap around image here
	Content to wrap around image here
	Content to wrap around image here
	Content to wrap around image here
	Content to wrap around image here
	Content to wrap around image here
	Content to wrap around image here
	Content to wrap around image here
	Content to wrap around image here
	Content to wrap around image here
	Content to wrap around image here
	Content to wrap around image here
	Content to wrap around image here
	Content to wrap around image here
	Content to wrap around image here
	Content to wrap around image here
	Content to wrap around image here
	Content to wrap around image here
	Content to wrap around image here
	Content to wrap around image here
	Content to wrap around image here
	Content to wrap around image here</p>
	</div>

 </body>
</html>
3

Thanks for your help, they get me the desired effect even if they’re not perfect!

4

That’s great. There are some amazing CSS tricksters around here who can achieve just about anything (and I just copy them as best I can) but some things just aren’t possible with CSS—yet. In time, things like this will be easier. :slight_smile: