CSS Layout

Text

The Box Model

The box Model

Padding: the space in between the border and the content. Padding is added on to the total width of the box.

Margin: moves the "entire box" to the left, right, up or down.

Border: a line that surrounds the the element. Borders are added on to the total width of the box.

You can affect all 4 sides of the box individually

Padding

padding-left: 3px;
padding-right: 4px;
padding-top: 5px;
padding-bottom: 6px;

padding: 5px; - gives all 4 sides the same padding

padding: 3px 4px 5px 6px; - shorthand version

MARGINS

margin-left:3px;
margin-right:4px;
margin-top:5px;
margin-bottom:6px;

margin: 5px; - gives all 4 sides the same margins

margin: 3px 4px 5px 6px; - shorthand version

Margins collapse!
You can use negative margins (ex: margin-left:-20px;)
You can only add left/right margins to inline elements- except for images.

BORDERS

border-style (border-top-style)
border-width (border-top-width)
border-color (border-top-color)
border:width, style, color;
border-top:width, style, color;

To added rounded corners:

border-radius:5px;
border-top-right-radius:5px;

You can add a photo for a border:

border-image:url(path to image), slice, border-image-repeat;
border-image:url(kittens.jpg) 55 55 55 55, stretch;

Demo

BOX SIZING & OVERFLOW

box-sizing: (content-box, border-box);
width: (percentage, numerical value, auto, inherit)
height: (percentage, numerical value, auto, inherit)

BOX SIZING

By default, overflow is set to visible which allows content to "break" outside the box when it has a specific height.

overflow: (visible, hidden, scroll, auto, inherit)

OVERFLOW

DISPLAY & BOX SHADOW

You can change how an element is displayed
display: (inline, block, none)

DISPLAY

box-shadow: (horizontal offset, vertical offset, blur distance, spread distance, color)
box-shadow: 6px 5px 5px 6px #4444;
will have to use vendor prefixes.

BOX SHADOW

Demo

FLOATING AND POSITIONING

THE FLOAT PROPERTY

float: (left, right, none, inherit)
Can be applied to any HTML element to position it on the page
Used to create multi-column layouts
img {float:left;} would position all elements to the left side of my page.

p{
    width: 400px;
    float: left
}

img{
    float: right;
}

The paragraph will appear on the left and the image will appear on the right.

THE FLOAT PROPERTY

Always provide a width for floated text elements
Floated inline elements behave as block level elements
Margins on floated elements do not collapse

INLINE ELEMENTS

Always provide a width
Elements do not float higher than their original spot

BLOCK ELEMENTS

THE CLEAR PROPERTY

Clears floated elements and returns it to it's natural state
clear:(left, right, both, none, inherit)

FLOATING MULTIPLE ELEMENTS

containing elements will not "enclose" floated elements by default.
floating the containing element is one fix
setting the overflow:auto is another way to fix this
using the after selector is also a way to fix this

DEMO

USING SHAPES

You can curve your float so it wraps around a shape
shape-outside (none, circle, ellipse, polygon, url, margin-box, padding-box, content-box)
DEMO

CSS Positioning

moves elements around in the layout
position: (static, relative, absolute, fixed)
You can position an element on the screen by using top, right, bottom or left

CSS Positioning

Static: the default position
Relative: positions an element relative to the parent element.

p{
   position: relative;
   top:20px;
   left: 50px;
}

Absolute: positions an element relative to the the browser screen. The default position is the top left.

p{
   position: absolute;
   top:20px;
   left: 50px;
}

CSS Positioning

Z-index: specifies the stack order of elements. If something goes in front of or behind an element
By default, the z-index for elements are 0
You can use positive or negative numbers
In order for z-index to work, you have to use absolute or relative positioning

.blue{
   position: relative;
   top:20px;
   left: 50px;
   z-index: 5;
}

.red{
   position: relative;
   top:20px;
   left: 50px;
   z-index: 3;
}

Blue will go in front of red since it's a higher number

CSS FLEXBOX AND GRID

FLEXBOX

Used to layout components such as navigation, photo galleries, listings, etc..
Not used for overall page layout (CSS Grid)

make all items the same height
horizontal and vertical centering
change the order in which items are displayed

Advantages

FLEXBOX

Flexbox needs a container with the display set to "flex" in order to work

<div id="container">
    <div class="box box1">One</div>
    <div class="box box2">Two</div>
    <div class="box box3">Three</div>
</div>

#container{

display: flex;

}

FLEXBOX Properties

flex-direction: (row, column, row-reverse, column reverse)
flex-wrap: (nowrap, wrap, wrap-reverse)
flex-flow: (flex-direction, flex-wrap)
justify-content: (flex-start, flex-end, center, space-between, space-around)
align-self: (flex-start, flex-end, baseline)
align-content: (flex-start, flex-end, center, space-around, space-between, stretch)

CSS Grid

New way to layout pages
Not supported by all browsers (but can use a backup!)

turn the element into a grid container by using the display properties
set up columns and rows (think excel!)
assign each grid item to an area on the grid

Process

CSS Grid

Grid line: dividing lines
Grid cell: the box inside the grid lines
Grid area: rectangular area made up of one or more adjacent cells
Grid track: The space in between 2 grid lines (grid column or grid row)

CSS Grid

<div id="layout">
    <div id="one">three</div>
    <div id="two">two</div>
    <div id="three">three</div>
</div>

#layout{

display: grid;

}

CSS Grid

#layout{

display: grid;

grid-template-rows: 100px 400px 100px;

grid-template-columns: 200px 500px 200px;

}

grid-template-rows, grid-template-columns: (none, optional sizes and or names)

#layout{

display: grid;

grid-template-rows: [header-start] 100px [content-start] 400px [footer-start] 100px;

grid-template-columns: 200px 500px 200px;

}

CSS Grid

you can also use fractional units - fr. Take up whatever space is left.

DEMO CSS GRID