StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<h2>Percentage layout</h2> <p>This is generally referred to as fluid layout. Your elements will take a defined percentage of the total space available to them. This available space is determined by the element's parent.</p> <p>When using percentage layouts, it's a good idea to specify a <a href="http://www.w3schools.com/CSS/pr_dim_min-width.asp" rel="noreferrer">min-width</a> and <a href="http://www.w3schools.com/CSS/pr_dim_max-width.asp" rel="noreferrer">max-width</a> on your design so that it remains usable at very low and high resolutions.</p> <p><strong>Pros</strong></p> <ol> <li>Scales with screen size, therefore get to use more space if it's available.</li> </ol> <p><strong>Cons</strong></p> <ol> <li>Makes it more difficult to know the exact position of something on screen. As a result, it can make creating precise layouts more difficult.</li> <li>Can lead to unexpected layouts if child elements are fixed width (i.e. an image) and end up being larger than their fluid width parent.</li> </ol> <h2>Pixel layout</h2> <p>This is usually known as fixed layout. Your element will always be the same defined pixel size and will not take available parent space into account.</p> <p><strong>Pros</strong></p> <ol> <li>Always know an element's exact size.</li> <li>Creating precise layout is easier.</li> </ol> <p><strong>Cons</strong></p> <ol> <li>You don't scale with resolutions. Your layout will always be the same width, making for wasted space when people have high resolutions. </li> </ol>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload