幅を広げたいのに文字が隠れ(?)る
下記のように分かれているページがあります。
┌───────┐
│へっだ │
├─┬───┬─┤
│め│めいん│※│
│に│ │ │
│ゅ│ │ │
├─┴───┴─┤
│ふった │
└───────┘
『※』の部分に文字などもなく不自然にスペースができています。
『めいん』の幅以上の文字を入れると、文字が隠れてしまいます。
『※』の部分まで『めいん』を伸ばし、2カラムにしたいのですが、
他所の幅を変更するだけでは解決できず、質問をさせていただきました。
質問部分のコードは下記の通りです。
(ヘッダ・フッタ省略)
【HTML部分】
<!-- メインコンテンツ -->
<div id="container">
<div id="contents">
~省略~
</div>
<!-- メインコンテンツ終わり -->
<!-- メニュー -->
<div id="menu">
~省略~
</div>
<!-- メニュー終わり -->
</div>
<!-- コンテンツ終わり -->
【CSS部分】
/*---------- コンテンツ ----------*/
#container {
width: 1000px;
overflow: visible;
margin: 0px;
padding: 6px;
background-color: #ffffff;
}
/*---------- メインコンテンツ ----------*/
#contents {
float: right;
margin: 0;
padding: 5px 10px 5px 0;
font-size: 12px;
line-height: 180%;
width: 1000px;
letter-spacing: 1px;
}
#contents #pannavi {
margin: 0;
padding: 0 0 5px 0;
font-size: 12px;
}
#contents h2 {
height: 27px;
margin: 0 0 4px 0;
padding: 8px 0 0 20px;
font-size: 12px;
color: #333333;
background-image: url(img/titlebar.gif);
background-repeat: no-repeat;
}
#contents h3 {
margin: 12px 5px 10px 6px;
padding: 8px 10px 5px 13px;
line-height: 110%;
font-size: 13px;
color: #444444;
border-left: solid 5px #aaaaaa;
background-color: #eeeeee;
}
#contents h19 {
margin: 12px 5px 10px 6px;
padding: 8px 10px 5px 13px;
line-height: 110%;
font-size: 13px;
color: #444444;
border-left: solid 5px #eeeeee;
background-color: #eeeeee;
}
h4,h5 {
font-size:18px;
font-weight:bold;
color:#7e603b;
}
h7 {
font-size:10px;
font-weight:lighter;
color:#7e603b;
}
h8 {
font-size:13px;
font-weight:bold;
color:#7e603b;
}
h9 {
font-size:13px;
font-weight:bold;
color:#cccccc;
}
h10 {
font-size:13px;
font-weight:bold;
color:#000000;
}
h11 {
font-size:18px;
color:#000000;
}
#contents p {
margin: 3px 0 3px 0;
padding: 0 5px 0 5px;
line-height: 180%;
font-size: 12px;
}
#contents a {
color: #c9171e;
font-size: 12px;
}
#contents a:hover {
color: #e83929;
font-size: 12px;
}
#contents img.head_photo {
margin: 0 0 10px 50px;
}
#contents img.photo {
float: left;
margin: 10px 20px 0 0;
}
#contents img.picture {
margin: 0 10px 10px 0;
float: left;
}
#contents p.photo {
margin: 0 0 20px 0;
padding: 0;
}
table#t01 {
border: solid 1px #999999;
border-collapse: collapse;
}
td#t01 {
border: solid 1px #999999;
border-collapse: collapse;
}
td#head {
padding: 7px 6px 5px 10px;
border: solid 1px #999999;
border-collapse: collapse;
}
table.table_line {
border-collapse: collapse;
margin : 10px 0 0 0;
}
td.table_line {
border-collapse: collapse;
padding : 9px 14px 7px 14px;
border-bottom: solid 2px #fffffc;
}
どうか、ご教授お願いいたします。
お礼
回答ありがとうございましたm(__)m Excelで文字の幅を変える方法はないんですね…。 Wordの文章を挿入するというのは、思いつきもしなかったです。 参考になりました(^^)