div trick
- Started
- Last post
- 16 Responses
- versa
does anybody no how to create the hack that allows for a div to spread 100% even when the browser window viewport is resized? - like if a table is sized at 100%
I've tried everything I can think of , from playing with margins set at auto, to adding clumsy js to the divs, to setting the div and body to 100% width
anybody got a good idea?
- versa0
cant seem to get my answer there due to password problems...
anybody have any insight with this?
thanks
- 0711830
I thought that if a DIV was at 100% width, it's size will be relative to the window view, and thus, will always be 100% width (as opposed to establishing an absolute variable).
- kpl0
left: 0px
right: 0px?
not sure what you're talking about...
- sparker0
xhtml:
[div id="yourid"] content [/div]
css:
#yourid {
width: 100%;
}that's all there is to making a div 100%.
is that what your asking? i'm kind of confused.
- ********0
that's correct
- versa0
sorry - i'm not explaining it that well i guess
i want to create divs that span 100%, even upon scrolling past the viewport... like when a table is set to 100% width -
i have tried setting
html > body width: 100%,
body width: 100%,
and the div needing to span to 100%, but that doesn't seem to work.what keeps to happening is this:
if the window is maximized beyond the size of the widest div
then yes, the div appears to spread 100%, and technically it does - but if i resize the window viewport to a smaller size, the 100% div creeps inward incrementally, not stretching the full width of the viewport -does that make any sense?
thanks for the help
- kpl0
hmm.
- whiteSneaks0
that doesn't make a bit of sense.
if you want the div to wider than the browser than you will need an absolute width i believe.
not sure...
- sparker0
sounds like a margin/padding issue at that point.
can you link the code?
did you try something like this:
body {
margin: 0;
padding: 0;}
#yourid {
display: block;
margin: auto;
padding: n;}
( n = numerical value )to format your main container/wrapper for the content?
- kpl0
I'm guessing you mean you want a div to be exactly the size of the widest div or the window, whichever is bigger.
I'd say try putting a spacer image within the div that would equal the longest div you have on the page, and set the div width to 100%. this will work only on certain browsers: safari, yes, mozilla, no....
Another method is to use fixed positioning... but that's guaranteed not to work for msie.
I'd just say f' it and do absolute values throughout.
- versa0
thanks
let me play with some of these ideas and get back ...
- versa0
ok ... check out this lameness
- versa0
when i finally put up a little example nobody's around...just my luck
- sparker0
your xhtml and css are a little confusing to me...there is a lot in there that doesn't make sense.
i'll take a look at it at lunch and see what i can figure out...
- versa0
thank you my good man