alesgirl Posted February 10, 2008 Share Posted February 10, 2008 Hi, I'm trying to have a two-column layout with DIVs and then create a footer DIV that will be displayed at the bottom and that will be at the bottom of both even if one is shorter. For example, sometimes the left DIV is shorter than the right DIV and so the footer DIV shows up high on the page. Is there a way around this so that the footer DIV is at the bottom of both DIVs? Thank you in advance! Quote Link to comment https://forums.phpfreaks.com/topic/90406-how-do-i-have-left-div-right-div-and-a-bottom-div/ Share on other sites More sharing options...
alesgirl Posted February 11, 2008 Author Share Posted February 11, 2008 <html> <head> <title>News</title> <style type="text/css" title="text/css"> #fullbody { background-color: #FFF; width: 800px; margin: auto auto 10px auto; position: relative; } #lefthomearea { width: 600px; left: 0px; position: absolute; } #righthomearea { width: 200px; left: 600px; position: absolute; } #footerarea { width: 800px; background: #CCC; } </style> </head> <body> <div id="fullbody"> <div id="lefthomearea"> <p>left area</p> <p>left area</p> <p>left area</p> <p>left area</p> <p>left area</p> <p>left area</p> <p>left area</p> <div id="footerarea"> <p>footer</p> </div> </div> <div id="righthomearea"> <p>right area</p> <p>right area</p> <p>right area</p> <p>right area</p> <p>right area</p> <p>right area</p> <p>right area</p> <p>right area</p> <p>right area</p> <p>right area</p> <p>right area</p> <p>right area</p> <p>right area</p> </div> </div> </body> </html> Here is an example of what I'm doing and I can't seem to get the footer area to be at the bottom of both columns. Thanks. Quote Link to comment https://forums.phpfreaks.com/topic/90406-how-do-i-have-left-div-right-div-and-a-bottom-div/#findComment-463892 Share on other sites More sharing options...
bronzemonkey Posted February 11, 2008 Share Posted February 11, 2008 Don't use absolute positioning. What that does is remove the element from the document flow, and so your footer is going to behave as if those absolutely positioned elements aren't even there. Instead use floats and clearing...something like this: /* css code */ #primary-content, #secondary-content { float:left; } #footer { clear:both; } <!-- html code --> <div id="container"> <div id="header"> </div> <div id="content"> <div id="primary-content"> </div> <div id="secondary-content"> </div> </div> <div id="footer"> </div> Quote Link to comment https://forums.phpfreaks.com/topic/90406-how-do-i-have-left-div-right-div-and-a-bottom-div/#findComment-463926 Share on other sites More sharing options...
alesgirl Posted February 11, 2008 Author Share Posted February 11, 2008 Thank you very, very much! I thought that using absolute positioning was the only way to get columns to work correctly. But, I tweaked a few things and it works perfectly! Thanks again!! Quote Link to comment https://forums.phpfreaks.com/topic/90406-how-do-i-have-left-div-right-div-and-a-bottom-div/#findComment-464078 Share on other sites More sharing options...
GameYin Posted February 11, 2008 Share Posted February 11, 2008 Absolute positioning should almost never be used. Causes many headaches and creates more problems then it solves :S Quote Link to comment https://forums.phpfreaks.com/topic/90406-how-do-i-have-left-div-right-div-and-a-bottom-div/#findComment-464196 Share on other sites More sharing options...
alesgirl Posted February 11, 2008 Author Share Posted February 11, 2008 I have banged my head against the wall many times due to absolute positioning. I just thought I was doing something wrong with it...but now I see that I was wrong to use it. I had read on some other web page that that was the only way to do certain things. So, I thank you again for your help because I FINALLY got that I don't need to use it...and I will never use it again! Quote Link to comment https://forums.phpfreaks.com/topic/90406-how-do-i-have-left-div-right-div-and-a-bottom-div/#findComment-464208 Share on other sites More sharing options...
TheFilmGod Posted February 11, 2008 Share Posted February 11, 2008 I have banged my head against the wall many times due to absolute positioning. I just thought I was doing something wrong with it...but now I see that I was wrong to use it. I had read on some other web page that that was the only way to do certain things. So, I thank you again for your help because I FINALLY got that I don't need to use it...and I will never use it again! Absolute position should sometimes be used. (Rare instances). Quote Link to comment https://forums.phpfreaks.com/topic/90406-how-do-i-have-left-div-right-div-and-a-bottom-div/#findComment-464378 Share on other sites More sharing options...
phpQuestioner Posted February 11, 2008 Share Posted February 11, 2008 Do not use absolute positioning; float both left and right columns and display them as blocks. Then the longest div should push the footer down the page. Quote Link to comment https://forums.phpfreaks.com/topic/90406-how-do-i-have-left-div-right-div-and-a-bottom-div/#findComment-464390 Share on other sites More sharing options...
GameYin Posted February 12, 2008 Share Posted February 12, 2008 Relative positioning sometimes does the job. Quote Link to comment https://forums.phpfreaks.com/topic/90406-how-do-i-have-left-div-right-div-and-a-bottom-div/#findComment-464804 Share on other sites More sharing options...
bronzemonkey Posted February 12, 2008 Share Posted February 12, 2008 Absolute positioning should almost never be used. Causes many headaches and creates more problems then it solves :S I FINALLY got that I don't need to use it...and I will never use it again! Absolute positioning is extremely useful and an essential tool for anyone creating websites. It is of limited use in creating general layouts but it is not complicated...you simply have to understand situations in which it can provide you with the best solution. Definitely read about how to use absolute positioning. A common mistake is not to set {position:relative} to the element that you wish your absolutely positioned element to be positioned relative to. float both left and right columns and display them as blocks. There is no need to display them as blocks because the default display value for divs is block, and the default display value for floated elements is also block. Quote Link to comment https://forums.phpfreaks.com/topic/90406-how-do-i-have-left-div-right-div-and-a-bottom-div/#findComment-465379 Share on other sites More sharing options...
phpQuestioner Posted February 13, 2008 Share Posted February 13, 2008 There is no need to display them as blocks because the default display value for divs is block, and the default display value for floated elements is also block. Obviously your not thinking cross browser; because not every browser will display a div as a block (floated or not). Quote Link to comment https://forums.phpfreaks.com/topic/90406-how-do-i-have-left-div-right-div-and-a-bottom-div/#findComment-465443 Share on other sites More sharing options...
bronzemonkey Posted February 13, 2008 Share Posted February 13, 2008 Obviously your not thinking cross browser; because not every browser will display a div as a block (floated or not). obviously you're not thinking Quote Link to comment https://forums.phpfreaks.com/topic/90406-how-do-i-have-left-div-right-div-and-a-bottom-div/#findComment-466165 Share on other sites More sharing options...
phpQuestioner Posted February 13, 2008 Share Posted February 13, 2008 Obviously your not thinking cross browser; because not every browser will display a div as a block (floated or not). obviously you're not thinking Well there is a reason why I am almost a Guru and your still a Forum Helper still and I guess we all know why now. :D :D :D :D :D :D :D (yeah that's me laughing at you - haha!) Quote Link to comment https://forums.phpfreaks.com/topic/90406-how-do-i-have-left-div-right-div-and-a-bottom-div/#findComment-466329 Share on other sites More sharing options...
bronzemonkey Posted February 13, 2008 Share Posted February 13, 2008 Well there is a reason why I am almost a Guru and your still a Forum Helper Yeah, because you've made nearly 5 times as many posts. Unfortunately, your advice is not always correct. In another thread you mistakenly claimed that IE6 supports the tabular display values, suggested that Roger Johansson's clear demonstration example was incorrect, and refused to view his demonstration for yourself in IE6. It's not a competition to see who is best. Rather than invent false information, just accept your errors, there is nothing wrong with that...everyone here has, at some point, posted something that was not correct. Quote Link to comment https://forums.phpfreaks.com/topic/90406-how-do-i-have-left-div-right-div-and-a-bottom-div/#findComment-466369 Share on other sites More sharing options...
phpQuestioner Posted February 14, 2008 Share Posted February 14, 2008 Well there is a reason why I am almost a Guru and your still a Forum Helper Yeah, because you've made nearly 5 times as many posts. Unfortunately, your advice is not always correct. In another thread you mistakenly claimed that IE6 supports the tabular display values, suggested that Roger Johansson's clear demonstration example was incorrect, and refused to view his demonstration for yourself in IE6. It's not a competition to see who is best. Rather than invent false information, just accept your errors, there is nothing wrong with that...everyone here has, at some point, posted something that was not correct. No what's wrong is people like you who think they have to give their two cents to every person's post to make themselves look better or too get more of a status on this forum. And I was not wrong about the display property in IE; only someone like you has to reference others work to prove a point. And I guarantee I am correct more times then you are; so take a bow and admit defeat; you child and don't repost to what I have to say, because I don't want to hear your opinions - mind your own business. Quote Link to comment https://forums.phpfreaks.com/topic/90406-how-do-i-have-left-div-right-div-and-a-bottom-div/#findComment-466427 Share on other sites More sharing options...
haku Posted February 14, 2008 Share Posted February 14, 2008 Every browser I've seen gives div's a block value. However, I haven't designed for konquerer or a couple of the other small use browsers. ---------------------------------------------------- Absolute positioning is usually not a good idea. However there are times when it is useful, such as positioning rounded corners in the corners of boxes. But the box they are contained in needs to have relative positioning for this to work, so in this case the absolute positioning isn't relative to the browser window, but rather the div that the elements are contained in. Quote Link to comment https://forums.phpfreaks.com/topic/90406-how-do-i-have-left-div-right-div-and-a-bottom-div/#findComment-466574 Share on other sites More sharing options...
bronzemonkey Posted February 14, 2008 Share Posted February 14, 2008 No what's wrong is people like you who think they have to give their two cents to every person's post to make themselves look better or too get more of a status on this forum. I only come here to try and help people with their problems and learn from the situations they have found themselves in. I simply wanted this guy to know that in css a div and a float are displayed as a block by default. only someone like you has to reference others work to prove a point. *yawn* I pointed you to Roger's example so that you could see for yourself with your own eyes, in your own copy of IE6, that you were wrong! But instead you refused to look at it and claimed that it was evidence of my stupidity. I haven't designed for konquerer or a couple of the other small use browsers. Konquerer uses the KHTML engine (which Safari is based on) so it's no different in the fact that div is displayed as a block. Quote Link to comment https://forums.phpfreaks.com/topic/90406-how-do-i-have-left-div-right-div-and-a-bottom-div/#findComment-466600 Share on other sites More sharing options...
phpQuestioner Posted February 14, 2008 Share Posted February 14, 2008 No what's wrong is people like you who think they have to give their two cents to every person's post to make themselves look better or too get more of a status on this forum. I only come here to try and help people with their problems and learn from the situations they have found themselves in. I simply wanted this guy to know that in css a div and a float are displayed as a block by default. Well you leave any issue that I may present for the posty to refer back to me; it's not your concern. only someone like you has to reference others work to prove a point. *yawn* I pointed you to Roger's example so that you could see for yourself with your own eyes, in your own copy of IE6, that you were wrong! But instead you refused to look at it and claimed that it was evidence of my stupidity. You must really have no life; you remember something from months ago; that you thought you had me on, but you didn't, just like you don't have me on this. So, again you can state your opinions and I will state the facts monkey boy. Now you drudge some relic like that up - what an infant you are. Go away - Your opinions are not valid to me forum helper. Quote Link to comment https://forums.phpfreaks.com/topic/90406-how-do-i-have-left-div-right-div-and-a-bottom-div/#findComment-466623 Share on other sites More sharing options...
GameYin Posted February 14, 2008 Share Posted February 14, 2008 Civil please.... :-\ Quote Link to comment https://forums.phpfreaks.com/topic/90406-how-do-i-have-left-div-right-div-and-a-bottom-div/#findComment-466636 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.