2カラムの左右それぞれの最後のラインを同じにしたい

Question

2019/6/28追記

HTMLでは難しい事、CSSの表記方法についてご教示くださりありがとうございます。
CSSは挿入位置などを確認しながら進める為、結果が出るのに時間を頂く形となりそうです。
その為、一旦、皆様にお返事を返しております。

前提・実現したいこと

htmlで作ったホームページがあります。
そのホームページには
左側にメニュー欄、右側にコンテンツ欄と2カラムに分かれています。
（ページを移動すると右側コンテンツ欄のだけが移動するというわけでは無く、ページ丸ごと移動します）
左側と右側の最終行の位置に関わらず、
ページ領域の左右にあるライン（縦線）の長さがフッター位置に来るためには、どのようなタグをどの位置に入れたらよいのでしょうか？

現状

各ページ領域の左右にあるライン（縦線）の長さがページによってバラバラで
なにも入っていない空間があります。それを無くして見栄えを整えたいです。
何行目にどのようなタグを入れる等。

補足情報（FW/ツールのバージョンなど）

【該当のURL】https://www.realmediajapan.com
view-source:https://www.realmediajapan.com/

古いHTMLのベースに、昔、別の方に力をお借りして
HTML5タグやjQueryなどの新しい技術を詰め込んで頂いている状態です。

私にはCSSやjava等の知識は無く、可能な限りHTMLで作業をしたいです。
ページによって左右の長さが違うものの、それらを全て共通のタグにて対応したいと考えています。
可能な場合は、タグやタグを入れる位置
HTMLだけでは限界がある場合は、別の対応方法をご教示頂けますと幸いです。

Comments

[Lhankor_Mhy]

コードをご提示ください。

[sue0401]

大変恐縮ですが、コード＝ソースコードという認識で宜しいでしょうか？
ホームページ制作には精通していない素人ゆえ、ページのソースコードのURLをお伝えする形となります。
補足情報にURLを追記致します。

[Lhankor_Mhy]

HTMLでは難しいと思います。

[sue0401]

希望する内容はHTMLでは難しいとの事、ご教示くださりありがとうございます。

[yoshinavi]

左右のライン（縦線）を変更するには「CSS」を触る必要があります。
しかし、HTMLのみでは「意図するデザイン」へ変更することは無理です。

[sue0401]

同じお礼となり恐縮ですが
CSSを触る必要があるとのこと、ご教示くださりありがとうございます。

Answer 1

左右の縦線をあわせるなら
左右をもう一つdivなど適当なタグでラップして、
縦線を表示すればいいのでは？

※現時点で左側の線にいくつかのパーツがかぶってしまって
ちょっと見栄えが悪くなっていますね

sample

ちょっと雑ですがsampleつけておきます

<style>
.wrap{
  border-left:ridge;
  border-right:ridge;
  display: -webkit-flex;
  display: flex;
  background-Color:red;
}
#left{width:300px}
#right{width:calc(100% - 300px);}
#d1{height:300px;background-Color:yellow}
#d2{height:200px;background-Color:lime}
#d3{height:400px;background-Color:aqua}
#d4{height:600px;background-Color:fuchsia}
#d5{height:500px;background-Color:gray}
</style>
<div class="wrap">
  <div id="left">
    <div id="d1">d1</div>
    <div id="d2">d2</div>
    <div id="d3">d3</div>
  </div>
  <div id="right">
    <div id="d4">d4</div>
    <div id="d5">d5</div>
  </div>
</div>

Comments

[sue0401]

ご回答ありがとうございます。
単語を検索したところ「wrap」スタイルというものが出てきました。

ラップ=wrapという認識で、CSSを使って対応する必要があるという事でしょうか？
質問ばかりで恐縮ですがご教示頂けますと幸いに存じます。

[yambejp]

適当ですがsampleつけときました
命題とイメージが違うようでしたら指摘ください

[sue0401]

sampleを作って下さり感謝いたします。
頂いたsampleで希望通りの表示になるかどうか、試してみようと思います。

Answer 2

CSSやJavaScriptができないとなると、サイトデザインの更新は難しいかと思いますので、ご自身でしっかり勉強をするか、WEBデザイン会社とかに依頼した方がいいと思いますよ。

#wrap {
width: 890px;
margin: 0 auto;
position: relative;
text-align: left;
/* これを追加 */ background: url(../images/side_bottom_bg.gif) repeat-y 19px, url(../images/bg_lr.png) repeat-y right; 
}

CSS での複数の背景の利用方法 - CSS: カスケーディングスタイルシート | MDN

Comments

[sue0401]

教えて下さりありがとうございます。
頂いたCSSで希望通りになるかどうか試してみようと思います。