Implementing Blades in HTML

Question

I am trying to create a 'blades' experience and my CSS isn't quite right...and I don't see why.

• Adding a new blade should simply push everything to the right

GOAL:

PROBLEM:
I have given the Widgets a clear on both...and neither the Dashboard Container, nor the Blade Container have a fixed width...so I am confused.

STYLE:

/** DASHBOARD CONTAINER **/
.dashboard-container { border: solid 1px #FCC4BF; padding: 5px; margin-top: 5px; }
.dashboard-container .widget { clear: both; display: inline-block; vertical-align: top; }

/** FORM CONTAINER **/
.form-container { border: solid 1px #FCC4BF; height: 500px; padding: 5px; width: 500px; }

/** BLADE CONTAINER **/
.blade-container { border: solid 1px #FCC4BF; padding: 5px; }
.blade-container .blade { border: 1px solid #ccc; border-radius: 3px; display: inline-block; height: 500px; padding: 2px; width: 200px; }

CURRENT HTML:

<div class="dashboard-container">
    <div class="widget">
        <div class="form-container">
            My Very Tall Form
        </div>
    </div>
    <div class="widget">
        <div class="blade-container">
            <div class="blade">
                Blade
            </div>
        </div>
    </div>
</div>

Answer 1

The problem is that they need to go somewhere after the screen ends, the default behaviour is to break line, you can avoid that with white-space: nowrap;, added overflow-x: scroll; so you can scroll through your elements.

Note: I added those properties to .dashboard-container

/** DASHBOARD CONTAINER **/
.dashboard-container { border: solid 1px #FCC4BF; padding: 5px; margin-top: 5px; overflow-x: scroll; white-space:nowrap; }
.dashboard-container .widget { clear: both; display: inline-block; vertical-align: top; }

/** FORM CONTAINER **/
.form-container { border: solid 1px #FCC4BF; height: 500px; padding: 5px; width: 500px; }

/** BLADE CONTAINER **/
.blade-container { border: solid 1px #FCC4BF; padding: 5px; }
.blade-container .blade { border: 1px solid #ccc; border-radius: 3px; display: inline-block; height: 500px; padding: 2px; width: 200px; }

<div class="dashboard-container">
    <div class="widget">
        <div class="form-container">
            My Very Tall Form
        </div>
    </div>
    <div class="widget">
        <div class="blade-container">
            <div class="blade">
                Blade
            </div>
        </div>
    </div>
    <div class="widget">
        <div class="blade-container">
            <div class="blade">
                Blade
            </div>
        </div>
    </div>
    <div class="widget">
        <div class="blade-container">
            <div class="blade">
                Blade
            </div>
        </div>
    </div>
    <div class="widget">
        <div class="blade-container">
            <div class="blade">
                Blade
            </div>
        </div>
    </div>
</div>

Answer 2

use flexbox simplifying your html markup a lot.

.dashboard-container {
  border: solid 1px #FCC4BF;
  padding: 5px;
  margin-top: 5px;
  display: flex;
    height: 500px;
}


/** FORM CONTAINER **/

.form-container {
  border: solid 1px #FCC4BF;
  padding: 5px;
  flex: 0 500px;
}


/** BLADE CONTAINER **/

.blade {
  border: 1px solid #ccc;
  border-radius: 3px;
  flex: 0 200px;
  margin: 0 10px
}

<div class="dashboard-container">
  <div class="form-container">
    My Very Tall Form
  </div>
  <div class="blade">
    Blade
  </div>
  <div class="blade">
    Blade
  </div>
  <div class="blade">
    Blade
  </div>
  <div class="blade">
    Blade
  </div>
  <div class="blade">
    Blade
  </div>
</div>