Search code examples
htmlcsscss-multicolumn-layout

CSS: how to organize two columns in a way that one column overlays above the other?

I would like to have a page split in two columns, one of which should overlay over the other one. I haven't been able to do this, so I ask you guys for help. Please ignore the messy svg code, it was copied from inkscape because I wanted to have some clickable elements inside it.

The first/left column (test column) only appears if there is a list to iterate, otherwise it's hidden. The problem with the flexbox solution I have used in the script below is that the second column is offset when the first column appears. I would like it to just appear "above" the page in the area around the black square, without moving any other elements. How would I be able to achieve that?

.svg_container {
    width: 100%;
    background: #fff;
}

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.column {
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
    flex: 1;
    border: 2px solid pink;
}

.test {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.svg {
    width: 100%;
    flex: 5;
    height: 90vh;
}
<html>
<body>
<main>
  <div class="svg_container">
    <div class="row">
      <div class="test column">
        <p>List Header</p>
        <p>Elem 1</p>
        <p>Elem 2</p>
        <p>Elem 3</p>
        <p>Elem 4</p>
        <p>Elem 5</p>
      </div>
      <svg 
           viewBox="0 0 219.64919 197.34595"
           height="197.34595mm"
           width="219.64919mm"
        class="svg column">
        <g transform="translate(-4.3242022,-42.81862)" id="layer1" inkscape:groupmode="layer" inkscape:label="Layer 1">
          <g
               transform="matrix(0.26458333,0,0,0.26458333,-52.392597,15.930767)"
               id="g768">
            <g id="group1780-42" transform="translate(317.239,-185.674)"   >
              <title id="title2168">Square</title>
                <g id="shape1781-43"  >
                  <title id="title2170">Square</title>
                  <path d="M 0,841.89 H 559.56 V 348.66 H 0 Z" class="st3" id="path2172" />
                  <text x="253.13" y="401.75" class="st4"  id="text2176">Laboratory
                    <tspan x="257.67999" dy="1.2em" class="st5" id="tspan2174">86 sq. m.</tspan>
                  </text>
                </g>                    
            </g>
          </g>
                </g>
      </svg>
    </div>
  </div>
</main>
</body>
</html>

The code is also saved as a jsfiddle

The image below is what I have (square is slightly offset to the right): What I Have

While this is what I want (list does not offset the square): No List What I Want

Solution

  • Since you want the sidebar to "cover" the svg area (content) it needs to have position: absolute. Here is an example:

    function toggle () {
  const sidebar = document.querySelector('.test.column');
  sidebar.classList.toggle('hide');
}
    html, body, main {
  height: 100vh;
}
.svg_container {
    width: 100%;
    background: #fff;
    height: 100%;
}

.test.column {
    background-color: gray;
    position: absolute;
    height: 100%;
    top: 0;
    left: 0;
    flex-direction: column;
    flex-basis: 100%;
    flex: 1;
    border: 2px solid pink;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 200px;
}

.column.hide {
  display: none;
}

.content {
  background-color: teal;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.svg {
    width: 100%;
    flex: 5;
    height: 90vh;
}
    <html>
<body>
<main>
  <div class="svg_container">
      <div class="test column">
        <p>List Header</p>
        <p>Elem 1</p>
        <p>Elem 2</p>
        <p>Elem 3</p>
        <p>Elem 4</p>
        <p>Elem 5</p>
      </div>
      <div class="content">
        <button onclick="toggle()"> Show/Hide </button>
      </div>
    </div>
  </div>
</main>
</body>
</html>