SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Nov 2004
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question CSS Floating Divs to the bottom inside a Div

    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

    Code:
    <!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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Hi tobybowes. Welcome to the forums.

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

    Code:
    <!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:

    Code:
    <!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>
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Member
    Join Date
    Nov 2004
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your help, they get me the desired effect even if they're not perfect!

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    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.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •