Types of layouts:
- fixed width: The page size is fixed, no matter what monitor size it is displayed in.
- The larger the monitor, the more space wasted.
- In small monitors, users will have to scroll to see all the content
- Easy to layout and deal with
- The majority of websites are fixed width
- 960 px is a common fixed width setting (accomodates screens of 1024 x 768)
- In order to accomplish this, usually a wrapper is used <body><div id=”wrapper”>… but you could also style the body tag to accomplish this
- liquid width: the page automatically modify size according to monitor size
- on really long monitors, the text will be ridiculosly long
- elastic width: the size of the page elements is based on em’s, so this depends on browser’s text size settings, losing favor due to modern browser’s zoom capabilities
- max-width: is a compromise between fixed width and liquid width design
- min-width: expland elements up to a certain point, and then it stops expanding. It doesn’t work with IE 6.
Layout strategies:
- Start with a mockup:
- Write down all your main divs, boxes, sections with a pencil or a graphics program
- Give approximate pixel size and id to your divs (banner, footer, etc)
- Use background images for your divs to cover design images
- Keep in mind though: background images are not SEO friendly, and not printable,
- To position images that are not background, you can use padding and margins
Float-based layouts
- Usually when you want to align elements in one row, you float them
- Two columns design: float one div either to the left or the right, and assign a width to it
- The other div will sit along the other side, creating the other column.
- You don’t have to set the widht of the div that is not floated
- Don’t forget that the element you are floating is before the element that is not (in the HTML), otherwise the other element won’t wrap
- Three plul columns design
- Float each column to the right, left, or a combination of both
- Careful with the total width of the wrapper of the columns, if it is less than the three or more columns combined, the last column will drop off the wrapper.
- You can use negative margins to move columns around if you need to
- #footer {clear:both} This is a way to keep your footer, or any other elements you don’t want to be floated from going up along with the floated ones.
Problems with CSS layouts:
- Float element is taller than its container.
- The effect: the floated element gets out of the container, in weird positions.
- Solution:
- Put an element at the bottom (before the </div>), and make it clear:both. For example: <br class=”clear”> and then the styling will be br.clear {clear:both}
- Float the containing div itself: it will force it to accomodate all floats inside of it automatically. If you use this solution, make sure the next element to this newly floated element has style clear:both, so you can avoid problems with the other elements of the page
- Or you can use overflow:hidden; zoom:1; it works amazingly, don’t ask me why
- You have a multi-column design, and the left or the right column is shorted than the center column. You want all backgrounds to be the same size.
- Solution:
- Create a wrapper around all the columns.
- Put the background color as an image repeating y
- Solution:
- Several columns are floated, but one or more go below where they are suppose to be
- The causes:
- The combination of the width of all columns is bigger than the width of the container
- In IE 6, floating divs add 3 pixels per width, that exacerbates the problem described above
- Also in IE 6, double margins are applied to divs, and italics will make divs bigger as well.
- Other possibility: you are setting your columns in percentages
- Solutions:
- Never design containers to be too tight or close to their floating divs, give them enough breathing space
- The causes:
Absolute position
- Absolute positioned elements are completely off the normal page flow: other elements are not even aware these exist, and could get lost underneath them
- Absolute position is with respect to the main window (browser), or if the item is nested in a positioned element, with respect to the last ancestor.
Relative position
- You relocate an element relative to where it was supposed to appear given the normal flow of the page
- Once the element move from that place, a “hole” is left in its place in the normal flow of the page (as oppose to absolute positioned elements).
Fixed position
- As you scroll down the page, the element stays put in the same place
- Sort of the same concept of fixed backgrounds
Static position
- It is the default of all elements, the element appear in the page where it is suppose to appear
Tips for positioning CSS boxes:
- Don’t try to position everything in the page, use CSS positioning properties sparingly and only when needed
- Instead of absolute positioning elements based on the main window, always try to relative position containers, and then use those to absolute position the elements inside of it.