Simple CSS question about block displays

[ozzie]

vs 1.4.1
Hi Peoples,
A simple little issue with :
display: block;
height: 1000px;

type CSS entries.

"this use allows the division involved to have a maximum and minimum height in pixels"
What I would like to know may be reallysimple but say I want to set the minimum height at say 1000px but any content that requires more space [ height ] can be accomodated by the expanding height beyond the minimum.

I have tried:
dispay: block;
min-height: 1000px;
and other combinatins but they failed.
If someone could show how to set the minimum block height it would be greatly appreciated...

[liudaz]

Hello,

For things like this i use a CSS trick that works 100% for me. F.e. you have a dive that is a content holder. And you want it to be higher than minimum value when there is more content. Add the following css to it:

Code: Select all

div#content{
	  min-height: 1000px;
	  }
*html div#content{
	height:1000px;
	}

One of theese styles is for CSS, the other is for IE.

Hope this helps.

Liudas

[ozzie]

Thanks luidaz,
Could it be that by using the word "block" as in "display:block;" actually forces the div into a specified size [ no less and no more] and that by just using the min-height: 1000px; avoids that restricting specification of the block display?

[doodlebee]

setting min-height and max-height doesn't work in IE versions less than 7. In all other browsers, it's dependent on the parent container.  If the parent container doesn't have a height set, then it's "auto" and anything within it (set at height:100%) will only be as tall as the container it's in.

If you're wanting a minimum height of 1000px, then:
#container {
min-height:1000px;
}

then if the content is *more* than 1000px, it'll expand, but it won't go less than that.

For IE6, you can do what Liudas said (although conditional comments are better than the * html hack, which IE8 recognizes) but with an alternate exception:

#container {
height:1000px;
min-height:1000px;
}

no need for the hack.  IE6 will be fed the "height" while all the other "good browsers" will apply the "min-height".

Another option is to also use a piece of JS code, which is actually placed *within* the stylesheet itself.  it's definitely a hack, but it works like a charm (and I *believe - although I'm not sure if memory serves correctly) that it'll still work even with JS shut off (because it's inside the stylesheet).  Unfortunately, I'll have to dig for that hack, since I used it a long time ago and it's on some disks in my annual archives.  but if you want it, I'll look for it.

[doodlebee]

And adding display:block;" to a div is unnecessary - divs are block-level displayed by default.  The only reason you should add it is if a parent containing div has "display:inline" added to it.

[ozzie]

Hey thanks Doodlebee,
how does one include the container in a div?


e.g.
div#content{
}
how does one turn this div into a container as such of have I got it totally wrong.

As you know doubt can tell I know very little About it but am learning from examples and trial and error.

The div Id is "content"
How do I make content a container or do I have to set up a sort of global div to include content suach as

div#container{
    div#content{
}
}

or is is just
#container{
  div#content{
}
}

[ozzie]

say I wish to do something like this:

#container{
div#content{
}
div#main{
div#main02{
}
}
div#sidebar{
}
}
would that work do you think
and then I if added the min height to achieve a global setting for the container

#container{
min-height: 1000px;
div#content{
}
div#main{
div#main02{
}
}
div#sidebar{
}
}

the min height would effect the entire container including the content and main divisions?
If so it appears the sidebar division has an display:inline; aspect to it anmd I wonder if this is necessary [ default CSS supplied by CMSMS in the 1.4.1 pack.]

[rhamej]

Here is what I use for min height divs.

Code: Select all

.min_h {
	min-height:90px;
	height:auto !important;
	height:90px;
	margin: 0px;
	padding: 0px;
}

Then my div

Code: Select all

<div class="min_h">Content.....</div>

[ozzie]

great! Shall give it a go and see what happens...

Shall post an out come sson
thanks!

[calguy1000]

Please guys.

This is not a CMS Made Simple specific topic.
please refrain from posting OR replying to such topics.

[ozzie]

Please guys.

This is not a CMS Made Simple specific topic.
please refrain from posting OR replying to such topics.

ha, then you will have to delete this forum as I am sure it is titled:
"Layout and design CSS & HTML"
Which of course is very relevant to CMSMS afterall.
The question then is :
How can HTML and CSS be discussed without missing reference to CMSMS?

Calguy, can you explain what it is you actually want to discourage?

[calguy1000]

Per the forum description:

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"

Just because you can't, or didn't read the rules, and descriptions, doesn't mean they aren't there.

I'm banning you for a month.

[twiz]

Here you're saying there are no "CMS Specific templates and stylesheets (CSS)" -- just examples.

Please keep in mind the templates and stylesheets installed by default with CMS are examples, you are not required to use them.

the default styles illustrated below are what the initial template users specified so that things were in a known state and then could be overridden with CSS.

This is not a CMS issue, it's merely a lack of understanding.

I viewed this thread while searching 'block displays'.  Where should I be looking, and discussing this?? Thanks

/twiz