Hey all, I have a page that I am working on that has two collumns. Im wondering the easiest way to have the left one follow the length of the right one. Right now both are floated elements.
The site is below: <!-- m --><a class="postlink" href="http://test.mrpunkin.com/blog/mrpunkin/">http://test.mrpunkin.com/blog/mrpunkin/</a><!-- m -->
Also, is there a way to allow a column to change its height with the amount of content, but also have a minimum height if theres not much content? If so, how?
Even if you just point me to tutorial sites thats fine. Thanks all.This is how most of us achieve two columns that appear to be the same length: <!-- m --><a class="postlink" href="http://www.alistapart.com/articles/fauxcolumns/">http://www.alistapart.com/articles/fauxcolumns/</a><!-- m -->.
As far as minimum heights, you can use min-height (<!-- m --><a class="postlink" href="http://www.w3.org/TR/WD-CSS2-971104/flowobj2.html#propdef-min-height">http://www.w3.org/TR/WD-CSS2-971104/flo ... min-height</a><!-- m -->) in browsers such as Mozilla, but for IE, you'll probably have to resort to using the expression property (<!-- m --><a class="postlink" href="http://www.svendtofte.com/code/max_width_in_ie/">http://www.svendtofte.com/code/max_width_in_ie/</a><!-- m -->). It's unfortunate, but sometimes it's just necessary.yes I am using faux on my site as well-- if you disable images you will see that it is just one image...I have read the ALA article before and thought of that, only problem is that my menu (the left one) and the content (right column) are both float: left elements, and any bounding box they are within will not wrap around them, therefor the faux column div would have 0 height and would just sit at the top of each of my columns.
Can I make the faux column container a float and float two elements within it to get it to stay as tall as the largest of the inner elements?Or place all your columns, and a footer in one master DIV, then apply clear: both; to the footer. The footer will be placed below the floated columns, and since the footer is "in" the same DIV as the columns, that DIV gets stretched down with the floater.There is an alternative.
You could have a container (a div with the content and the side bar divs) that has a background color (the one you want for the side bar). Let your side bar div have a transparent background, and apply a background color to your content. That way, it will appear the sidebar stretches all the way. And if you want to make it look like there's a side bar border, apply it to the content.Come to think of it, check out the following two articles:
<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/fauxcolumns/">http://www.alistapart.com/articles/fauxcolumns/</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/negativemargins/">http://www.alistapart.com/articles/negativemargins/</a><!-- m -->
The site is below: <!-- m --><a class="postlink" href="http://test.mrpunkin.com/blog/mrpunkin/">http://test.mrpunkin.com/blog/mrpunkin/</a><!-- m -->
Also, is there a way to allow a column to change its height with the amount of content, but also have a minimum height if theres not much content? If so, how?
Even if you just point me to tutorial sites thats fine. Thanks all.This is how most of us achieve two columns that appear to be the same length: <!-- m --><a class="postlink" href="http://www.alistapart.com/articles/fauxcolumns/">http://www.alistapart.com/articles/fauxcolumns/</a><!-- m -->.
As far as minimum heights, you can use min-height (<!-- m --><a class="postlink" href="http://www.w3.org/TR/WD-CSS2-971104/flowobj2.html#propdef-min-height">http://www.w3.org/TR/WD-CSS2-971104/flo ... min-height</a><!-- m -->) in browsers such as Mozilla, but for IE, you'll probably have to resort to using the expression property (<!-- m --><a class="postlink" href="http://www.svendtofte.com/code/max_width_in_ie/">http://www.svendtofte.com/code/max_width_in_ie/</a><!-- m -->). It's unfortunate, but sometimes it's just necessary.yes I am using faux on my site as well-- if you disable images you will see that it is just one image...I have read the ALA article before and thought of that, only problem is that my menu (the left one) and the content (right column) are both float: left elements, and any bounding box they are within will not wrap around them, therefor the faux column div would have 0 height and would just sit at the top of each of my columns.
Can I make the faux column container a float and float two elements within it to get it to stay as tall as the largest of the inner elements?Or place all your columns, and a footer in one master DIV, then apply clear: both; to the footer. The footer will be placed below the floated columns, and since the footer is "in" the same DIV as the columns, that DIV gets stretched down with the floater.There is an alternative.
You could have a container (a div with the content and the side bar divs) that has a background color (the one you want for the side bar). Let your side bar div have a transparent background, and apply a background color to your content. That way, it will appear the sidebar stretches all the way. And if you want to make it look like there's a side bar border, apply it to the content.Come to think of it, check out the following two articles:
<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/fauxcolumns/">http://www.alistapart.com/articles/fauxcolumns/</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/negativemargins/">http://www.alistapart.com/articles/negativemargins/</a><!-- m -->