Re: [css-d] Matching column heights in a complexish layout
2. http://www.positioniseverything.net/easyclearing.html
Simply lose the height settings (as Zoe's said) then add the CSS from
[2] (above), applying it to your div#container like so:
div#container {
width: 800px;
margin: 66px auto 0px auto;
padding: 33px 25px 33px 25px;
color: white;
background-color: #756F65;
}
div#container:after {
content: .;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
div#container {display: inline-table;}
/* Hides from IE-mac \*/
* html div#container {height: 1%;}
div#container {display: block;}
/* End hide from IE-mac */
I tried using the easyclearing method [2] but was applying the fix to
the wrong div. Applying it to the #container div works perfectly. I
don't, however, fully understand the need this:
div#container {display: inline-table;}
/* Hides from IE-mac \*/
* html div#container {height: 1%;}
div#container {display: block;}
/* End hide from IE-mac */
Could you please quickly explain?
Also, please note that I changed this:
* html div#container {height: 1%;}
To this:
* html div#container {height: 535px;}
As it's my min height.
Tks for everything. It's now working fine. Just trying to understand it.
--
[EMAIL PROTECTED]
www.adrianocastro.net
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Matching column heights in a complexish layout
From: Adriano Castro [EMAIL PROTECTED] Found a very good tutorial online [1]. Managed to get it working for IE but Mozilla doesn't adjust the height of the container div. I'm a bit lost here. I think my problem is the one defined on PIE's How To Clear Floats Without Structural Markup [2] but having tried the proposed solutions I still can't get it to work. Ideas? 1. http://css.maxdesign.com.au/floatutorial/ 2. http://www.positioniseverything.net/easyclearing.html Here's what I currently have: Markup: + http://dev.adrianocastro.net/help/0004/0004.a.html CSS: + http://dev.adrianocastro.net/help/0004/0004.a.css In my experience, easyclearing fails sometimes, due probably to other issues on a given page. So solve your problem it looks like you'll need to add a clearing element right before the close of #main. You'll also need to make sure browsers other than IE do NOT see the height you've set up on #container, because they will obey it, despite the min-height you've set for them. Hope that helps, ~holly __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Matching column heights in a complexish layout
From: Adriano Castro [EMAIL PROTECTED]
2. http://www.positioniseverything.net/easyclearing.html
I
don't, however, fully understand the need this:
div#container {display: inline-table;}
/* Hides from IE-mac \*/
* html div#container {height: 1%;}
div#container {display: block;}
/* End hide from IE-mac */
The display: inline-table is for IE5/Mac. The following container contains
fixes for IW/Win browsers (the * html line) and other browsers, to reset the
display that IE5/Mac was given, which those other browsers read as well.
Also, please note that I changed this:
* html div#container {height: 1%;}
To this:
* html div#container {height: 535px;}
As it's my min height.
If it's working for you, who's to argue, eh? :-)
~holly
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Matching column heights in a complexish layout
Adriano Castro wrote: Zoe M. Gillenwater wrote: Your problem then becomes the fact that you've positioned the child divs absolutely, which means they are removed from the flow of the page. Thus, the container has no content in it to determine its height, and shrinks up. To fix this, switch to a float layout to an absolute layout. Again, in general it is best not to use absolute positioning for main layout elements, just smaller elements within them sometimes. Floats handle almost all layout tasks. Let us know if you need resources on using floats and I'll send you a few good starter links. Zoe Some resources would be very much welcome. Found a very good tutorial online [1]. Managed to get it working for IE but Mozilla doesn't adjust the height of the container div. I'm a bit lost here. I think my problem is the one defined on PIE's How To Clear Floats Without Structural Markup [2] but having tried the proposed solutions I still can't get it to work. Ideas? Also, was able to set min-height for both IE and Moz using: height: 535px; /* IE's min-height equivalent */ min-height: 535px; Tks, AD 1. http://css.maxdesign.com.au/floatutorial/ 2. http://www.positioniseverything.net/easyclearing.html -- [EMAIL PROTECTED] www.adrianocastro.net __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Matching column heights in a complexish layout
Found a very good tutorial online [1]. Managed to get it working for IE but Mozilla doesn't adjust the height of the container div. I'm a bit lost here. I think my problem is the one defined on PIE's How To Clear Floats Without Structural Markup [2] but having tried the proposed solutions I still can't get it to work. Ideas? 1. http://css.maxdesign.com.au/floatutorial/ 2. http://www.positioniseverything.net/easyclearing.html Here's what I currently have: Markup: + http://dev.adrianocastro.net/help/0004/0004.a.html CSS: + http://dev.adrianocastro.net/help/0004/0004.a.css If you can, I could use a hand. Regards, AD -- [EMAIL PROTECTED] www.adrianocastro.net __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Matching column heights in a complexish layout
Adriano Castro wrote:
but Mozilla doesn't adjust the height of the container div. I'm a bit
lost here.
I think my problem is the one defined on PIE's How To Clear Floats
Without Structural Markup [2] but having tried the proposed solutions I
still can't get it to work.
Ideas?
2. http://www.positioniseverything.net/easyclearing.html
Adriano,
Simply lose the height settings (as Zoe's said) then add the CSS from
[2] (above), applying it to your div#container like so:
div#container {
width: 800px;
margin: 66px auto 0px auto;
padding: 33px 25px 33px 25px;
color: white;
background-color: #756F65;
}
div#container:after {
content: .;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
div#container {display: inline-table;}
/* Hides from IE-mac \*/
* html div#container {height: 1%;}
div#container {display: block;}
/* End hide from IE-mac */
regards,
Stuart
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Matching column heights in a complexish layout
Adriano Castro wrote: Hi all, What I'm trying to do is hard to put in words so I drew it: + http://dev.adrianocastro.net/help/0004/0004.png I kind of got it to work but am having problems with matching the height of the container div: + http://dev.adrianocastro.net/help/0004/0004.html In order to accomplish this layout I chose a *2 column layout*. The *first column has 3 rows*, the *second column has 2 rows*. Then the *second row of the second column has 2 columns*. Lastly, the footer is a div by itself. This translates into this: body div id=container div id=left div id=left-top/div div id=left-center/div div id=left-bottom/div /div div id=top/div div id=main div id=main-left/div div id=main-right/div /div /div /div div id=footer/div /body This is the structure I would use, so no problems there. Although I got it working I'm starting to think I didn't quite tackle this layout the best way I should have. Because getting the container div to adjust to the height of the inner divs has proven to be a pain. It doesn't need to be. Just remove the height from it so that the height of its content determines its height. In general, never use height for layout elements. Your problem then becomes the fact that you've positioned the child divs absolutely, which means they are removed from the flow of the page. Thus, the container has no content in it to determine its height, and shrinks up. To fix this, switch to a float layout to an absolute layout. Again, in general it is best not to use absolute positioning for main layout elements, just smaller elements within them sometimes. Floats handle almost all layout tasks. Let us know if you need resources on using floats and I'll send you a few good starter links. Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
