Column wrapper height

Rather than this page container for the different page heights, what’s a better way?
(page breaks don’t seem to accommodate FF and IE similarly)

Not only is this inefficient and clumsy, it doesn’t work on a dynamic results where height varies. Don’t know how many could be listed this way, but would be needing at least five added selectors.


#contain, #contain85, #contain90, #contain95, #contain105 {
border: 1px solid #EEEEEE;
background:#fff;
width: 95%;
min-height: 800px;
margin-top: 0;
margin-left: auto;
margin-right: auto;
}
#contain85 {
min-height: 850px !important;
}
#contain90 {
min-height: 900px !important;
}
#contain95 {
min-height: 950px !important;
}
#contain10 {
min-height: 1000px !important;
}

Someone more advanced will probably understand what you’re trying to do, but I’m an intermediate, what exactly is the necessity of setting different min-heights on different containers? What are you trying to accomplish?

The column(s) within the contain id (the container) are extending below it.

And since there is a border on the column, and the page background color is other than #fff it is very obvious.

The page breaks mentioned would go just before the closing </div>

Can we see your HTML layout for these containers? If there’s more CSS involved with these containers, that would help too.

I’m simply looking for a way to make the container adjust as each page column gains or looses height, as all pages do. A more efficient way than posted.

Are you saying it can’t be done within the #contain css alone?

So, basically your current setup is like this and the child DIVs are overflowing past the parent DIV?

<div id="contain">
<div id="contain85"></div>
<div id="contain90"></div>
<div id="contain95"></div>
<div id="contain10"></div>
</div>

So, what happens when you delete all height properties and values, and let each seek its own height? Since you’re talking about columns, may we presume you’re floating some elements? And those are the elements escaping their parents?

If so, see Enclosing Float Elements. If you’re using absolute positioning, it is highly likely you’re using the wrong method of laying out your page.

cheers,

gary

… and if you’re using vague/meaningless classnames like “contain85” (which ALMOST sounds presentational) you’re likely using the wrong method of building the HTML for the page too.

In fact, looking at your cSS that is INDEED presentational use of CSS, defeating the ENTIRE point of using CSS in the first place.

Though without seeing an actual working page we’re all guessing wildly blindfolded in the dark 500 feet underground.

Though I have NO CLUE why you would EVER set different min-heights that way. Just what the devil are you trying to do here?!?

As with the others I’m also confused as to what you are trying to do exactly.:slight_smile:

Attach a working demo (html and css) of what you have got and it might give us a clue of what you are trying to achieve.

…So, basically your current setup is like this and the child DIVs are overflowing past the parent DIV?
yes, exactly.

…looking at your cSS that is INDEED presentational use of CSS, defeating the ENTIRE point of using CSS in the first place.
I hear pretentious somewhere in there. And here thought this was making progress.

…Though I have NO CLUE why you would EVER set different min-heights that way.
Ditto. Its the overflow. But this problem is happening even when attribute is ‘height’ instead.

Only trying to solve the overflow. Which is coming from when either there is .col1 by itself and when .inner is present within .col1 in the #contain(s) - and hopefully this will help:


.col { 
border-bottom: 1px solid #EEE;
line-height: 125%;
float: left;
position: relative;
width: 72%;
height: 95%; 
left: 2%;
margin: 3px 2px 20px 2px;
}

.col .inner {
float: left;
width: 85%;
padding: 0px 0px 0px 35px;
}

And besides the everyday problem of differing content heights for each page, when there is something like Google search results, it easily pushes beyond the #contain.

Sounds like floated content hanging out of containers, which is natural CSS behavior. The easiest way to stop that is by applying overflow: hidden to the container. (Setting a height on the container is not the solution. :slight_smile: )

(By default, a container does not wrap around its floated contents, so overflow: hidden on the container is one of several methods for forcing a container to wrap around its floated children.)

overflow: hidden

did it, thanks ralph.m, and I think, gary.turner

this was something I should have known!