How to fix page layout with embedded frame

by

1👍

✅

The reason why the middle column is currently flowing below the side column is because there is a padding of 10px (20px if you add the left and right side) around each column.

You can think of it as: 30% + 20px + 70% + 20px.

This can either be fixed by change to box-sizing: border-box so that the padding is included in the % width of the div, or can be solved with CSS Flexbox.

With Flexbox – you would need to wrap your columns with a row class and change
the css.

<div class="row">
    <div class="column middle">
        <iframe
          src="https://hestia.speckle.works/#/embed/li0TtsHb3F"
          width="100%"
          height="500px"
        >
        </iframe>
    </div>

    <div class="column side">
        <canvas id="chart1"></canvas>
    </div>
</div>

.row {
    display: flex;
}

/* Left and right column */
.column.side {
    flex-basis: 30%;
}

/* Middle column */
.column.middle {
    flex-basis: 70%;
}

Leave a comment