2 colum layout - need content to expand if too large

I found this:

overflow: hidden;

But that is not exaxtly what I want. It should work though, and keep my layout intact.

What would be best is to emulate what tables do, which is to expand the cells to the right to fit the inner content. Are there any CSS patches/hacks to do that?

IE is incorrectly expanding the containers, but I guess you already knew that

If you give the container a width, Firefox will honour the width, and anythign else will overflow as you see.

IE, being rubbish, will expand it.

You'll want to read up/use

min-width to replicate the effect in Firefox. IE doesn't support min-width, but cos it's so rubbish, you use width for IE.

Min-width doesnt quite seem to solve the issue. If I wanted an elastic layout, then yes, it would be great to set a minimum width. However, I want a fixed width like it is correctly set in FF, but I do want it to expand with the larger content area like it does in IE. (incorrectly, even though that's what I want.)

All I have found on searches is how to set the min-width on either IE or FF, and do exactly that. Having fixed width is what I already have, but it needs to expand only if the content needs, not if the browser window is larger.

I guess, for me, this is a hard thing to get my brain around, because it's like I need to change my design perspective from the old table-based layout to the "content is first" CSS layout. Because I look at the design and think it should behave like table boxes, when in reality, the box model does not bahave that way, and my design practices need to change accordingly.

In any case, I need to understand, or see an example of, how to set my header, footer, and wrapper to be expandable/elastic, yet only as far as the content width is set. I find lots of layout examples out there, but none, so far, that account for a large picture or long URL in the content area, which IMHO, should allow the layout to grow when necessary. (just like it does using table layouts)

That's precisely what min-width is for - did you try it?

min-width specifies that if the content is small, then the container is at least the specified width. If the content is longer, then it doesn't restrict the width, it will allow it to expand.

Yes, tried it, and you are correct, but since I have a width specified at 700px and 500px, it already stays at those widths.

Min-width makes it NOT shrink smaller than X pixels, but does nothing for allowing it to enlarge. Setting a width at a percentage will make the layout appear liquid, which is what I do not want.

It needs to be only as large as the content div (plus the nav), no matter what size the content is, BUT never smaller than 500px, AND when normal content is in that div show a fixed width of 500px. So, yes, min-width is good for that, no smaler than X, but no help for "expand as needed." (to fit the content, not the window)

Make sense?

If I did this using tables, the tables would grow if for some odd reason we had a large image placed on one page.

In fact, it's worth noting, the reason I need this is because I have a content manager and gallery for users to edit their own pages. The gallery in particular has a feature to click a thumbnail, showing the larger image. The larger image might be 640px or 1200px. I need that to stay within my layout.

I have site I am working on here:
http://meiddev.1stbyte.org/site/stamped-gallery.php

Click on Darth Vader. (edit 4/1/06: its not there now, sorry) The larger image displayed will expand the containing boxes around the image. (I know the header does not, it does, but I just need to place a different image there to see it.) But this is all table based layout. How do I, using the div's and layout I posted above, use CSS to accomplish this? Can CSS do this?

This is the one item keeping me from moving everything to CSS and out of table based layouts.

Been doing a lot of research, looks like you can't do this in CSS. You can't emulate the table behavior in CSS. Sure, they can grow when additional content is added, but not if you have static widths added.

Sounds to me that we have situation where our standards need some rethinking. Or, at least, adjusting to allow the developer the option to do either or.

What really freaks me out is, IE attempts to do what I want, and as others have said, it does so in error. (not according to standards) But, in a standards semi-compliant browser like FF, it wont work.

Even if you do a so called "jello" layout, using a min-width and a max-width, any content going over the current width will spill over into the next div or background. Under some circumstances, having it NOT readjust the layout is desired, however, under others, it would be nice if it would just extend the container. (like tables do)

I just want my content to dictate my layout width, not my window size.

CSS is awesome, but sometime it sucks.

Sorry, but I don't get what you're after. I've not run into anything worth makeing that can't be done with CSS. Perhaps with your current understanding of CSS it can be difficult.

You may be right. I also may not be explaining myself well either. Same goes for search terms. That's the problem when you don't know something, you don't know the right terms sometimes.

Anyway, I'll try to explain once more.

You know how when you layout with tables, the content cell may have larger content than the layout can support? Well, with tables, the entire layout will expand to fit the content. For example, I may have a table of 700px wide, a nav cell at left of 200px, and a content cell at right of 500px. If I drop in an image of 600px wide, the whole table will grow to 800px and it wont overflow to the right. This is absolutely desirable IMHO, and how do I do it in CSS? My original post has the code I was trying to setup.

This is, basically, a fixed but expandable layout. Not liquid. Not Jello. Thank you again for any help.

I'm sure that's what min-width is for. Maybe you're not implementing it properly?

pineapplehead:

I think you have it backwards. As pertaining to min-width and max-width, the w3.org web site says: "These two properties allow authors to constrain box widths to a certain range."

I have it constrained. I now need it to be unconstrained. I need the opposite of what the spec says. min-width will set the width to a "minimum" width allowed, I don't need that. That would only be useful in a liquid layout. Mine is fixed. Only I want it to be "unfixed" if the content is larger than normal. A "overflow: grow" or "overflow: expand" is what I want. (heck, a "width: 700px expand;" option would be nice.)

Here's how min-width works. If I change my layout above under #pagecontainer to use percentages and a min-width, then this would be useful.
min-width:700px;
width: 85%;

And the #content to no width. The container will grow as needed, but the problem is I then have a liquid layout. I don't want that.

I am totally in agreement, I probably am just ignorant about something. But I need a hand seeing what part of this I am missing. Maybe there is a hack to using min-width I havent found yet?

As far as I can tell though, CSS box model behavior does not operate this way UNLESS you have a percentage based layout. Because once I set a specific width on my container or content (which is what I want), I can't get overflow to expand the container. Tables do this automatically, Divs only do if the container is set to a % amount.

You're right it doesn't/can't work that way.

Let me ramble a bit - there is a point somewhere

Unlike height, where auto means expand to fit content, a width is in effect nearly always specified. To explain, width:auto, means expand to fit within the container formed by my parent/ancestor. The only times when this doesn't apply are where the element establishes its own block formatting context (bfc) - ie, its a float or has position:absolute. Then a width of auto means shrink (expand) to fit. Normally this is not much use as when an element establishes its own bfc it detaches itself from its parent/ancestors in such a way that they no longer respond/see it, at least that is the case with position:absolute. Floating is a little different ... so lets see what happens.

example

it works after a fashion

There are a number of different element styles in the page to see how different things work. IE handles things better (for this) than FF. Maybe it could be refined into a working cross-browser layout. It is probably better to build something into your app to test content for max word length and max image width and adjust your styles accordingly.

Chris! thank you!

I'll play around with your example and see how it fits into my plans. I'll post back my findings in the next few days.

Also, you mentioned using my app to check word length and image size, that is exactly what I am going to implement because it seems the best way to impose conformity and work best will the most browsers. I am also considering adding a feature in the app to switch the widths to 100% on specific pages, if the authoring user wants a large image. (like all the pages in the gallery for larger images.)

Even though, IMHO, this is the "dark side" of css, the ability to simply change a couple properties and properly rearrange the layout is a big benefit to css.

Thank you again Chris.

I found a very simple way solve this issue!

Wrap a single cell table around my layout!

Sure, some of you CSS freaks will prob have a cow about it, but it works, and it works well. Because of this box model issue, I will not move 100% into css-based layouts. At least using the table in this way, I provide nothing but a container at a fixed width and do all styling and layout within using css/divs. This gives me a very cool hybrid layout that works perfectly by fixing my width, but also expanding predictably with wide content.

I use the following code in the content section if I want it to expand as the content does:

height:500px;
min-height:500px;
height:auto !important;

It works like a dream for me, hope it helps someone

Pssst . . . . this thread is a year old