HTML、CSSでの表示位置調整

Question

leftboxの表示位置にboxの内容を入れたいのですが、絶対位置だと画面サイズに変動されてしまうのでうまく表示できません。
HTMLはwrapの中にboxは入れたくないのですが、入れないでleftboxの表示位置にboxを表示させることは可能でしょうか？
可能であれば対処法や構文を教えて頂ければ幸いです。
よろしくお願いします。

<div class="box">
	ABCD
</div><!--box-->

<div class="wrap">
	<div class="content">
		<div class="leftbox">
			左サイドボックス
	![イメージ説明](98612008f5db2d04e927adafcea9fd48.jpeg)><!--leftbox-->
		<div class="rightbox">
			右サイドボックス
		</div><!--rightbox-->
	</div><!--content-->
</div><!--wrap-->

	 body{ 
margin: 0 auto;
  margin-right: auto;//ここで中央寄せを指定する。
  margin-left : auto;
width100%;
}
	
.wrap {
    overflow: hidden;
    width100%;
    margin: 0 auto;
}

.content{
display: block;
width: 1120px;
margin: 0 auto;
text-align: center;
}

.rightbox{
display: inline-block;
width: 830px;
height: 500px;
float: right;
background:#ccc;
}

.leftbox{
display: inline-block;
width: 260px;
height: 500px;
float: left;
background:#ccc;
}

.box{
width: 260px;
height: 200px;
background:#ff0000;
}

Comments

[yambejp]

手書きの画像でいいので図示してください

[siruba]

画像例を追加しました。
よろしくお願いいたします。

[x_x]

HTML 中におかしなものが入っていますが、<div class="rightbox"> の直前に </div> があると思っていいのでしょうか？

Answer 1

今回は制約の関係上、@media screen を細かく設定して対応させて頂きました。

x_x様の回答結果でも質問通りの結果にすることができました。
ありがとうございます。

Answer 2

body {
  display: grid;
  margin: 0;
  grid-template-columns: 1fr 260px 30px 830px 1fr;
  grid-template-rows: 500px;
  grid-template-areas: 'ml left gap right mr';
  overflow: hidden;
}

.box {
  grid-area: left;
  height: 200px;
  z-index: 1;
  background: #f00;
  /* check! */
  opacity: 0.5;
}

.wrap,
.content {
  display: contents;
  text-align: center;
}

.leftbox{
  grid-area: left;
  background: #ccc;
}

.rightbox {
  grid-area: right;
  background: #ccc;
}

https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout

Answer 3

画像例から・・・

いまのCSSからするとこんな感じになりますが大丈夫ですか？

上記の状態で無条件に.boxが左サイドボックスに入るとは思えませんが・・・

<style>
.box{
  background-Color:fuchsia;
}
.wrap {
    overflow: hidden;
  background-Color:gray;
}
.content{
display: inline-block;
width: 1120px;
margin: 0 auto;
  background-Color:yellow;
}
.rightbox{
display: inline-block;
width: 830px;
float: right;
  background-Color:aqua;
}
.leftbox{
display: inline-block;
width: 260px;
float: left;
  background-Color:lime;
}
</style>
<div class="box">
    ABCD
</div>
<div class="wrap">
    <div class="content">
        1<br>2<br>3<br>
        <div class="leftbox">
            左サイドボックス<br><br><br>
        </div><!--leftbox-->
        <div class="rightbox">
            右サイドボックス<br><br><br><br><br>
        </div><!--rightbox-->
        4<br>5<br>6<br>7<br>8<br>9<br>
    </div>
</div>

Comments

[siruba]

回答ありがとうございます。
CSS修正しました。
一応画像例は表示例のスクショです。

やはり無条件に.boxが左サイドボックスに入れるのは難しいですよね。。

[yambejp]

結局contentの内容によってleftboxの開始位置が流動的なので
boxをabsoluteで指定もできず、jsを利用して計算をしない限り
位置合わせは難しいと思います