How to Absolute position without breaking container?

Hey all,

Maybe I’m just losing my mind, but is there not a way to position, particularly an image, absolutely within a container and have it stay within the container?

I’ve attached an image to show you what I’m trying to achieve.

The layout is broken down into separate divs like so:
Red = Header
Brown = Nav. bar
Green = Right column
Purple = footer
Black = Content.
White space = Wrapper Container set with Relative positioning.

Now, the black div is supposed to be one image and nothing more that is positioned Bottom: 0px and Left: 0px WITHIN the Content container and I want everything else to flow around it. If I don’t position it, it simply floats towards the middle of the page and not against the chrome as it’s supposed to.

It was working as I wanted, except there was a bit of padding at the bottom which resulted in a scroll bar. Because I didn’t want there to be any vertical scrolling in a maximum browser viewing setting, I started changing and tweaking things to resolve the extra padding issue and now, no matter what I do, I can’t get the image to stay within it’s container. Even resetting everything back to what I did have it doesn’t work. I’ve even went so far as to scratch the original work and build from scratch and I’m still running into the same problem of the image not staying within the container while positioning properly.

One of the main reasons I want it to remain contained is because I want the right column to float: left and use padding to space it out. Right now, the right column expands completely to the edge of the wrapper container which is not what I want.

I’ve read quite a bit of layout positioning here but I can’t seem to find a post that answers my specific problem.

Thanks in advance all.

Hi,

If I understand correctly then what you want is not actually possible (for all but 1 browser - which I will explain later).

If you want an image absolutely placed at the bottom of a relative container then that is no problem. You can position the image at bottom:0;left:0 and it will sit happily at the bottom of the container. The problem is that because it is absolutely positioned then static content in that container will overlap. You could therefore apply padding bottom to the parent container that matches the height of the image and this will keep the other content from overlapping the image.

You can’t then however have content wrap around an absolutely placed image as that is impossible.

What you are seeming to require is the age old request for a new property possibly called “float:bottom” where an element will float at the bottom of the container and still allow text to wrap. There is no such property of course and there is no way to do this apart from a single text case in Firefox only.

This seems to be what you are asking for but will only work in Firefox so is of no practical use other than interests sake.


<!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%;
	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>

The only cross browsers way to do it would e with a little javascript.

Here’s was an old example that Erik J posted a long time ago:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Float Pushed to Bottom</title>
<meta name="generator" content="PSPad editor, www.pspad.com">
<style type="text/css">
#wrapper {
	margin: auto;
	border: 1px solid #cc0;
	width: 80%;
	overflow: hidden;
	background: #ffc;
}
#wrapper p {
	margin: 10px 10px 0;
	text-align: justify;
}
.floatpusher {
	float: right;
	margin-bottom: -129px; /* the bottomfloat height + margin = float to bottom */
	width: 1px;
}
#bottomfloat {
	clear: right;
	float: right;
	margin: 19px 10px 10px; /* margin-top as default line-height to avoid overlap */
	border: 1px solid #cc0;
	width: 200px;
	height: 100px;
	background: #ff9;
}
</style>
<script type="text/javascript">
function floatpush(){
    var els = document.getElementsByTagName('div'),
        elsLen = els.length,
        el,
        i;
    for (i = 0; i < elsLen; i += 1){
        el = els[i];
        if (el.className.indexOf('floatpusher') > -1){
            el.style.height = "auto";
            el.style.height = el.parentNode.offsetHeight + "px";
        }
    }
}
window.onresize = floatpush;
window.onload = floatpush;
</script>
</head>
<body>
<div id="wrapper">
	<div class="floatpusher"></div>
	<div id="bottomfloat"></div>
	<p>Lorem ipsum dolor sit amet consectetuer odio pellentesque scelerisque nisl In. Wisi Vestibulum interdum laoreet pulvinar Curabitur ipsum interdum laoreet adipiscing tincidunt. Nam id platea dolor felis malesuada Nulla cursus magna pretium metus. Orci congue orci feugiat scelerisque malesuada leo vitae Morbi congue ut. Vestibulum Curabitur id id Curabitur vel mi vel vel Suspendisse pretium.</p>
	<p>Lorem ipsum dolor sit amet consectetuer odio pellentesque scelerisque nisl In. Wisi Vestibulum interdum laoreet pulvinar Curabitur ipsum interdum laoreet adipiscing tincidunt. Nam id platea dolor felis malesuada Nulla cursus magna pretium metus. Orci congue orci feugiat scelerisque malesuada leo vitae Morbi congue ut. Vestibulum Curabitur id id Curabitur vel mi vel vel Suspendisse pretium.</p>
