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:


    
        
            My Very Tall Form
        
    
    
        
            
                Blade

user_3778318 · Answer

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; }


    
        
            My Very Tall Form
        
    
    
        
            
                Blade
            
        
    
    
        
            
                Blade
            
        
    
    
        
            
                Blade
            
        
    
    
        
            
                Blade

user_3448527 · Answer

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
}


  
    My Very Tall Form
  
  
    Blade
  
  
    Blade
  
  
    Blade
  
  
    Blade
  
  
    Blade

user_679006 · Answer

Try with Flexbox Container:

.blade-container { display: flex; border: solid 1px #FCC4BF; padding: 5px; }

See this tutorial: http://coursesweb.net/css/css3-flexbox-container

Implementing Blades in HTML

3 Answers