css important properties float overflow

css-important-properties-float-overflow

float: right, left, none;

Tell an object to sit at a certain location relative to the rest

#leftColumn {

    float: left;
    border: 1px solid red;
}


<div id="leftColumn">
    left left left left left left left left left left left left
    </div>




overflow: hidden,  visible, auto, scroll

hidden = Anything "outside" of our div's size (e.g. px or %) will disappear (scroll can be a fun way to insert lots of text in a tiny space)

NOTE that text will automatically wrap, so I guess it's really images or other DIV's?

To make everything always start at a certain distance...

margin-left: 20px;

Possible Values: number in pixels, percentage, auto Similar settings: margin-right, margin-top, margin-bottom

To individually control a single item's spacing:

padding-left: 20px; (pretty much the same as above)
padding-top, padding-right, padding-bottom

POSITIONING

position: static;

where the code is, other values are absolute and relative

absolute ignores all other elements, relative moves it's position relative to other pieces of code

top: 10%;

used in absolute or relative positioning), height down from the previous element

vertical alignments usually work BEST with px definitions, not %

text-align: left, right, center, justify;
vertical-align: baseline, sub, super, top, text-top, middle, bottom, text-bottom;