CSS question regarding VB

[2fast4ya]

That's not quite doing it... I think normally if I would set the width to 100%, it should work, but it's not... Here is a link to what it looks like - It's the WHITE box at the top that says TEST - I want that white box to extend from one edge of the browser to the other... Normally width: 100% should do that... i dont get it.

http://www.audioneeds.com/forums/content.php?styleid=10

[nerbert]

Just add a few more (negative) pixels to the left and right values until you get it just right. You have to have a negative left margin or it will start above the left edge of the header.

[2fast4ya]

Yeah, but that will not compensate for different browser sizes.. This should adjust with the browser size the same way the Width:100% would... I'm not sure this should go in the header template...

[nerbert]

It will adjust automatically with the window size. Just use trial and error with those negative margin values until you get it all the way to the edge. You won't blow anything up.

[2fast4ya]

If i make it too large, a scroll bar appears at the bottom of the screen... or if you adjust the window size, and make the window smaller, the scroll bar is there...

I think it has something to do with the doc_width being at 960px. Since the doc_width is making the entire site 960px width... this div element that we're trying to make width 100% - its nto allowing it... I could be wrong, but that's what I'm thinking.

--------------- Added [DATE]1321944028[/DATE] at [TIME]1321944028[/TIME] ---------------

Okay, I finally figured this out after ridiculous amounts of trial and error. Going to explain it incase someone else ever tries to do the same thing and can't figure it out... It's actually so damn simple, I'm upset I struggled with it for so long.

You need to go into the header template and before ANYTHING else, enter your div info with the position at absolute, and the width at 100%

<div style="position:absolute; top:0px; left:0px; width:100%;">[DIV CONTENTS GO HERE]</div>

For some reason when i add this in the additional.css file, it doesnt work.

[nerbert]

If you make those negative margins too large you get the scrollbar, too little it doesn't span the whole way. That's why I suggested trial and error until it's just right. -25px would be close, maybe 24 or 26.

<div class="topdiv"> ....... </div>

In additional.css:

.topdiv {
margin:0px -25px 0px -25px;
}

But like I said, experiment with that margin figure.