/    Sign up×
Community /Pin to ProfileBookmark

Getting the DIV tag Height to go down to footer

Copy linkTweet thisAlerts:
May 28.2009

Hi everyone. I am having trouble getting my mainContent Div and SideBar div to reach all the way down to the footer div.

Heres how i have it: the sidebar div is floated to the right of the maincontent div and the footer div has a cleared float so fits nicely under neath. However when the text in the mainContent exceeds more than the sidebar, the maincontent nicely expands to the footer, but the sidebar just stays there. How can i get the the sideBar nav to repeat all the way down to the footer no matter how much content to each side is added??

to post a comment
CSS

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@nickelleonMay 28.2009 — I congratulate you for using trying to use CSS to accomplish this. Most would buckle and resort to tables. Equal height columns is one of the trickier things to do in CSS.

One route is to use Faux Columns. This method applies a background image to a wrapper container and repeats it on the y-axis. This gives the illusion of equal column heights, but this may or may not work in your case. Here is a nice article that explains it better: http://www.alistapart.com/articles/fauxcolumns/

Another route is to use a CSS hack. What you do is you add an arbitrarily large bottom padding to each of your columns (like, 5000px should do it). This value just needs to expand the shortest column past the longest column. Next, we trick the browser into thinking the columns are only as high as the content they contain by applying a negative bottom margin equal to the bottom padding. Then you add an overflow: hidden rule to the container to hide the excess columns created by the padding.

Confused?


[CODE]
#container {
overflow: hidden;
}

#mainContent {
padding-bottom: 5000px;
margin-bottom: -5000px;
}

#SideBar {
padding-bottom: 5000px;
margin-bottom: -5000px;
float: right;
}

.clear { clear: both; }



<div id="container">
<div id="mainContent">
Lorem ipsum dolor...
</div>
<div id="SideBar">
Side bar is fun!
</div>
<div id="footer" class="clear">
Feet smell.
</div>
</div>
[/CODE]
Copy linkTweet thisAlerts:
@james00bond00authorMay 29.2009 — Thanks for your response. I tried doing your hack and it works to stretch both columns down, however when I use hide the overflow to the wrapper or container div, the footer div background gets cut off as the sidebar background extends past & over the footer background since the footer div is also in the container div. I tried copying and pasting the hide overflow code to the footer css but that did not work?.

If the mainContent div is longer than the sidebar content div, is there a way to adjust the height of the sidebar div to automatically extend down to the mainContent div or perhaps the footer div?
Copy linkTweet thisAlerts:
@nickelleonMay 29.2009 — Id move your footer div out of the content div if thats the case. You may need to restructure your HTML to get the desired design with CSS.

Have you looked into Faux Columns?
Copy linkTweet thisAlerts:
@james00bond00authorMay 29.2009 — Yeah I was thinking of just just removing the bacground for the maincontent and sidebar and add just one background of 2 columns to the container div. That should work.

Thanks!
×

Success!

Help @james00bond00 spread the word by sharing this article on Twitter...

Tweet This
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...