I have a div with absolute positioning, which serves as a kind of horizontal line, with a background image with x-repition. I want its width to fill up the whole page, but its x-position isn't 0 so I can't just give it width 100%. How do I do it?
+1
A:
I think you would have to use javascript to capture the width of the window. Then assign the width to the div.
var winW = 630, winH = 460;
if (parseInt(navigator.appVersion)>3) {
if (navigator.appName=="Netscape") {
winW = window.innerWidth;
winH = window.innerHeight;
}
if (navigator.appName.indexOf("Microsoft")!=-1) {
winW = document.body.offsetWidth;
winH = document.body.offsetHeight;
}
}
document.getElementById('divName').style.width = winW;
document.getElementById('divName').style.height = winH;
Kyle
2010-03-15 11:04:58
I prefer to avoid javascript but that might still come in handy sometime, thanks =)
Clox
2010-03-15 13:48:56
+1
A:
You can specify both left and right at the same time:
position: absolute;
left: 5px;
right: 5px; /* or whatever value you want */
RegDwight
2010-03-15 11:05:18
I don't understand how that would work? What should I set the width to with that? I did try setting right too but it didn't seem to make any difference at all. Using chrome by the way.
Clox
2010-03-15 13:47:40
@Clox: the whole point of this approach is that you don't have to set the width explicitly, since it is calculated automatically. It's certainly news to me that it doesn't work in Chrome; I don't have access to Chrome right now, but I will test it later.
RegDwight
2010-03-15 14:13:38
A:
I managed to solve it by nesting the div in another div which has left:0, with width:100% and overflow:hidden. Works perfectly =)
Clox
2010-03-15 13:52:03