Exploring alignment techniques

FLABS-HH

Goal

Explore different ways to align/arrange elements in columns in html

Alignment techniques

  • Approach 1: inline-block
  • Approach 2: css-columns (text)
  • Approach 3: floats
  • Approach 4: css tables
  • Approach 5 : css flexbox

inline-block

css display property

  • block
  • inline
  • inline-block
  • ...

more display values

block elements

Block level elements normally start (and end) with a new line, when displayed in a browser.


Example

  • h1
  • p
  • ul
  • table
  • div

inline elements

Inline elements are normally displayed without line breaks.


Example

  • b
  • a
  • img
  • span

inline-block to create columns

example

CSS3 columns

CSS3 columns

example

Approach 3: Alignment with Floats

Align using floats

Align using floats

align 3 <div>'s in a 3 columns layout.

starting point










div {
    width: 100px;
    height: 100px;
    border-radius: 6px;
}
.red { background-color: #d02b41; }
.yellow { background-color: #ffcc52; }
.blue { background-color: #42afb7; }
example

Float left










div {
    ...
    float: left;
}

example

Float right










div {
    ...
    float: right;
}

example

Add a footer

footer style












div {
    ...
    float: left;
}
.footer {
    width: 300px;
    background-color: #1a1a1a;
}

example

cancelling float in footer












.footer {
    width: 300px;
    background-color: #1a1a1a;
    float: none;
}
.footer is not floated anymore, but the div's are overlapped

example

clearing the footer












.footer {
    width: 300px;
    background-color: #1a1a1a;
    float: none;
    clear: left;
}

example

add a container

container style




    

    

    





.box {
    width: 100px;
    height: 100px;
    border-radius: 6px;
    float: left;
}
.container {
    background-color: #1a1a1a;
    padding: 5px;
    border-radius: 6px;
}
the height of the parent element collapses to nothing! =(

example

clear floats 1

the collapse problem can be fixed by clearing the floats after the floated elements in the container, but before the close of the container.

example

clear floats 2




    

    

    





.clearfix:after {
    content: ".";
    visibility: hidden;
    display: block;
    height: 0;
    clear: both;
}
example

approach 4: alignment with css tables

align using css tables

Starting Point
Boxes without alignment are placed under each over
example

Define table and columns

wrapp boxes in a <div>


    

    

    


.table {
    display: table;
}
.column {
    display: table-cell;
}
Boxes with the very first left alignment to each other
example

defining second row
Boxes with the 2 rows challenge
example

a wrapping container has to be defined!

implicit table row
Boxes with the 2 rows solution
example

alignment of content in columns

Set vertical alignment 

.column {
    ...
    vertical-align: middle;
}
Boxes with vertical aligned content
example

equal divided columns

set fix table layout and define the width of table


    

        
box1

        
box2 contains.some.more....
        
box3

    

    ...

.table {
    ...
    table-layout: fixed;
    width: 500px;
}
Equal devided cells example
example

Conclusion

pro

  • no need of css float layout in modern browser
  • columns of same heights
  • vertical alignment of content in cells
  • proportional width of columns to fill the available space
  • easy reordering of container

Ccntra

  • lack of colspan and rowspan equavalance
  • css cellspan can expand in response of the content
    (like in html tables)

want's to know more about css tables...?!

have a look into:

everything you know abut CSS is wrong!
[rachel andrew]

let's try it out!

Go to the exercise...

Align using Flexbox

Align using Flexbox

slides

More information

learnlayout.com