fortnox007 Posted January 10, 2011 Share Posted January 10, 2011 Hi all, something is keeping screwing me up and the more i read the more confused i get, since i was thinking i was doing it right. In a nutshell, if i have a container div, i normal do this: #container{ width:960px; height:300px; /*since i was told IE interprets this as minimum height */ min-height:300px; /*overright the previous for decent browsers */ } The problem is dispite the fact that i told the div it has a minimum height: i doesnt grow larger when it's contents ar bigger. if i remove the height it does, but of course I would like to have the functionality that a div has a minimun height. I someone could clear things up for me i would be extremly happy because i really don't get this part. i read the whole day about shrink wraps and other stuff, but it seems my brains gave up. Quote Link to comment Share on other sites More sharing options...
fortnox007 Posted January 10, 2011 Author Share Posted January 10, 2011 hmm i think i noticed somthing weird. in case i have a container div with 2 child divs floated in it the following seems to work: #container{ width:960px; overflow:auto; } #childleft{ width: 500px; height:300px; min-height:300px; float:left; } #childright{ width: 460px; height:300px; min-height:300px; float:left; } I have absolutely no idea why this works, and if someone does know please tell, its easier to remember ones understood Quote Link to comment Share on other sites More sharing options...
raknjak Posted January 10, 2011 Share Posted January 10, 2011 First: height is not overridden by min-height. You define a fixed height which text will break but your box won't expand. Remove height and see the min-height magic work. In IE, height = min-height so no issues there. Use a separate file for IE quirks. Second post: I do not get the desired result. overflow: auto gives scrollbars. let me know if it works after using tip. Quote Link to comment Share on other sites More sharing options...
fortnox007 Posted January 11, 2011 Author Share Posted January 11, 2011 Thanks Raknjak for your reply, That min-height doesn't overwrite height is new to me but it seems i learned it from the digital polluted interwebs parts I'll certainly use a special ie.css for that I am going to test it straight away and let you know oh small question isn't using the *height:300px; easier or is that just a bad practise? Quote Link to comment Share on other sites More sharing options...
fortnox007 Posted January 11, 2011 Author Share Posted January 11, 2011 Hi Raknjak, (and other phpfreakies), I just applied your tip to put overflow:auto; on it and it worked like a charm. I also used your tip to put height in a special ie file and normal min-height in default, and that also worked great. Only thing i have is this in IE 6 (and lower) I reckoned that was because of the overflow auto. so i thought i put something different in the ie sheet. i did overflow:visible. That seemed to work but the dotted lines seem to get screw up. (or is that because IE 6 facks up dotted lines anyways?) You can have a look here. http://tinyurl.com/phpfreakies Any help or tips in general are welcome. Thank you in advance! Quote Link to comment Share on other sites More sharing options...
raknjak Posted January 12, 2011 Share Posted January 12, 2011 heh, I forgot to reply yesterday your question: isn't using the *height:300px; easier or is that just a bad practise? Your requirement: a box that is at least 300px high - gecko browsers => CSS min-height: 300px; - IE => CSS height: 300px; This means that in case there is no content the box will be minimum 300px high in all browsers. If there is content and it is bigger than 300px the box will be expanded. The overflow is not needed, I must have confused you sorry. <style type="text/css"> #minimumheight{ min-height: 300px; background: lime; } </style> </head> <body> <div id="maincontent"> <div id="minimumheight"> testzone<br>testzone<br>testzone<br>testzone<br>testzone<br> testzone<br>testzone<br>testzone<br>testzone<br>testzone<br> testzone<br>testzone<br>testzone<br>testzone<br>testzone<br> testzone<br>testzone<br>testzone<br>testzone<br>testzone<br> </div> </div> </body> </html> In your IE6 screenshot my guess is that another, surrounding box with fixed height is causing the overflow to hide. Try removing height on surrounding divs. More code is needed to be sure but maybe it's more interesting to tell us what you are trying to accomplish? Quote Link to comment Share on other sites More sharing options...
fortnox007 Posted January 12, 2011 Author Share Posted January 12, 2011 Hehe no problem, thanksn for replying anyway. What i am trying to complete and i think i succeeded is shown here; http://monkeybusiness.hostzi.com/phpfreakies.php in a nutshell, a wrapper div, that contains 3 divs (left mid, right) with each of those containing a content div. When the size of one of the content div increases so has the wrapper div's It was just for my understanding why things are as they are. But you saved me allready with you comment on height and min heiight. I learned it the wrong way and you stopped me before i caused damage so thanks for that. I think the overflow was needed in this specific case where there is a div in a div in a div. not sure why, but ill test it out more Thanks alot for the help raknjak Cheers! Quote Link to comment Share on other sites More sharing options...
raknjak Posted January 12, 2011 Share Posted January 12, 2011 one more thing to add here: layout libraries are great and this one really works: http://www.dynamicdrive.com/style/layouts/ might save you some time and you can study the techniques cheers Quote Link to comment Share on other sites More sharing options...
fortnox007 Posted January 12, 2011 Author Share Posted January 12, 2011 Thanks RaknJak, I'll certainly have a look in to that. I am a bit unfortunate though, i get stuff from designers that most of the time don't fit in anything. So i was working on my own in combination wth the general meyers reset.css but it's always good to have a look in other libraries Cheers! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.