子要素を左右に並べ、それぞれ片方だけ背景をブラウザいっぱいにしたいです

Question

初めて利用します。
親要素のmax-widthを960pxに設定し、
横長の画像を一つ目は左寄せ、2つ目を右寄せに配置し、
それぞれの背景をブラウザ外側にだけ背景を伸ばしたいのですが、やり方が分かりません。。。

どなたかお助けいただけないでしょうか。

よろしくお願いいたします。。

【追記】申し訳ありません。試みたコードが未掲載でした。

<div class="oya"> <div class="ko1"> <p>テキストテキスト</p> </div> <div class="ko2"> <p>テキストテキスト</p> </div> </div>

.oya {
max-width: 960px;
margin: 0 auto;
height: 500px;
}

.oya .ko1 {
background: #26a69a;
margin: 0 calc(50% - 50vw);
padding: 1px calc(50vw - 50% );
width: 40%;
padding-right: 0px;
}

左寄せはなんとかできそうなのですが、右寄せの方法が分かりません。

よろしくお願いいたします。

Comments

[hatena19]

現状のHTMLとCSSを提示してください。

このままだと「丸投げ」の非推奨の質問になります。

Answer 1

下記でどうでしょう。

.oya {
  max-width: 960px;
  margin: 0 auto;
  height: 500px;
  background-color: lightgray;
}
.oya > div  {
  width: 40%;
  margin: 0 calc(50% - 50vw);
  padding: 1px calc(50vw - 50%);  
  background: #26a69a;
}
.oya .ko1 {
  padding-right: 0px;
}
.oya .ko2 {
  margin-left: auto;
  padding-left: 0px;
}
.oya > div > p {
 background: #fff; 
}

Comments

[koukouhira]

ありがとうございます！！
解決することができましたm(__)m