CSS ブログ本文とサイドバーのバランス

質問

質問させてください！

weeblyの2カラム標準テンプレートを使用しweb siteを運営しているのですが、

両端の空白をもう少し縮め、本文とサイドバーをその分広げたいと思い、CSSを
調整しようと調べながら各数値を変更してみたのですがうまくいきません。
どの数値を変更するべきなのか教えていただけたらと思います。
理想のサイトのリンク先も貼付けておきます。
http://www.fecalface.com/

body {
background-color:#fff;
font-family:"helvetica",arial,sans-serif;
font-size:62.5%;
color:#777;
margin:0;
padding:0;

}
acronym {
cursor:help;
border-bottom:1px dotted #ddd;
}
#container {
font-size:1.2em;
width:800px;
margin:0 auto;

}
#header {
color:#444;
margin:0;
padding:0px;
background:#fff url(%%HEADERIMG%%) no-repeat bottom right;
}
#header h1 {
font-family:"helvetica",arial,sans-serif;
font-size:2em;
color:#333;
margin:30px 0 0 0;
font-weight:normal;
line-height:1.5;
}
#header h1 strong {
color:#c00;
}

#header h2 {
margin:1000px 0 0 0;
font-size:1em;
font-weight:normal;
color:#999;
}
#navigation {
text-align:right;
margin:10px 10px 10px auto;
}

#navigation {
margin:0 10px 0 0;
padding:0;
}

#navigation li {
margin:0;
padding:0;
list-style:none;
display:inline;
}

#navigation li a {
padding:5px 6px 2px 4px;
margin:0 2px 0 0px;
color:#000000;
text-decoration:none;
font-weight:helvetica;
border-bottom:1px solid #ddd;
}

#navigation li a:hover {
color:#C00;
border-bottom:1px solid #c00;
}
#active a:link {
color:#C00;
border-bottom:1px solid #c00;
}
#active a:hover {
color:#C00;
border-bottom:1px solid #c00;
}
#active a:visited {
color:#C00;
border-bottom:1px solid #c00;
}

#content {
margin:20px 0 20px 10px;
padding:0;
}

#content p {
padding:2px;
text-align:justify;
line-height:1.5;
}
#content h1 {
display:block;
margin:50px 0 0 10px;
padding:0;
font-family:"helvetica",arial,sans-serif;
font-size:1.8em;
color:#c00;
border-color:#ddd;
border-style:solid;
border-width:0 0 1px 0;
}
#content h2 {
display:block;
margin:40px 40px 0 0px;
padding:0

長くなってしまいましたがよろしくお願いします！

回答No.1

4649panda · ベストアンサー

ソースを見てみましたが、ちょっと難しそうだったので、読み間違えていたらすみません。
#containerの中にテーブルがあって、その中のtdに左右それぞれの内容を表示しているのですね？

テーブル自体はwidth: 100%; で指定されているので、そのテーブルが入っている#containerのサイズを調整してやれば、両端の空白を調節してやれると思います。

#container {
font-size:1.2em;
width:800px;　/*この部分*/
margin:0 auto;

}

ただ、現在が800pxに指定されているため、あまり広げ過ぎると閲覧者の環境(モニタの解像度)によってはページ全体が横スクロールが必要なサイズになると思います。
今のままでも800x600では横スクロールが出ていると思います。
最近では800x600の方は少ないとは思いますが、1024x768ではチェックしたほうが良いかも知れません。

お礼

返事が遅れてしまってすみません！
ありがとうございます。

確かに観覧者の環境をもっと考えるべきですね、、。
頑張ってみます。