</div>
</body>
</html>


One of the main reasons I want it to remain contained is because I want the right column to float: left and use padding to space it out. Right now, the right column expands completely to the edge of the wrapper container which is not what I want.

You lost me there :slight_smile: Why not float it right and give it a width. No need for padding.

Hey Paul and thanks for the help, I’m going to experiment with what you posted there. Thanks for the link to the position example, that definitely helps me out. :slight_smile:

It sucks that it can’t be done cross browsers. I must have stumbled onto the proper method for FF. I didn’t realize what I had wouldn’t work for all browsers. :frowning:

As for the right column question of yours, it is a bit confusing I know but float: left, with the image properly positioned within the container is what worked, when it did work that is. I currently have it float: right with width, which is supposed to be fluid but unfortunately when I apply a reduced value for width, say 50%, it shrinks it from the left to the right creating a huge gap because the column butts up against the right sight of the chrome. Something I do not want and I’m having a miserable time making this work.

I’m looking for a way to support the right column without having to make a transparent gif expand in the Content div or having to position the column absolutely because I’m shooting for a fluid sight with a positioned image and it’s proving to be a challenge :).

Hi,

I think you may need to post the code you are using as it doesn’t now sound like you are trying the “float bottom” approach anyway.:slight_smile: (as there is no way you would have stumbled on my solution I can guarantee that).

There should be no problem to have an image in the left column and a fluid width right column. You would just float the left column (or the image itself) with a width to match the image and then the right column would at the simplest level have a margin-left to avoid the left float and would be non floated (i.e. a left margin greater than the width of the left column). You would then need to nest inner 100% floated element inside the right column to contain the clearing of any content in that section.

However, I am still not sure of the dynamics you require and may be talking at cross purposes again.

Hi Paul,

Would it be ok if I private messaged you the code as well as a link to the page in question so you get a better understanding of how it’s supposed to look? I really don’t want to post anything publicly. If not, I completely understand :). And I do appreciate your help.

I really must be missing something and this should be simple to do because I’ve done it in the past. When I float the image left, aligning is thrown out the window. Meaning, it will float horizontally left but with no positioning to the bottom left hand corner which is what I’m trying to achieve.

Floating elements to the bottom of the container is impossible cross browser (unless you use a JS scripted solution) so don’t even bother with that :). When something is floated left, the automatic reaction is for the element to float as far up and as far left as it can until it hits something. The only way it’ll be at the bottom is if there is no other content below that ;-).

I’d be willing to take a PM with the link to the page to help you out :).

Hi Ryan,

Message sent and thank you for your help :slight_smile:

I see Ryan has stepped in and he should be able to sort you out but remember to mention the solution in this thread so others can see it :slight_smile:

Hello :). Via PM, I couldn’t see any scrollbars appearing (Chrome) so ignoring comments based on that.

Your zombie is indeed put to the bottom of the page, via absolute position, although it will always overlap the elements above it. If you want to ensure that doesn’t happen you could set a bottom padding of 642px on the #mainContent. Although that will make the page have some scrolling room vertically.

Your page doesn’t have enough content right now so it looks somewhat bad when that happens. Do you plan on having more content on the right side of hte page? Perhaps a footer also?

