のdivこれはおそらく、質問に答えるために途方もなく簡単ですが、私は（...私は時折、この問題に遭遇し、常にそれを修正する方法を忘れているようだ）、それに引っかかってきたお互い

Question

に壊し

http://nerdcomics.com/portfolio/pink_and_brwn/index.html

私は、ヘッダー、ミドル、およびフッターでページを作成しました。十分に簡単ですね。センターの中には、標準のサイドバーとコンテンツ部門があります。しかし、その内容がページの左側に行くように見えるので、コンテンツのdivが何らかの形で、サイドバーか何かの下に転落しそうです。私は、このためのソリューションがあります知っているが、私は同じ問題を抱えておくように見える、私は可能性がありますように/ etc /クリアフロート。まあ..あなたはちょっと間違っている

@charset "utf-8"; 
/* CSS Document */ 
body { 
    font:"MS Serif", "New York", serif; 
    background: #000; 
    position:relative; 
} 

a { 
    color: #fff; 
    text-decoration: none; 
} 
a:visited { 
    color: #666; 
    text-decoration: none; 
} 
a:hover { 
    color: #666; 
    text-decoration: underline; 
} 

p { 
    padding: 0px 0px 15px; 

} 
h1 { 

    background: #99C no-repeat; 
    font: bold 36px/100% Georgia, "Times New Roman", Times, serif; 
    color: #000; 
} 
h1 a{ 
    color: #333; 
    text-decoration: none; 
} 
h1 a:visited{ 
    color: #666; 
    text-decoration: none; 
} 
h1 a:hover{ 
    color: #ffffff; 
    text-decoration: none; 
} 
h2 { 
    color: #F69; 

    border-bottom: 1px dotted #F69; 
    letter-spacing: -1px; 
    font: normal 190%/100% Georgia, "Times New Roman", Times, serif; 
    padding-bottom: 3px; 
} 
h2 a, h2 a:visited { 
    color: #666; 
    text-decoration: none; 
} 
h2 a:hover { 
    color: #FFF; 
    text-decoration: none; 
} 
h3 { 
    font: normal 140%/100% "Trebuchet MS", Tahoma, Arial; 
    color: #758d38; 
    margin: 10px 0px 5px; 
} 



.content p,h1,h2,h3 
{margin:10px 100px 0 0; 
} 



/* div attributes for page layout */ 



} 
#page { 
    margin: 0px auto; 
    width: 1000px; 
    border-bottom: 0px solid #d5e6eb; 
    border-left: 0px solid #d5e6eb; 
    border-right: 0px solid #d5e6eb; 
    background: #FFFFFF url(images/content-bg.gif) repeat-y; 

} 

#header { 
    background: url(images/header.gif) no-repeat; 
    width: 1000px; 
    border-bottom: 0px solid #59780a; 
    position: relative; 
    clear:both; 
} 


#middle { 
    background: url(images/bg.gif) repeat-y; 
    width: 1000px; 
    position: relative; 
    clear:both; 
} 
#sidebar { 
    width: 214px; 
    position:relative; 
    float:left; 
    clear:right; 
} 

#content { 
    position: relative; 
    width:*; 
    clear:both; 
} 
#footer { 
    background: url(images/footer.gif) no-repeat; 
    width: 1000px; 
    height:77px; 
    position: relative; 
    float:none; 
    clear:both; 
} 


#nav li { 
    float: none; 
    margin-left: 15px; 
} 
#nav a { 
    color: #fff; 
    text-decoration: none; 
    background: none; 
    padding: 5px 5px 15px 5px; 
    font: bold 14px/100% serif; 

} 
#nav a:visited { 
    color: #ffffff; 
    text-decoration: none; 
} 
#nav a:hover { 
    color: #000000; 
} 

Answer 1

：Firebugのは、そのコンテンツが

はここで、これまでのCSSの始まりだ（とにかく、視覚的に）ソートのサイドバーを...食べているようだと言われます。私が思うに、このための最善のアプローチはこれです：もちろん

// header // 

<div class="clearfix wrapper"> 
<div class="sidebar"> your sidebar </div> 
<div class="mainContent"> your content </div> 
</div><!--/.wrapper--> 

//footer // 

、あなたはCSSの一部から、DOCTYPEと、すべてのヘッダのもの:)

を忘れないでください、あなたはこの方法を実行します。

まず、CSSリセットを使用してください。 You can use mineためにもclearfixハックが含まれます。

.sidebar { width:200px; float:left; } /* change with your width */ 
.mainContent { margin-left:200px; } /* also, change with sidebar width */ 

そして...それはすべてです：次に、あなたがこの方法を実行します。私は単純なレイアウトを作る方法について、古くからのようなチュートリアルを作成しました。あなたはそれがhere（すべての非セマンティックIDの:-)を無視する）

Answer 2

があなたの#content divのフロート、その上に幅を設定

読むことができます。消し込みdiv（#footer divの場合）は#middle div内にある必要があります。

Answer 3

フロート#middleギャップを閉じるために残しました。

のstyle.css（ライン97）

#middle { 
background:transparent url(images/bg.gif) repeat-y scroll 0%; 
position:relative; 
width:1000px; 
float:left; 
}