How to contain the width of an element so it does not overflow the body, but IS visible?
I'm trying to have an element with a greater width then the body, but not cause horizontal scrolling.
http://jsfiddle.net/hYRGT/
This hopefully demonstrates my problem somewhat. The #header contains the #imghead and is set to 960px width.
What I want is the browser to 'think' the page is 960px wide. Because #imghead is more wide then #header and positioned relative so it's in the center.
I'm not able to use a background-image because #imghead is going to be replaced by a flash component.
I'm also not able to use overflow:hidden because I DO want the element to show outside the 960px. I just don't want it to cause h-scrolling.
I do not want to disable h-scrolling开发者_Go百科 altogether, I'd really love a CSS solution. But if javascript is the only way of dealing with this, I guess it would do.
Can't you just absolutely position it relative to the body, 50% from the left and then on the inner element do a negative left margin of half the total width of the element itself which would center it?
I think I got what I wanted: http://jsfiddle.net/hYRGT/3/
Just in case jsfiddle would be down:
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<title>WEBSITE title</title>
</head>
<body>
<div id="header">
<div id="imghead"><img src="/img.jpg" alt=""/></div>
</div>
<div id="wrapper" class="index">
<div id="container">SOME CONTENT</div>
</div>
</body>
CSS:
/*RESET*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dd,dl,dt,li,ol,ul,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;font-family:inherit;font-weight:inherit;font-style:inherit;text-align:left;vertical-align:baseline}
table{border-collapse:collapse;border-spacing:0}
a img,:link img,:visited img{border:0}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
q:before,q:after{content:''}
abbr,acronym{border:0}
img{display:block}
a{color:inherit}
/*STYLES*/
html, body{
height:100%}
body{
background:#000;
text-align:center;
overflow:auto;
overflow-x:hidden;
overflow-y:auto}
#wrapper{
z-index:12;
position:relative;
height:auto!important;
min-height:100%;
width:100%;
background:#0f0;
overflow:auto;
overflow-x:auto;
overflow-y:visible}
#container{
width:960px;
margin:0 auto;
overflow:auto;
background:#00f}
#header{
z-index:50;
position:relative;
overflow:visible;
width:960px;
margin:0 auto;
height:0px;
background:#f00}
#imghead{
width:1100px;
position:relative;
left:-70px;
background:#ff0}
The content overlaps the header by design, I hope this helps someone.
1 limitation is that the header does not horizontally scroll, but in my design that is not necessary.
Tested in FF3, IE8, S4 and C5
加载中,请稍侯......
精彩评论