CSSに詳しい方お願いします

質問

FirefoxアドオンのStylishを使ってCSSをいじっています。
下記のURLで検索結果のタイトルと本文見出しのボックスを
画面右端まで伸ばしたいと思っています。

はてなブックマーク
http://b.hatena.ne.jp/search/text?q=%E3%83%AC%E3%83%93%E3%83%A5%E3%83%BC

CSSはこのアドオンを使い始めてからちょこっとだけ学んだもののまだまだ初心者です。

li.search-result h3 {width:100% !important}
こんな感じに書いてみても反応がありません。（display:none すると消えるのですが）

CSSに詳しい方「タイトルと本文の右端まで伸ばす方法」を教えて下さい。

回答No.4

ORUKA1951 · ベストアンサー

No.2です。結論だけ言うとCSSの最後に
#res ul li div.entryinfo blockquote {max-width: 100%;}
とだけ加えればよい。

回答No.5

noname#206842

Ｎｏ．３です。
下記参考URLのようにしたいということなのでは？・・・

ソース　↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
http://www.8341web.com/test/test/text.zip

アドセンスをいらう必要がないのであれば
No.4さんの答えが正解です！

参考URL：

http://www.8341web.com/test/test/text.html

回答No.3

noname#206842

CSSだけを書き換えてもダメなのでは？・・・ソースを読むとアドセンスをjsで読み込んでいます。
アドセンスの読み込みを、しないようにスクリプトの読み込みを止めてから、ｃｓｓを読まないと・・・・

横に広げたい部分は、<div id="res">の部分では？・・・

回答No.2

ORUKA1951

＞「タイトルと本文の右端まで伸ばす方法」を教えて下さい。

#res ul li div.entryinfo blockquote {
font-size: 101%;
line-height: 1.6;
margin: 0.2em 0 0.5em;
/* max-width: 48em; 消す */
overflow: hidden;
word-break: break-all;
}
#res ul li.search-result {
clear: left;
margin: 20px 0 35px;
overflow: hidden;
text-align: center;/* ★ */
}

ただ、このサイトのHTML/CSSは糞です。
　何の役にも立ちません。

　きちんと、HTMLとCSSを基礎からきちんと学びましょう。
・デザインのために、スタイルシートのためにHTMLは書かない。
　「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )」
・DIVは、HTML5では、明確に
　Note:Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors.( http://www.w3.org/TR/html5/grouping-content.html#the-div-element )
　となります。実はHTML4.01のときからそうでした。
『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』

　スタイルシートのセレクタは、HTMLの文書構造に基づいて記述します。いちいち一意セレクタやクラスセレクタは使いません。

回答No.1

noname#206842

http://cdn-ak.b.st-hatena.com/css/common2.css?d2b023bcf5e99919e9fcb1c47fd637965b556620　
の、ソースを読むと、↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓のようになっています。

/* ============================ Layout ============================ */
.wrapper-container,
.fixed-width #header {
width:100%;
text-align:center;
}
.wrapper-container-inner,
.fixed-width #header-body {
position:relative;
width:960px;
text-align:left;
margin:0 auto;
height:100%;
}
.wrapper-container-inner {
padding-top:10px;
}
.wrapper-container-inner.left-column-line {
background:url(/images/user/background-line-ddd.gif) repeat-y 180px 0;
}
#left-container {
float:left;
width:180px;
font-size:75%;
}
#center-container {
float:left;
width:500px;
padding:0 20px;
}
#right-container {
width:240px;
margin-left:720px;
font-size:75%;
}
#right-container {
_margin:0;/* ie6 */
_float:right;/* ie6 */
}
.wrapper-container-inner:after,
#left-container:after,
#center-container:after,
#right-container:after {
clear:both;
content:"";
display:block;
}
#left-container .left-content,
#page-navi {
margin-right:10px;
}

***************************************************************

#center-container {
float:left;
width:500px;
padding:0 20px;
}

#center-containerの幅が500pxに設定されているので、この部分を修正されてはいかがでしょうか？

補足

ご回答ありがとうございます。

#center-container {width:100% !important}
書いてみたのですが変化なしでした。

Firefox 28.0の開発ツールから直接CSSもいじってみましたが
変化なしでした。