I have a <div> that is 960px wide and centered horizontally on the page. i want to insert another div inside the first yet make it go the rest of the way across the screen. The result is the div is longer than the width of the screen, while i want it only the full width and no longer (and want to avoid overflow-x:hidden if possible). i have attached a rough demo of what i have and you can see the horizontal scroller at the bottom of the page). any help is appreciated!
Hi stros,
When you have a code sample you can just post it in to your message with code tags around it. No need to upload zip files 
I would not nest that AP div in your wrap div. By setting width:100% on it like you did it got it’s width from the parent and then with all of it hanging out it makes a scrollbar.
Take a different approach without setting a width or nesting it. There are comments in the code to help explain it.
I think I understood what you were wanting to do.
However if the page itself scrolls left at small viewport widths you will have some issues with the AP div going beyond the left side of the viewport with that negative margin.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test Page</title>
<style type="text/css">
body {
margin:0;
padding:0;
}
#wrap {
width:960px;
min-height:400px;
margin:0 auto;
padding-top:25px;/*preserve space for #strip*/
background:#CDF;
}
#strip {
position:absolute;
right:0;/*keep it on the far right at all times*/
left:50%;/*set it at dead center*/
margin-left:-480px;/*now pull it left a known distance (1/2 of wrap's width)*/
background:#444;
height:25px;
color:#fff;
}
</style>
</head>
<body>
<div id="strip">Some text to test scrolling, Some text to test scrolling</div>
<div id="wrap">
</div>
</body>
</html>
I’m not sure what your intentions are for that div which continues on to the right side of the viewport. If it is supposed to contain any actual text you can see the problems with the code above.
What you could do is nest the actual content in another div in the #wrap. That AP div would just be for extending the BG color/image since it is an unknown width. However the text div would still be limited to the width of it’s parent unless you specify a width greater than the parent. You risk the chance of creating premature scrollbars then, as your original code has done.
Something like this might help if text is needed -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test Page</title>
<style type="text/css">
body {
margin:0;
padding:0;
}
#strip, #strip-text {
height:2em;
line-height:2em;
color:#FFF;
background:#444;
}
#strip {
position:absolute;
right:0;/*keep it on the far right at all times*/
left:50%;/*set it at dead center*/
margin-left:-480px;/*now pull it left a known distance (1/2 of wrap's width)*/
}
#strip-text {
position:relative;/*auto stack above #strip*/
padding:0 1em;
white-space:nowrap;
overflow:hidden;
}
#wrap {
width:960px;
min-height:400px;
margin:0 auto;
background:#CDF;
}
p {margin:1em;}
</style>
</head>
<body>
<div id="strip"></div>
<div id="wrap">
<div id="strip-text">This div drags into the AP strip div so the text does not slide beyond the left viewport.</div>
<p>content text below</p>
<p>content text below</p>
<p>content text below</p>
<p>content text below</p>
</div>
</body>
</html>
thanks for the help on this one. i will be sure to post code in the post next time. i am sort of a jack of all trades around here, so as soon as i can test your input out i can leave a more detailed response. thanks again for the help!
hey Razur
i had a moment to have a look and what you are proposing looks along the lines of what i need, but i think i should have been more specific in my example to show exactly the format that i need; i have attached a pdf that shows how the page layout needs to work (the bar going across the page actually wont start at the left edge of #wrap, but 725px right of that spot). thanks again for your help!
Hi,
I see what you are wanting to do now, let me knock something together and I’ll post back.
Ok, what you are wanting to do is similar to CSS Quiz#24-1 we had a while back. The trick was to have an ad on the side of the page that faded off screen at narrowed viewport widths.
Working off of that concept here is what I came up with, see if we’re getting closer now. 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test Page</title>
<style type="text/css">
body {
margin:0;
padding:0;
}
#outer {
position:absolute;
width:100%;
min-width:960px;
overflow:hidden;/*hide #striptext oversized width*/
}
#wrap {
width:960px;
min-height:400px;
margin:0 auto;
background:#CDF;
}
#content {
position:relative;
width:725px;
min-height:400px;
padding:1px 0;
background:#DDF;
}
h1,p {margin:1em;}
#striptext {
position:absolute;
top:150px;
left:100%;
width:99em;/*oversized width hides off-screen and prevents shrinkwrapping*/
color:#FFF;
background:#444;
}
</style>
</head>
<body>
<div id="outer">
<div id="wrap">
<div id="content">
<h1>Page Title Here</h1>
<p>Lorem ipsum dolor sit amet consectetuer aliquet vitae quis nibh vitae. Nibh ut id
condimentum felis sem orci habitasse interdum Nulla nunc. Et ac In Vestibulum sed ligula
at orci orci vel ac. Curabitur nec turpis neque lobortis elit Praesent ac ut Quisque
Quisque. Quis fringilla amet quam purus arcu dolor enim Vestibulum lacinia tincidunt.
Et In penatibus Phasellus a condimentum sit pharetra nunc pede Vestibulum. Sed dui.</p>
<p>Est porta eros eleifend venenatis consectetuer adipiscing justo Nam turpis interdum.
Lacinia facilisis laoreet wisi pede et Integer rutrum Quisque elit Suspendisse. Lacus
eros Phasellus ante Vivamus laoreet non interdum eget lobortis velit. Sed mauris leo
sem rhoncus felis eu Curabitur Nulla faucibus Donec. Id Vestibulum metus accumsan
elit mi pellentesque.</p>
<div id="striptext"><p>Quote author name here</p></div>
</div>
</div>
</div>
</body>
</html>
working nicely now. thanks for sticking with this. i will attempt to mash into my existing page and will keep you up on the progress. one question: you use alot of min-height and min-width in your pieces. what effect do these have over straight height and width? thanks again!
Min/Max dimensions allow for more flexibility in a page. When using min-height it holds an element open at said height even if the content is not that height, but it allows for expansion should the content become greater than the min-height.
If it was a fixed height with fluid text in it you risk the chance of having text spill out of the element which is unsightly.
The only one that was really important on that code above was the min-width on the #outer div. If you were to remove it and reduce the width of your browser window you would see that the 960px width on the #wrap div could get clipped off and become un-accessible due to the overflow:hidden which is clipping anything beyond 100% width.