A-Damage Posted October 17, 2007 Report Share Posted October 17, 2007 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 More sharing options...
ctoz Posted October 17, 2007 Report Share Posted October 17, 2007 Try .anydiv { position:relative; bottom:0px; } ...let us know if it's working. Link to comment Share on other sites More sharing options...
jlhaslip Posted October 18, 2007 Report Share Posted October 18, 2007 margin-top and padding-top push things down. floats move them left and right. Link to comment Share on other sites More sharing options...
A-Damage Posted October 22, 2007 Author Report Share Posted October 22, 2007 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 More sharing options...
jlhaslip Posted October 22, 2007 Report Share Posted October 22, 2007 Post the code you are working with, please. Link to comment Share on other sites More sharing options...
A-Damage Posted October 23, 2007 Author Report Share Posted October 23, 2007 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 More sharing options...
jlhaslip Posted October 24, 2007 Report Share Posted October 24, 2007 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 More sharing options...
Synook Posted October 24, 2007 Report Share Posted October 24, 2007 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 More sharing options...
A-Damage Posted October 24, 2007 Author Report Share Posted October 24, 2007 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? Link to comment Share on other sites More sharing options...
A-Damage Posted October 24, 2007 Author Report Share Posted October 24, 2007 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. Link to comment Share on other sites More sharing options...
jlhaslip Posted October 24, 2007 Report Share Posted October 24, 2007 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 More sharing options...
A-Damage Posted October 29, 2007 Author Report Share Posted October 29, 2007 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now