CSS框架，我的内容不服从框架限制

我想创建一个CSS框架，我有一个小的左框架和一个大的右框架。CSS框架，我的内容不服从框架限制

我想把一个标志和一些misc链接在左边。

我想把导航和内容放在右边。

当我向左侧添加内容时，会将右侧的内容推到最低点。我使用了一个示例CSS框架页面来启动。

我想要的媒体室和关于链接是在正确的框架顶部，我只是没有看到它。

HTML代码段：

<!-- Left Frame --> 
<div id="framecontentLeft"> 
    <div class="innertube"> 
     <header> 
     <hgroup> 
     <div class="FloatingBox"> 
        <h1>6&nbsp;&nbsp; 
      <span class="AppleGreen">C</span>&nbsp;&nbsp; 
      <span class="AppleYellow">o</span>&nbsp;&nbsp; 
      <span class="AppleOrange">l</span>&nbsp;&nbsp; 
      <span class="AppleRed">o</span>&nbsp;&nbsp; 
      <span class="ApplePurple">r</span>&nbsp;&nbsp; 
      <span class="AppleBlue">s</span>&nbsp;&nbsp; 
     </h1> 

     <h2> 
      A&nbsp; 
      <span class="AppleBlue">Nostalgic</span> 
      <span class="ApplePurple">Trip</span> 
      <span class="AppleRed">Down</span> 
      <span class="AppleOrange">Memory</span> 
      <span class="AppleYellow">Lane</span>. 
     </h2> 
     </div> 

       <br /><br /><br /><br /><br /><br /> 
       <a class="AppleRed" href="#">Have Footage To Submit?</a> 

     <br /><br /><br /><br /> 
      <a class="AppleRed" href="#">Need To Contact Us?</a> 
    </hgroup> 
    </header> 
</div> 
</div> 

<!-- Right Frame --> 
<div id="maincontent"> 
    <div class="innertube"> 

    <?php include('includes/menu.inc'); ?> 

    </div> 
</div>

这里是CSS：

/* v1.0 | 20080212 */ 

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, 
b, u, i, center, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    outline: 0; 
    font-size: 100%; 
    /* vertical-align: baseline; */ 
    background: transparent; 
} 

body { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    line-height: 2; 
    background-image: url('images/background.png'); 
    /*width: 90%; */ 
    overflow: hidden; 
    height: 100%; 
    max-height: 100%; 
} 

.framecontentLeft, .framecontentRight{ 
    position: absolute; 
    top: 0; 
left: 0; 
width: 200px; /*Width of left frame div*/ 
height: 100%; 
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/ 
background-color: navy; 
color: white; 
} 

.framecontentRight{ 
left: auto; 
right: 0; 
width: 150px; /*Width of right frame div*/ 
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/ 
background-color: #fff; 
color: #fff; 
} 

.maincontent{ 
position: absolute; 
top: 0; 
left: 200px; /*Set left value to WidthOfLeftFrameDiv*/ 
/*right: 150px; */ /*Set right value to WidthOfRightFrameDiv*/ 
bottom: 0; 
overflow: auto; 
background: #fff; 
} 

.innertube{ 
    margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/ 
} 

* html body{ /*IE6 hack*/ 
    padding: 0 0 0 200px; /*Set value to (0 WidthOfRightFrameDiv 0 WidthOfLeftFrameDiv)*/ 
} 

* html #maincontent{ /*IE6 hack*/ 
height: 100%; 
width: 100%; 
}

谁能帮助我了解如何解决这一问题，实现我想要什么？

来源

2010-12-09 Axl

请不要见怪，但风格是相当混乱，这样就没有办法它是永远不会工作.. – Lucius 2010-12-09 23:21:42

请自己帮忙，摆脱绝对定位。
在这种特殊情况下，你可以做些什么，是浮动左边的菜单，并保持主要内容层为一个正常的静态定位div，只需添加一个合适的左边距。
请参见下面的示例代码：

标记：

<body> 
<div id="container"> 
    <div id="sidemenu">some content</div> 
    <div id="maincontent">blah blah blah</div> 
</div> 
</body>

风格：

* { /* jolly selector '*' applies the following rules to all elements */ 
    margin: 0; 
    padding: 0; 
} 
body { 
    background: #CCC; /* whatever background you see fit */ 
} 
#container { 
    width: 100%; 
    float: left; 
    display: inline; /* IE fix */ 
} 
#sidemenu { /* this layer is floated LEFT */ 
    float: left; 
    display: inline; /* IE fix */ 
    width: 200px; 
    background: #DDD; 
} 
#maincontent { /* this layer is a plain fixed-position div */ 
    margin-left: 220px; /* the margin makes it align correctly with the left 'frame' */ 
}

来源

2010-12-10 22:48:19 Lucius

，我注意到的第一件事是，你有标记，但.maincontent在造型这将目标<div class="maincontent">

我不会使用绝对这个职位<div id="maincontent">。

来源

2010-12-10 04:14:15 mark123

CSS框架，我的内容不服从框架限制

回答

相关问题