CSS commmands that grow with additional input

The css command "min-height" has been very good at producing containers that grow with input. What are some other ways to let a div grow as things are added?
LVL 7
weikelbobAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

RoonaanCommented:
min-width :-P

To get min-height and min-width work somewhat crossbrowser you can use:
height: auto !important;
min-height:500px;
height:500px;

As IE doesn't support min-height and only height, you can still benefit from the min-height behaviour in FF.

-r-
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
weikelbobAuthor Commented:
Looks good, Is that W3 compliant?
0
RoonaanCommented:
Yes and no.  I think w3c doesn't allow two of the same css tags in the same rule.

-r-
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

JeffHowdenCommented:
Perhaps I'm misunderstanding, but pretty much every element grows to accomodate its contents unless specifically instructed via CSS or scripting not to.  Apply a border or background-color to an element and watch what happens as you change its content.
0
weikelbobAuthor Commented:
Hmm... Found another instance where I need a container div that grows vertically when more content or divs are added. And it would be nice if they were W3 compliant.
0
RoonaanCommented:
Is your content floating possibly? Then you would have to add a clearing div.

And W3C is a guideline, not a rulebook. I don't think any client is willing to pay x hours of additional work for getting things w3c if the output is the same. So having two height: attributes is something you and I know is not going to validate, but we all know is working crossbrowser and displays nicely.

-r-
0
weikelbobAuthor Commented:
I'll give the double height a shot, then. I'm mainly worried about future employers looking at my portfolio and saying, "That page doesn't validate!". I will give your way a shot, Roonan, thanks.
0
RoonaanCommented:
As long as it is a design choice which you can defend, then it should be fine. But then again I am not your employer :-D

-r-
0
DaydreamsCommented:
What about using conditional comments.. you page will validate:

http://virtuelvis.com/archives/2004/02/css-ie-only

Not sure this is right, but it validated at:

http://jigsaw.w3.org/css-validator/

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
.mydiv {height: auto !important;
min-height:500px;height:500px;
border:1px red solid;}
</style>
<!--[if IE]>
<style>
.mydiv {height:500px;
}
</style>
<![endif]-->
</head>
<body>
<div class="mydiv"></div>
</body>
</html>
0
DaydreamsCommented:
Please ignore the post above.. not well thought out.
0
weikelbobAuthor Commented:
Do conditional comments,

<!--[if IE]>

...

validate?
0
DaydreamsCommented:
Hi Bob, yes they do. Please see my link above:

http://virtuelvis.com/archives/2004/02/css-ie-only

From that site:

"The perhaps most reassuring part of this technique is that your main CSS and your carefully authored HTML/XHTML documents will remain valid"

My code above though, is not good, as I said. I thought that using conditional comments to add validation in this case may be useful, if done right. Perhaps another expert will add something. Conditional comments won't be useful in all cases, and this may be one of them.

I agree with Roonaan, that if the site works well, and you can explain to your employers why you used a particular hack (if you can't use conditional comments), then it should not matter.
0
JeffHowdenCommented:
Conditional comments are a double-edged sword.  If you're not inclusive enough, a future version of IE which may fix a bug you're attempting to counter with your conditional comment(s) may actually make the problem worse in a now fixed browser.  If you're too inclusive, you may only end up fixing the bug for a smaller portion of your audience than you originally intended.
0
weikelbobAuthor Commented:
Will the double hieght strategy:

height: 550px !important;
height:500px;

work with IE7?
0
weikelbobAuthor Commented:
I need to know if conditional comments will work with future versions of IE. I don't want possible employers to check my portfolio and see that some of the sites don't validate and move on without asking why they don't validate.

Bob
0
JeffHowdenCommented:
Bob, I don't think that a few little bits that don't validate are going to cost you a job.  In the unlikely event that they do, I think you're probably better off as you don't want to be working for a company that doesn't  understand that writing 100% valid code in the real world isn't really a reality right now and that a few, carefully selected, compromises will have to be made to drastically increase the support for your work.
0
weikelbobAuthor Commented:
OK. That sounds about right Jeff, good point.

To tie this up, what should I keep in mind as far as IE7?
0
weikelbobAuthor Commented:
How is IE7 going to change things?
0
JeffHowdenCommented:
Honestly, that's an almost impossible question to answer until it's finally released.
0
weikelbobAuthor Commented:
What do you personally do when making sites to be ready for it?
0
JeffHowdenCommented:
I used to try to take beta browsers into consideration, but got burned pretty badly everytime.  So, the only thing I do is let the client know that there's a new browser that's a beta, that we don't design for it or test in it at all (and why) and that we'd be happy to revisit the design when it's released.
0
weikelbobAuthor Commented:
Thanks Jeff
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.