Prisoner ZERO Prisoner ZERO - 1 year ago 129
HTML Question

Implementing Blades in HTML

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:


enter image description here

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.

enter image description here

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 Source

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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download