2024-07-26 Image block Two Columns

by Ttt Yyy

HTML

<!DOCTYPE HTML> 
<!-- <head /> 
<body> -->
<div class='container'>
  <div class="leftCol">
    <div>
       Test left
    </div>
    <div>
      Test left 2
    </div>
  </div>
  <div class="rightCol">
    <div>
       Content Body
    </div>
    <div>
       Content Body
    </div>
    <div>
       Content Body
    </div>
    <div>
       Content Body
    </div>
    <div>
       Content Body
    </div>
    <div>
       Content Body
    </div>
       <div>
       Content Body
    </div>
    <div>
       Content Body
    </div>
    <div>
       Content Body
    </div>
       <div>
       Content Body
    </div>
    <div>
       Content Body
    </div>
    <div>
       Content Body
    </div>
  </div>
</div>
  
<!--  </body>-->

CSS

/* A: Two columns Flex makes as tall or as wide as need be*/
/* .container {
  display: flex
}

.leftCol {
  background-color: green
}

.rightCol {
  background-color: red
} */

/* B: relative position for container, absolute position for leftCol*/
.container {
  position: relative;
  /* height: 100px; */
  border: 1px solid black;
}

.leftCol {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100px;
  background-color: green;
}

.rightCol {
  margin-left: 100px;
  background-color: red;
/*   height: 105%;
  overflow: scroll; */
}

/* Having left col be an image like content (FLOAT) not taking up whole column */
/* .leftCol {
  float: left;
  background-color: green;
  width: 100px;
}

.rightCol {
  background-color: red;
  comment out margin left to have content wrap around
  margin-left: 100px;
} */