CSS

CSS
Image shows:	QualityBox
Summary
Description:	Add custom CSS to pages or sitewide
More
Notes:	Add CSS rules into your pages.
Test:	See schedule colors on the Rates page.
Example:	CSS#Example:_mobile_layout_with_2_columns

Cascading Style Sheets is one of the primary technologies used in the web. CSS provides the style/appearance aspect of your HTML.

WestCiv provides some really useful tools and examples of CSS in action. For example, you can make an 'equals' background effect.

https://caniuse.com is the site to go to for browser support (and global usage)

Example: mobile layout with 2 columns

A change to use percentages and 'em's instead of hard pixel widths or font size would achieve a more fluid layout. Basically, always use em for font size. Only use px when you know the exact dimensions of something (like setting a negative margin for a graphic)

To really get what you want (a responsive layout that is designed to work well in print and a variety of devices), you should use the 'media' selector, in combination with 'media queries'

CSS like the following would be good:

@media (min-width: 55em)
{
	.main
	{
		float: left;
		width: 65%;
		margin-right: 5%;
		margin-bottom: 1em;
	}

	.aside
	{
		float: left;
		width: 30%;
		margin-bottom: 1em;
	}
}

Note how both columns are floated "left" which means that when your math or the browser isn't broken and the percentages <=100% they are side by side. This side-by-side layout is only applied to devices that have a screen width of 880 pixels

Example at http://maxdesign.com.au/jobs/css-layouts/12-example-layout-two-full/ and source at https://github.com/russmaxdesign/example-layout-two-full