vertical positioning of divs

[A-Damage]

Is there any CSS (that validates) that gives the equivalent of:

.anydiv	{	float:bottom;	}

I want to be able to have a div that is contained inside another div to hug the bottom of the containing div. Why isn't there a "float:top" and "float:bottom" to go along with left and right?Any help is appreciated.Thanks,- Adam

[ctoz]

Try

.anydiv	{	position:relative; bottom:0px;	}

...let us know if it's working.

[jlhaslip]

margin-top and padding-top push things down. floats move them left and right.

[A-Damage]

margin-top and padding-top push things down. floats move them left and right.

Yes, they push things down, but not dynamically. I want to be able to have the containing div be ANY height, and then no matter what height the containing div is, the inner div always hugs the bottom of the containing div.I tried position:relative; bottom:0px; and it doesn't work.

[jlhaslip]

Post the code you are working with, please.

[A-Damage]

Post the code you are working with, please.

Since this is part of an actual project for a client, I had to weed out a lot of the pertinent content. Here is the html:

<div id="container><div id="sidepane">	<div class="sidebox">		<div class="sidebox_top"></div>		<div class="sidebox_main">			<div class="box_heading">Heading</div>			<p>			Content			</p>		</div>		<div class="sidebox_bottom"></div>	</div>	<div class="sidebox">		<div class="sidebox_top"></div>		<div class="sidebox_main">			<div class="box_heading">Heading</div>			<p>			Content			</p>		</div>		<div class="sidebox_bottom"></div>	</div>	<div id="contactinfo">		<p>		Contact content		</p>	</div>			</div><div id="content">	<p>	Content	</p></div></div>

The "sidepane" div is floated right. The "content" div sits to the left of the "sidepane". There are two boxes of info ("sidebox") at the top of the "sidepane" div that expand vertically depending on how much content is within them. Now, what I want is for the "contactinfo" div, which follows the two "sidebox" divs, to hug the bottom of the "sidepane" div so it always sits at the bottom of the page no matter how much content is in the "sidebox" divs. I think the main problem is I need a way to force the sidepane to always expand vertically to the full height of the "container" div.So maybe my first question should be: Is there a method of forcing a div (in this case, the "sidepane") to 100% of the height of the "container" div? If there is a method for doing this, then is it possible to force a div ("contactinfo") inside that div ("sidepane") to hug the bottom of that containing div ("sidepane")? I hope that makes sense.

[jlhaslip]

Your CSS is part of the code, so is a valid Doctype, title, head tags... but the most important thing is knowing what the content will be, since the height of div's will change with the content. Are the sidepanels going to be the longest block on the page? or the content? What happens when there is very little in the sidepanel? or very little in the content? Is it a good idea to force the box to the bottom if the client must then scroll down to see it if there is little or no content to draw them down to that point?Personally, I think you are fighting a losing battle, and I can't see anything here I can assist you with. Sorry.

[Synook]

What about creating a diagram of what you want? It is a bit confusing looking at your code, then at your description, and trying to mesh them together.

[A-Damage]

What about creating a diagram of what you want? It is a bit confusing looking at your code, then at your description, and trying to mesh them together.

Can images be uploaded to this forum?

[A-Damage]

Okay here is the diagram to hopefully explain what I'm trying to do:Also, the DOCTYPE is Transitional. I just want to know if this is even possible. I know it can be done utilizing tables, but table layouts = bad architecture.

[jlhaslip]

Try here: http://ryanfait.com/sticky-footer/Setting a width for the footer, floating it right does what you want. At least the footer div in the example page can be forced to do what you want. Might need to release the last div from the sidebar. Not sure if it will work inside the sidebar containing div. Likely not. Could require a faux column approach to produce the appearance of a full height column, too.It'll take some work, but this just might do it for you.

[A-Damage]

Try here: http://ryanfait.com/sticky-footer/Setting a width for the footer, floating it right does what you want. At least the footer div in the example page can be forced to do what you want. Might need to release the last div from the sidebar. Not sure if it will work inside the sidebar containing div. Likely not. Could require a faux column approach to produce the appearance of a full height column, too.It'll take some work, but this just might do it for you.

Thanks for trying to help, guys. I do appreciate it. This would all be vastly easier if the writers would just create a "float:bottom" property for CSS.What irritates me is that you CAN do this with background images inside divs:

#anydiv	{	width:500px;	height:350px;	background:url(/images/image.jpg) no-repeat right bottom;	}

So, why can't they write something, such as "float:bottom", to achieve the same effect with divs?