Click to See Complete Forum and Search --> : CSS question about width


ZeroFear
07-18-2006, 04:22 PM
How can i make the div that holds all of the other divs on my site ( the main div if you will ), not take up 100% width of the page? I want it to only take up as much width as it needs. You can view my site at http://www.btcampaign.com/blog/test/fkoff_layout.html.

If you look at the source, basicly i want the div with an id of "pageframe" to only take up how ever much it needs. I am going to be placing dynamicly generated tables into the center space ( the blue part ). Sometimes there will be alot of tables and the width will be big, but if there are only like 2 tables, id like the width to only be that much. thanks :D

nataliemac
07-18-2006, 04:45 PM
Well, if IE supported it, you could use "min-width" or "max-width" to specify a minimum or maximum width for your div.

By default, a div takes up 100% of the width, so unless you specify some other sort of width, it's going to fill the screen.

I'm not sure what kind of behavior you'd get in IE if you specified a width for IE, then a min-width/max-width for browsers that supported it. I'm not sure if IE would stretch your container or not.

Hmmm...I might be stumped on this one.

WebJoel
07-18-2006, 05:34 PM
To make a DIV not take up 100% of the page, don't state it as being 100%.
Simply make it's width "auto". That way it will expand only enough to wrap the contents. Or give it a percentage maybe, and center the container DIV.
---
Is that spiralbound notebook image of the 'spiral' part one long, tall image? It seems to disappear below the viewport when the window is manually minimized 'upward' to be shorter (less vertical).

Ergo, if you were to add more content, it will not expand (be taller), either.

A solution to this is to slice down single full instance of just ONE spiral (about 20 or 25-pixels square), and add a float:left; clear:left; to that one image property, which is also given a "repeat:y" value. That way, the spiral will extend vertically 100% of the containing DIV, will contract if the viewport is shrunk AND expand vertically if additional content is added... Clean, valdiates, much smaller image load etc.

Siddan
07-18-2006, 05:46 PM
the spiral looks fine i IE but not in FF. And it is one small image repeated vertically. The height is fixed but the wrapper content with the purple border is not stretching all the way down, so the spiral appear to be outside the wrapper