If I misunderstood the effect you were going for, I know you want it on the bottom left of your screen and content to flow around it, although are you willing to have any overlap between hte image and content?

You’re trying to do a weird “float bottom” approach using absolute position which is somewhat awkward as absolute position doesn’t allow content to flow around it easily. All I can offer is the padding advice probably, although I’ll play it out and see what you want :).

Hey Ryan,

No, you won’t see any scrolling and that’s good. That’s because the image is absolutely positioned at the moment. Before it wasn’t and it did cause scrolling.

The footer is merely the copyright you’ll see in the lower right hand corner and that’s all there will be to a footer. As for there being other information (not sure if you got my second PM or not, and now I can’t remember if it was in the first one), there will be a header image and the right hand column will have a graphical text box with the intro text and there will be additional navigational boxes under that. There isn’t going to be too much content though except what you already see with a few more right column boxes under the first. I haven’t included those yet because I’m trying to fix the position problem.

There isn’t supposed to be any scrolling of any type, horizontal or vertical when the browser is 100%.

The image shouldn’t overlap because it’s index is set to -1. The image should also adjust in size as per the sizing of the browser and be overlapped itself with other content if the window is extremely small. At least that’s how it’s working in both IE and FF for me and that is how it’s supposed to be. I haven’t tested the other browsers yet though.

You don’t have the updated files I realize (and that’s because I’m working on it on the back end trying to find a reasonable, and workable, solution), but I’ve absolutely positioned the image Bottom: 0px and Left: 0px, removed the content container and made the right column float: right with percentage based margin-right to push it away from the edge of the wrapper container.

Not sure if that’s the best way to go though.

Yep. No scrolling. Gotcha

The footer is merely the copyright you’ll see in the lower right hand corner and that’s all there will be to a footer. As for there being other information (not sure if you got my second PM or not, and now I can’t remember if it was in the first one), there will be a header image and the right hand column will have a graphical text box with the intro text and there will be additional navigational boxes under that. There isn’t going to be too much content though except what you already see with a few more right column boxes under the first. I haven’t included those yet because I’m trying to fix the position problem.

Gotcha.

There isn’t supposed to be any scrolling of any type, horizontal or vertical when the browser is 100%.

No scrolling when 100%. Gotcha.

The image shouldn’t overlap because it’s index is set to -1. The image should also adjust in size as per the sizing of the browser and be overlapped itself with other content if the window is extremely small. At least that’s how it’s working in both IE and FF for me and that is how it’s supposed to be. I haven’t tested the other browsers yet though.

Well when the window gets really small, it drops into 1 column site and to fix that you need overflow:hidden; on #wrapper. It resizes in Chrome as well.

You say it shouldn’t overlap. So when the height of the browser (or width) gets so small, you don’t want the image overlapping any text anywhere? In your eyes it should resize to avoid this?

You don’t have the updated files I realize (and that’s because I’m working on it on the back end trying to find a reasonable, and workable, solution), but I’ve absolutely positioned the image Bottom: 0px and Left: 0px, removed the content container and made the right column float: right with percentage based margin-right to push it away from the edge of the wrapper container.

Not sure if that’s the best way to go though.

Update the files and we will go from there. I have off tonight so it should be done sometime tonight.

Hi Ryan,

Sorry for the delay, I just got home.

The page and css information has been updated.

I’ll send you the new CSS code in a PM.

Alright, the solution to my issue wasn’t complicated, though I wished I could have made done what I originally wanted and have it cross browser compatible at the same time. That’s ok though, this is working so I’ll stick with it.

What I did was, removed the content container (The black box) and just absolutely positioned the image and simply had the right-column float: right and gave it a margin-right percentage to push it away from the wrapper edge to align it. Everything else is staying where they were in the image.

Thanks Paul and Ryan for your help, it was very, very much appreciated!

Don’t worry, we all wish we could have a float:bottom-like behavior :).

Thanks for posting the solution here for everyone else to see.