Hi, I am try to tweak my site structure so that when there is content in the content DIV, it should expand the div height automatically. I know there is an auto property or something similar. But I am not looking for a scroll bar in the Div for this solution.
The site in discussion can be seen here: http://www.jefferyfernandez.id.au/ and CSS here: http://www.jefferyfernandez.id.au/styles/real.css
The structure of the site can be seen as shown in the attached png file. I have tried putting in data into the content div and different browsers give different results. Example mozilla keeps the fixed size of the div and over flows the content while IE expands the div with the content. I don't know which one is following the rules but its something which confuses me. If anyone has seen a similar structure with flexible heights please point me to the address. Thanks
Re: Site structure needs tweaking
Hi, I am try to tweak my site structure so that when there is content in the content DIV, it should expand the div height automatically. I know there is an auto property or something similar. But I am not looking for a scroll bar in the Div for this solution.
Sorry can you explain this a bit more. Are you saying that content when added reaches the bottom, and no longer expands, just disappears below.?
Site structure needs tweaking
On Mozilla if I don't use the auto property, the content over-flows over the div borders. Whereas in IE the contents will push the div height and adjust accordingly.
This is what I mean: http://www.jefferyfernandez.id.au/home.php
Site structure needs tweaking
I see and if you use height: 100%, then IE reduces the height to whatever is in the content.
From memory mozilla supports the min-height definition.
Try hiding the height: ***px; definition for mozilla but not from Explorer and add the min-height for mozilla
Don't know if it will work, but am interented if it does.
Day
Site structure needs tweaking
Try hiding the height: ***px; definition for mozilla but not from Explorer and add the min-height for mozilla
Sorry... how do I hide the definition from mozilla and add a definition for mozilla only ? I am sure there is a better solution to what I have done so far..... but just haven't found a similar design for me to study on. :?
Site structure needs tweaking
Hi paCkeTroUTer,
If you replace height in content with "min-height", Netscape grows to fit the content and IE continues on as before ignoring the min-height tag and just fitting to content.
Hope that helps.
Site structure needs tweaking
Thanks Tony, That worked like a charm :)
Site structure needs tweaking
cool
But does not IE then shrink to size of the content, when you want it to stretch the full page?
Day
Site structure needs tweaking
ur right Daybreak_0, I didn't check it on IE before I made the above comment. So what do you think can be a solution for browsers which don't understand min-height ?
Site structure needs tweaking
Hi paCkeTroUTer,
You could use a hack like this to target just IE browsers and assign a height that way.* html #content{height:600px;}
Hope that helps
Site structure needs tweaking
Tony >> Maybe a stupid question but how use that code?
I have the exact same problem and is utterly annoyed by it. I want only to use CSS for my page but know that my problem probably could be solved with javascript, images og no doctype.
Take a look at (nevermind the colors it's just for illustration):
http://www.kultorg.dk/beta1/main/
Looks fine in Firefox and IE.
http://www.kultorg.dk/beta2/main/
Looks fine in IE but in Firefox the divs don't follow the main content div.
I'm getting crazy - what to do?