Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Liquid or Elastic Layout

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #37291
    hugoriffic
    Member

    I’m taking an intro to CSS course at my local tech college. For my website I need to make one 2 column fixed layout and one 3 column fixed layout into either a liquid or elastic layout. I looked liquid and elastic up on Google and none of the tutorials make much sense. I couldn’t see a difference in the CSS. Could someone please explain how I might go about doing so in layman’s terms?

    I’ve had a look at http://www.alistapart.com/articles/elastic/, csszengarden, and http://matthewjamestaylor.com/blog/holy-grail-liquid-layout-no-quirks-mode. None of them fully explain how to use the percentages within your HTML and CSS.

    Here is my website: http://itweb.fvtc.edu/120466821/CSS/home.html

    I’m thinking of making all the “Healthy” web pages two column layouts and the “Tables” a three column layout. any help would be greatly appreciated.

    #99742
    michelm
    Member

    it looks from your website that you are getting there. Although, I don’t see a 2 column layout. Do a search for on chris’ site or on google for box model layout.
    2 things:
    1: for your exercise, ensure to set width to your div tags (your fix value in px, em or elastic value in %), for instance put in the css:
    #header {
    background-color: #419A40;
    padding-top: 5px;
    text-align: center;
    width: 500px; /* whatever fix value you would like to set to your div or whatever % value, it could be 500% instead of 500px */
    }
    Also, don’t forget to clear the float for the div at the end for your wrapper like:

    in the css:
    .class {clear:both;}

    Did you see that in one of Chris’ screen cast, he mentioned about http://www.dabblet.com that will help you!
    have fun!
    Michel

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.