Jump to content

vertical positioning of divs


A-Damage
 Share

Recommended Posts

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

Link to comment
Share on other sites

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.
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...