CSS layouts, using CSS to layout elements on pages

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:

  1. 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
  2. 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
  3. 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

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.

Leave a Reply

Your email address will not be published. Required fields are marked *