所以，我正在使用 squarespace（一个所见即所得的页面创建者），但我正在尝试使用一些自定义 CSS来创建这个. 不幸的是，这种情况正在发生。这是 jsfiddle 上的代码。
我试图将我的整个页面向右推 300 像素，因为目前下面的代码并没有这样做——它与背景碰撞并与左侧的其他文本重叠。我不能只使用正文样式——因为这会影响我正在构建的整个页面的其余部分，并将其向左移动。相反，我试图通过偏移三个帧（framecontentLeft、framecontentRight 和 mainContent）来做到这一点。
我还尝试将这些框架水平居中在页面中（与您正在查看的页面居中的方式相同）但同样，我无法更改正文样式。所以我认为这将是一个 hack，但是每次我尝试使用相对定位来更改框架的位置时，我什么也得不到，或者它会出错并以正常的流向堆叠框架，垂直，在左侧的页面。
谁能帮我弄清楚如何做到这一点？我会给你城市的钥匙...
<!--Force IE6 into quirks mode with this comment tag-->
<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dynamic Drive: CSS Left and Right Frames Layout</title>
<style type="text/css">
body{
margin-top:0px;
margin-left:0px;
position:absolute;
top:0; left:0; bottom:0;right:0;
left: 0%;
font-family:Helvetica;
overflow: hidden;
}
#framecontentLeft, #framecontentRight, #maincontent{
position:absolute;
top:0;
height:1000%;
}
#framecontentLeft,#framecontentRight{
overflow:hidden;
}
#framecontentLeft{
left: 200;
width: 500px; /*Width of left frame div*/
top: 20px;
}
#framecontentRight{
position:relative;
top: 0px;
left: 750px;
}
#maincontent{
left: 250px; /*Set left value to WidthOfLeftFrameDiv*/
right: 300px; /*Set right value to WidthOfRightFrameDiv*/
bottom: 0px;
top: 100px;
width: 500px;
line-height: 1.5;
}
.innertube{
margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}
.centered{
text-align = centered;
}
* html body{ /*IE6 hack*/
padding: 0 150px 0 200px; /*Set value to (0 WidthOfRightFrameDiv 0 WidthOfLeftFrameDiv)*/
}
* html #maincontent{ /*IE6 hack*/
height: 100%;
width: 1000%;
}
</style>
<script type="text/javascript">
/*** Temporary text filler function. Remove when deploying template. ***/
var gibberish=["This is a test page for a gym", "We wholly believe in the art of strength", "Ipso liptum facto freako."]
function filltext(words){
for (var i=0; i<words; i++)
document.write(gibberish[Math.floor(Math.random()*3)]+" ")
}
</script>
</head>
<body>
<img src="abelinebanner.png" width="1000" height="100" />
<Font face = "helvetica">
<div id = "pagediv">
<div class = "innertube">
<div id="framecontentLeft" class = "centered">
<div class="innertube">
<table width="100%" height="100%" cellpadding="3" cellspacing="0" border="0">
<tr><td align="left" valign="top">
<br />
<br />
<br />
</td></tr>
<tr><td align="left" valign="top">
<tr><td align="left" valign="top">
<br />
<br />
<iframe width="200" height="200" src="http://www.youtube.com/embed/RR62QMlvI60" frameborder="0" allowfullscreen></iframe>
</td></tr>
<tr><td align="left" valign="top">
<tr><td align="left" valign="top">
<br />
<br />
<iframe width="200" height="200" src="http://www.youtube.com/embed/TVNfjPWzS70" frameborder="0" allowfullscreen></iframe>
</td></tr>
<tr><td align="left" valign="top">
<br />
<br />
<iframe width="200" height="200" src="http://www.youtube.com/embed/iLn-aSGs7VY" frameborder="0" allowfullscreen></iframe>
</td></tr>
</table>
</div>
</div>
<div id="framecontentRight" class = "centered">
<div class="innertube">
<table width="100%" height="100%" cellpadding="3" cellspacing="0" border="0">
<tr><td align="left" valign="top">
<iframe width="200" height="200" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=2110+Pine+St.+Abilene,+TX+79601&aq=&sll=37.0625,-95.677068&sspn=77.57349,131.132813&ie=UTF8&hq=&hnear=2110+Pine+St,+Abilene,+Texas+79601&t=m&z=14&ll=32.473249,-99.731684&output=embed"></iframe><br /><small><a href="http://maps.google.com/maps?f=q&source=embed&hl=en&geocode=&q=2110+Pine+St.+Abilene,+TX+79601&aq=&sll=37.0625,-95.677068&sspn=77.57349,131.132813&ie=UTF8&hq=&hnear=2110+Pine+St,+Abilene,+Texas+79601&t=m&z=14&ll=32.473249,-99.731684" style="color:#0000FF;text-align:left">View Larger Map</a></small> <br />
Art of Strength Abilene <br />
Hendrick Heatlh Club <br />
2110 Pine St. Abilene<br />
TX 79601 <br />
</td></tr>
<tr><td align="left" valign="top">
<h2> Contact Us:</h2>
Phone : (325) 670-7682 <br />
Email : abeline@aos.com <br />
Website : Link
</td></tr>
<tr><td align="left" valign="top">
<br />
<br />
<img src="ropes2.jpg" width="160" height="600" />
</td></tr>
</table>
</div>
</div>
<div id="maincontent" class = "centered">
<div class="innertube">
<table width="100%" height="100%" cellpadding="3" cellspacing="0" border="0">
<tr><td align="left" valign="top">
<p><script type="text/javascript">filltext(10)</script></p>
</td></tr>
<tr><td align="left" valign="top">
<h1>About Our Training</h1>
<p><script type="text/javascript">filltext(10)</script></p>
<img src="abilene.jpg" width="307" height="243" />
</td></tr><tr><td align="left" valign="top">
<h1>Staff</h1>
<p><script type="text/javascript">filltext(10)</script></p>
</td></tr>
</table>
</div>
</div>
</div>
</div>
</FONT>
</body>
</html>