※ ChatGPTを利用し、要約された質問です(原文:html、CSS共に初心者です。3段目の2列目の右に、4段目の右の内容)
HTML、CSS初心者のための3段目の配置についての解決方法
このQ&Aのポイント
html、CSS初心者の方が3段目の2列目の右側に4段目の右の内容を配置する方法について解説します。
html、CSS初心者の方が3段目の2列目の右側に4段目の右の内容を持っていく方法について教えてください。
html、CSS初心者の方が3段目の2列目の右側に4段目の右の内容を配置する際にうまくいかない問題について解決方法を教えてください。
html、CSS共に初心者です。3段目の2列目の右に、4段目の右の内容
html、CSS共に初心者です。3段目の2列目の右に、4段目の右の内容を持っていきたいのですが、どうしてもうまくいきません!
解決できる方がいましたら、どうかご教示願います!
<style type="text/css">
<!--
* {
padding : 0 ;
margin : 0 ;
}
#wrapper {
width : 700px;
margin-left : auto ;
margin-right : auto ;
background-color : #eeffff ;
}
#header {
width : 700px;
height : 150px ;
background-color : #335555 ;
}
#navigation {
/* background-color : #cceeee ; */
width : 300px;
float : left ;
}
#navigation h2 {
width : 150px;
background-color : #99bbbb ;
}
#navigation ul {
width : 150px ;
}
#navigation li {
width : 150px ;
height : 30px ;
}
#navigation a {
width : 150px ;
height : 30px ;
background-color : #bbdddd ;
display : block ;
}
#content {
background-color : #eeeeee ;
width : 350px;
float : right ;
}
#subcontent {
width:200
float : left ;
clear :both ;
}
#subcontent h4 {
width : 150px;
background-color : #99bbbb ;
}
#subcontent ul {
width : 150px ;
}
#subcontent li {
width : 150px ;
height : 30px ;
}
#subcontent a {
width : 150px ;
height : 30px ;
background-color : #bbdddd ;
display : block ;
}
#thirdcontent {
background-color : #eeeeee ;
width : 500px;
float : right ;
}
#footer {
background-color : #335555 ;
width : 700px ;
clear : both ;
}
//-->
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>pppppppppppppppppppppppppppp</h1>
</div>
<div id="navigation">
<h2>pppppppp</h2>
<ul>
<li><a href="#">pppppppp</a></li>
<li><a href="#">pppppppp</a></li>
<li><a href="#">pppppp</a></li>
<li><a href="#">pppppppp</a></li>
</ul>
</div>
<div id="content">
<h2>welcome to my hp</h2>
<br>
<h3>ppppppp</h3>
<p>ppppppppppp</p>
<h3>pppppppp</h3>
<br>
<p>pppppppp</p>
</div>
<div id="subcontent">
<h4>この横にカテゴリーを配置させたいのです</h4>
<ul>
<li><a href="#">pppppppp</a></li>
<li><a href="#">pppppppp</a></li>
<li><a href="#">pppppppp</a></li>
<li><a href="#">ppppppppp</a></li>
</ul>
</div>
<div id="thirdcontent">
<h4>カテゴリー(これを一段上に)</h4>
<br>
<h5>pppppppppp</h5>
<p>ppppppppp</p>
<h5>ppppppp</h5>
</div>
<div id="footer">
<br>
</div>
</div>
</body>
</html>
お礼
色々試行錯誤してみたのですが、まだ解決できません! 今からまた勉強してトライしてみます! 回答有難うございました。