whodeenie18 Posted August 19, 2009 Share Posted August 19, 2009 Dear all,I am writing a website using the following structure: <div class="container"> <div class="header"> Header </div> <div class="subcontainer"> <div class="mainbar"> Main content </div> <div class="sidebar"> Side content </div> </div> <!-- footer --> <div class="footer"> Footer </div></div> This structure is consistent across the site but with the relative height of the mainbar and sidebar differing due to the amount of content in each. 1. When the mainbar is of greater height than the sidebar, the footer is correctly positioned by the attached CSS at the bottom of the entire page, even when scrolling.2. However, when the sidebar is of greater height than the mainbar, the footer still positions itself at the bottom of the mainbar, which isn't correct. I require the footer to stay at the bottom of the subcontainer, containing both the mainbar and sidebar, for both cases 1 and 2 above.I am using the CSS recommended here.I would be very grateful if someone could help solve this problem, with CSS if possible.Faithfully,Ed King Link to comment Share on other sites More sharing options...
danm68 Posted August 20, 2009 Share Posted August 20, 2009 Check your use of html and css selectors.In your html code every tag uses a class name.In the css provided, it uses '#' which refer to id names.So either change your tags to <div id="header"> instead of <div class="header">or change your css to .header{/*css code*/} and leave the html as it is.'#class' refers to a html element with an attribute of id="class".'.class' refers to a html element an attribute of class="class".You should also apply the #body css to your subcontainer I think.good luck Link to comment Share on other sites More sharing options...
whodeenie18 Posted August 20, 2009 Author Share Posted August 20, 2009 Check your use of html and css selectors.In your html code every tag uses a class name.In the css provided, it uses '#' which refer to id names.So either change your tags to <div id="header"> instead of <div class="header">or change your css to .header{/*css code*/} and leave the html as it is.'#class' refers to a html element with an attribute of id="class".'.class' refers to a html element an attribute of class="class".You should also apply the #body css to your subcontainer I think.good luckI should have mentioned in my original post that I was aware of the difference between the ID and class attributes and that I am using classes correctly in my CSS and HTML - I used the CSS given at the link as a template only.In my code, I have used the attributes given in the #body ID in my .subcontainer class. This is where the problem lies, as I would assume that any nested divs within the subcontainer div would not affect the attributes of the parent div, but it seems to do just that. The mainbar div seems to take precedence over the sidebar div, which makes sense as this code precedes it in the HTML, however I can't understand why the mainbar div seems to take precedence over the subcontainer div, in which it is nested. Link to comment Share on other sites More sharing options...
Ingolme Posted August 20, 2009 Share Posted August 20, 2009 Try adding overflow: hidden; to the .subcontainer class. This should make it adopt the size of whichever of the two inner boxes is tallest. Link to comment Share on other sites More sharing options...
dsonesuk Posted August 20, 2009 Share Posted August 20, 2009 the best i could come up with is this: works in FF, Opera, Chrome, IE7 and IE6 (but with extra spacing at bottom)<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*//*--*//*]]>*/</script> <style type="text/css">html, body { margin:0; padding:0; height:100%; }.container { min-height:100%; position:relative; height: auto!important; height: 100%; float:left; width:100%;}.subcontainer { min-height:100%; height: auto!important; height: 100%; float:left; width:100%;}.header { background:#ff0; padding:20px 0; width:100%;}.body { min-height:100%; height: auto!important; height: 100%; padding:0 10px 60px 200px; /* Height of the footer 60px bottom */}.sidebar { float:left; width: 170px; padding:10px; padding-bottom:60px; /* Height of the footer */ min-height:100%; height: auto!important; height: 100%;}.footer { width:100%; height:60px; /* Height of the footer */ background:#6cf; position:absolute; bottom: 0px; left: 0px;}</style><!--[if lte IE 7]><style type="text/css">.body, .sidebar{ padding:0 10px 10px 0px;}.footer {position:relative; bottom: 0px; }</style><![endif]--></head><body><div class="container"> <div class="header"> Header </div> <div class="subcontainer"> <div class="sidebar" style="height: 100%; min-height: 100%;"> <h2>Side content</h2><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi erci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi erci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p> </div> <div class="body"> <h2>Main content</h2><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p> </div> </div> <!-- footer --> <div class="footer"> Footer </div></div></body></html> Link to comment Share on other sites More sharing options...
whodeenie18 Posted August 20, 2009 Author Share Posted August 20, 2009 Thanks for your replies Dsonesuk and Ingolme, I have tried both of your methods but to no avail.I have been doing some further reading and discovered that my sidebar being absolutely positioned takes it out of flow and thus when content in the sidebar extends beyond the mainbar, the footer does not change position.I can therefore solve the problem by making whatever bar is higher static and the other absolute. However, this isn't ideal and rather an ugly solution.A solution that does not require pre-understanding of the height of each bar would be much better, for which I would be very grateful. Link to comment Share on other sites More sharing options...
Ingolme Posted August 20, 2009 Share Posted August 20, 2009 I was under the impression that your sidebar was placed on the left with the CSS float property, which is the best way to do it. Because absolute positioning always brings trouble.All you need to do to get it to work is to put the sidebar HTML before the main content, as shown here: <div class="subcontainer"> <div class="sidebar"> Side content </div> <div class="mainbar"> Main content </div> </div> And then assign a width to it and apply float: left; or float: right; to it. Finally, give a left or right margin to mainbar that's equal to the width of sidebar.Here's an example: .sidebar { width: 120px; float: left;}.mainbar { margin-left: 120px;} Once you've done that, my method should let the footer go down no matter which bar is higher. Link to comment Share on other sites More sharing options...
dsonesuk Posted August 20, 2009 Share Posted August 20, 2009 sorry i supplied wrong example see below with new IE conditional fixes<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*//*--*//*]]>*/</script> <style type="text/css">html, body { margin:0; padding:0; height:100%; }.container { min-height:100%; position:relative; height: auto!important; height: 100%; float:left; width:100%;}.subcontainer { min-height:100%; height: auto!important; height: 100%; float:left; width:100%; }.header { background:#ff0; padding:20px 0; width:100%;}.body { min-height:100%; height: auto!important; height: 100%; padding:0 10px 60px 200px; /* Height of the footer 60px bottom */}.sidebar { float:left; width: 170px; padding:10px; padding-bottom:60px; /* Height of the footer */ min-height:100%; height: auto!important; height: 100%;}.footer { width:100%; height:60px; /* Height of the footer */ background:#6cf; position:absolute; bottom: 0px; left: 0px;}</style><!--[if IE 7]><style type="text/css">.body, .sidebar{ padding:0 10px 70px 0px;}</style><![endif]--><!--[if lt IE 7]><style type="text/css">.body, .sidebar{ padding:0 10px 10px 0px;}.footer {position:relative; bottom: 0px; }</style><![endif]--></head><body><div class="container"> <div class="header"> Header </div> <div class="subcontainer"> <div class="sidebar" style="height: 100%; min-height: 100%;"> <h2>Side content</h2><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi erci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p> </div> <div class="body"> <h2>Main content</h2><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p> </div> </div> <!-- footer --> <div class="footer"> Footer </div></div></body></html> Link to comment Share on other sites More sharing options...
whodeenie18 Posted August 20, 2009 Author Share Posted August 20, 2009 Fantastic reply Ingolme, this works perfectly, thank you.Maybe you would consider posting your method as a tutorial for other users, as I have spent many hours frustrating over this and am sure this structure is common to many websites? I don't think it is an obvious solution to use the excess margin.Dsonesuk, thank you for your efforts also. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.