Display Types for elements

• display: inline - removes the cariage return from the begining and end of a div
• display: inline-block - maintains its block properties while staying inline
• when using 'block mode' they need their width and height for aligning
• If you absoultely must use a <div> as an inline element, you can set the following in your stylesheet, off course that essentially makes the <div> a <span>.
  
  div {display: inline;}

<IMG>

http://www.w3schools.com/TAGS/att_img_align.asp

The <img> element is an inline element (it does not insert a new line on a page), meaning that text and other elements can wrap around it. Therefore, it can be useful to specify the alignment of the image according to surrounding elements.

<SPAN>

• <span> is inline, no new line, no fixed size, cannot give it fixed size parameters except width?
• <span> the inline version of <div>.
• it is manily used for assigning styles to groups or elements because it has no size.

<P>

<p> is block element, new line, no wrapping, cannot go inside a paragraph, can go inside a <div>, its default size is 100% wide

<DIV>

• <div> is block element, new line, no wrapping (oppposite of span), cannot go inside a paragraph, can go inside a <div>, its default size is 100% wide
• divs are block elements and unless otherwise stated will be 100% with a CR at the begining and one at the end

To center a div in its parent

the key to getting it to work is it must have a defined width (otherwise techincally the width is defined as 100%)

<div style="width: 75%; margin: 0 auto;">center</div>

Center an Image

this will center the image because the <p> is 100% wide

<p style="text-align: center;">
	<img style="margin: 10px;" src="/images/pages/home/me-and-holly-on-chisel-beach.jpg" alt="me-and-holly-on-chisel-beach" />
</p>

text-align:center;  is still valid - http://www.w3schools.com/cssref/pr_text_text-align.asp  - this is set in the parent element and affects the child element.

How to center an item - the modern way

{display: block; margin-left: auto; margin-right: auto}
{display: block; margin: 0 auto} /* this is prefered option */

• The centering will not work unless the element has a defined width. margin: 0 auto; needs a fixed width to work, or %
• This allows the browser to dynamically work out where the element should be and then sets the margin to cause that element to center. It works exactly like text-align: center; except, i think works on more stuff. Also this is applied on the element it is added to, not the child.
• This statement can also vertically center items, but remember it needs to have a specified height to work.

Floating

Floating is a new way of aliging stuff on a page. Floating works like the tetris game except that the blocks float upwards and you can only say wheather the blocks float to the left or the right. A floated block will float up as far as it can (ie if their is room) and then push as far as it can to the side you chose.

NB:

• when you float an element, it becomes a block
• Once a float is set it needs to be cleared.

Types of Clearing

• Clearing is when you have had enough of it you put a line under it and this create a new ceiling where any new float will hit as though it was the top of the browser.
• There are 3 types of clearing left/right/both. Imagine this ceiling can be sepearated in to 2 halfs. This option allows you to create a new ceiling on either side of the browser or the more common clear:both which does boths sides.
• There is only 1 type of clearing with 3 options left/right/both but you can do it in several ways, these are the common ways of clearing

<br style="clear: both;" />				<!-- to be put inside block elements such as <p> & <div> -->
<br style="clear: both;">&nbsp;			        <!-- to be put inside block elements such as <p> & <div> -->
			
<div style="clear: both;">&nbsp;</div>	                <!-- &nbsp; prevents the element being eaten by wysiwyg -->
<p style="clear: both;">&nbsp;</p>		        <!-- &nbsp; prevents the element being eaten by wysiwyg -->

Notes about <br>, wysiwyg and clearing

• putting <br style="clear: both;" /> at the end of the paragrapgh causes jce to remove it because it is an empty element.
  so use <br style="clear: both;">&nbsp;  the escaped space at the end prevents wysiwyg editors stripping the last tag because it is not empty
• only block elements can clear floats
• parent with only child floats will cause it to collapse/hide - fix = overflow: auto