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 div 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/
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/
[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 div tags are. I have a container div (green border), and inside of it is a side-menus div (blue border) and a article container div (purple border). The side-menus div is floated to the left, and the article-container div 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 div. I don't need necessarily need either the side-menu or article-container divs 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 div 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 divs, and it still doesn't work. Then I read that when a div 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 divs 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 divs inside my container div 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/
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 div 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/
