Re: [css-d] Making a container of two columns stretch to contain the longer of the two [SOLVED]
Arian, Ricky, Thank you for responding. Arian Hojat wrote: > 3. add overflow: hidden; Thanks for the multiple suggestions and the explanation for each. Very informative. I've decided to go with the one you've suggested above. It was pretty much a coin toss between this and the :after solution you offered, as they both seem to be on equal terms in ease of implementation and effectiveness. It's working great, and I also now have a better understanding of floats and the tags that contain them. Much appreciated. -- Dave M G CSSed Zend Studio 5.5 Photoshop 7 (Wine) Inkscape, GIMP, Ubuntu 7.04 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Making a container of two columns stretch to contain the longer of the two
Whoops forgot to send to list: Hey Dave, The container will stretch to fit content that is flow normally in the document. So far... the article is in normal flow (aka no crazy stuff like floated or positioned), and left guy is floated. When floated, it breaks out of normal flow. If you had text in the container, it would move around it, but to its parent its almost as if floated content doesnt exist so the border only goes as far as the article which it does know 'exists'. You can do a few things, some target FF/IE separately. Some work in both but less elegant. btw what u want is called Containing or Enclosing Floats. 1. You can add a clearing div inside the container, just be4 the end; it clears the float from be4. and gives the parent a frame of reference of the last thing in normal flow to base its borders off of. 2. float the parent. if you float the parent, it will 'contain' its children. Note the element after the container, needs clear:both applied to clear the float. 3. add overflow: hidden; or overflow: auto; on parent. Some weird W3 rule says if u apply this to parent, then it 'contains' its floats. IE6 doesnt follow this, so It has another rule you can target it with. IE has an internal property called hasLayout; u can set this to true and activate some funky stuff. Applying height:1% or height:1px; any dimension really, zoom:1;, etc gives it layout, and causes IE6 to actually expand to fit its float children (one of side effects of getting an element's hasLayout property to be activated). Can be done like so: .container{overflow:hidden;} /* for normal browsers like FF*/ * html .container{zoom:1;} /* or use IE conditional comments to target IE without this '* html' hack which IE6 recognizes */ 4. :after solution which i use... new browsers adds a empty, invisible div automatically just be4 end of container which clears the div. almost like soluton 1, but without need for non-semantic html tag(aka a tag thrown in purely for design). .container:after{ content: "."; display: block; height: 0; clear: both; visibility:hidden; } /*need a period here just to give some content to put in document, not sure why "" doesnt work; but everyone recommends just throwing in a period*/ * html .container{zoom:1;} Note: To target IE6, i used to use height:1%, or overflow:auto; but i think there were a few instances where i was throwing a height on some container to contain its children but i legitimately use overflow with that same element and then the scrollbars appear, and sometimes i would use overflow to contain its children but forget that div has a height (causing scrollbars again). So i use IE propietary CSS prop zoom. which is alright if u dont mind css stylesheet not validating. if client wants it 100% validated, then move this specific rule in IE conditional comment. Hope that helps, lates, Ari __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Making a container of two columns stretch to contain the longer of the two
-BEGIN PGP SIGNED MESSAGE- Hash: SHA1 Dave M G wrote: > What I need is for the container to stretch out to be as long as > whichever of the side-menu or article-container is longest, so that its > borders and background enclose both columns all the way down to the bottom. Looks like a float containment problem to me. Try setting overflow: auto; on the container. Hope this helps, Ricky -BEGIN PGP SIGNATURE- Version: GnuPG v1.4.7 (GNU/Linux) iD8DBQFGqMiLZBKKLMyvSE4RAqQ/AKDWBh2U5Plc5tHeiUANy3lwdKKWbwCfQiHm ZN2n0VWi45fCt6W98CgpGAw= =fGI+ -END PGP SIGNATURE- __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Making a container of two columns stretch to contain the longer of the two
CSS-d, I have been looking around the web to try and find the right solution for my issue. Although I've seen many articles describing how to get two or three columns to match each others length, I can't quite seem to apply the information to my situation. Unfortunately I can't show a live example, but I've uploaded a screenshot and the CSS to here: Screenshot: http://autotelic.com/Screenshot.png CSS: http://autotelic.com/style.css I've added borders so that it's more clear where the boundaries of the relevant tags are. I have a "container" (green border), and inside of it is a "side-menus" (blue border) and a "article container" (purple border). The side-menus is floated to the left, and the article-container has a margin on the left side that is a little wider than the side-menu's width. I think it's a fairly standard approach to creating a two column layout, except that both columns happen to be inside a . I don't need necessarily need either the side-menu or article-container s to stretch to match the other. This seems to be the effect that most online instructions cater to. What I need is for the container to stretch out to be as long as whichever of the side-menu or article-container is longest, so that its borders and background enclose both columns all the way down to the bottom. Right now, basically the container stretches to match the height of the article-container column only. So if the article-container side happens to be longer than the side-menus, all is good. But, if the side-menus column is longer, as it is in the screenshot, then its content stretches past the background of the container. No good. At first I thought my problem was the "collapsing margins" issue described here: http://www.w3.org/TR/CSS21/box.html#collapsing-margins But I've added a 1 pixel padding to all sides of the relevant s, and it still doesn't work. Then I read that when a is floated, it falls outside of the document flow. However, what I don't get is that I have a footer below both Left and Right, that has a "clear: both" property in it. So it slides underneath the side-menus, and pulls down the length of the container. I thought that setting the height on all the nested s to 100% should at least have some effect, but it doesn't. At this point I'm quite confused. Can anyone recommend a reliable way to get the s inside my container to reliably reach down to the footer? Thank you for any advice. -- Dave M G CSSed Zend Studio 5.5 Photoshop 7 (Wine) Inkscape, GIMP, Ubuntu 7.04 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/