質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.51%

  • HTML5

    4030questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    2077questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

クラスright contentsが下に落ちる

受付中

回答 1

投稿

  • 評価
  • クリップ 1
  • VIEW 696

tidavest

score -98

<!DOCTYPE html>

<head><link rel="stylesheet" type="text/css" href=".css"></head>
<body>
<div class="wrapper">        
<header>
<div class="topnavigation">
<ul class="left">
<li>I am treating</li>
<li>Game</li>
<li>Hobby</li>
<li>Animation goods</li>
<li>PC supply</li>
<ul class="right">
<li class="right">Register</li>    
<li>Login</li>
</ul>

</div>
<div class="top">
<h1 style="margin-left:10px;"><img src="mets.jpg"><p>Hobby Station</p>
<!--<div class="sns"><img src="" class="icon"><img src=""><img src=""></div>-->
</h1>
</div>

<div class="contents">
<div class="category">

<form action="cgi-bin/abc.cgi" method="post">
<p><label><input type="search" name="search" size="30" maxlength="255"></label><input type="submit" value="search"></p>

<div class="sub">
</div>
<div class="aside">
</div>
<div class="categorytwo">
<div class="inner">                    
<p>Game</p>
<p>Animation Hobby Goods</p>
<p>Digital Goods</p>
</div>
</div>

</div>
<div class="centercontents">
<div class="whatsnew">
</div>
</div>
<div class="rightcontents">
</div>
</div>

</div>
<footer>
</footer>

</body>
</html>

body {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ebf1f6+0,abd3ee+50,89c3eb+100,d5ebfb+100 */
background: #ebf1f6; /* Old browsers */
background: -moz-linear-gradient(left,  #ebf1f6 0%, #abd3ee 50%, #89c3eb 100%, #d5ebfb 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #ebf1f6 0%,#abd3ee 50%,#89c3eb 100%,#d5ebfb 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #ebf1f6 0%,#abd3ee 50%,#89c3eb 100%,#d5ebfb 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebf1f6', endColorstr='#d5ebfb',GradientType=1 ); /* IE6-9 */

}

.wrapper {
margin:20px;
}

img {
height:120px;
margin-bottom:15px;
display:inline;
}

.topnavigation {
height:20px;
margin:0px;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1e5799+0,7db9e8+100 */
background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top, #1e5799 0%, #7db9e8 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #1e5799 0%,#7db9e8 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #1e5799 0%,#7db9e8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */

}

.topnavigation ul li {
margin-left:20px;
}

.topnavigation ul li {
float:left;
list-style-type:none;
font-weight:bold;
color:white;

}

.topimage {
height:150px;

}

.top {
border:solid 1px black;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1e5799+0,2989d8+0,7db9e8+100 */
background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(left, #1e5799 0%, #2989d8 0%, #7db9e8 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #1e5799 0%,#2989d8 0%,#7db9e8 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #1e5799 0%,#2989d8 0%,#7db9e8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=1 ); /* IE6-9 */
}

.top p {
color:#0000AA;
}

.top img {
width:100px;
height:100px;
float:left;
margin^top:-20px;
}

.right {
float:right;
margin-right:15px;
}

.sns {
float:right;
}

.sns img {
width:30px;height:30px;
}

/*.top p {
float:left;
}*/

.undernavigation {
height:30px;
background-color:blue;
clear:both;
}

.contents {
width:1250px;
height:900px;
border:1px solid black;
clear:both;
margin:5px;
}

.category {
float:left;
width:250px;
height:900px;
border:1px solid black;
background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(left, #1e5799 0%, #2989d8 0%, #7db9e8 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #1e5799 0%,#2989d8 0%,#7db9e8 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #1e5799 0%,#2989d8 0%,#7db9e8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=1 ); /* IE6-9 */
padding:5px;
font-weight:bold;
margin-top:0px;

}

.inner {
width:200px;height:100px;
border:1px solid black;
padding:10px;
}

.centercontents {
margin-left:280px;
width:610px;height:900px;
border:1px solid black;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1e5799+0,7db9e8+0,7db9e8+0,7db9e8+49,2989d8+100,207cca+100,1e5799+100,1e5799+100 */
background: rgb(30,87,153); /* Old browsers */
background: -moz-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(125,185,232,1) 0%, rgba(125,185,232,1) 0%, rgba(125,185,232,1) 49%, rgba(41,137,216,1) 100%, rgba(32,124,202,1) 100%, rgba(30,87,153,1) 100%, rgba(30,87,153,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(125,185,232,1) 0%,rgba(125,185,232,1) 0%,rgba(125,185,232,1) 49%,rgba(41,137,216,1) 100%,rgba(32,124,202,1) 100%,rgba(30,87,153,1) 100%,rgba(30,87,153,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(30,87,153,1) 0%,rgba(125,185,232,1) 0%,rgba(125,185,232,1) 0%,rgba(125,185,232,1) 49%,rgba(41,137,216,1) 100%,rgba(32,124,202,1) 100%,rgba(30,87,153,1) 100%,rgba(30,87,153,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#1e5799',GradientType=0 ); /* IE6-9 */

}

.whatsnew {
width:400px;
height:250px;
border:1px solid black;
margin:10px;
}

.categorytwo {
margin-left:10px;
}

table {
width:180px;
height:800px;
border:1px solid black;
margin-left:15px;

}

table ul {
display:inline;
}

.sidebar {
width:160px;
float:left;
}

.sub {
width:520px;
}

.aside {
width:250px;
}

.rightcontents {
width:100px;
height:500px;
border:1px solid black;
}

上記は、自身で作成している html と cssのコードです。
contents内のclassをfloat leftで、順番に横に並ぶようにしています。.rightcontentsのクラスが、contents内に収まらず、下の左側に来てしまいます。どうにかcontents class内の一番右に来るようにしたいのですが、どの様に修正すればよいかアドバイスお願い致します。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • Kosuke_Shibuya

    2017/01/28 08:25

    質問文のコードはコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

    キャンセル

回答 1

+1

ちゃんと閉じていないタグが多々ありhtmlが不完全ですが、このまま使用されているのでしょうか。
構造がやや不明ですが、推察するに、.centercontents がfloatしてないので .rightcontents が回り込まない、という感じでしょうか。

.rightcontents を .centercontents の前に置いて .rightcontents に float:right を追加するか、
配置そのままなら .centercontents に float:left 、.rightcontents に float:right をそれぞれ追加します。

いずれにしても html を修正しないと不具合が続出するかと思います。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.51%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • HTML5

    4030questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    2077questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。