How to create a Liquid three column CSS layout
- 1. How to create a Liquid three column CSS layout Dan Adamo, Anna Kalimouline, Oliver C.C. Zhang,George Lewis, Daryl Lee
- 2. Step 1: A picture of the layout
- 3. Step 2: Process of creating a website
- 4. The rel attribute specifies the relationship between the current document and the linked document. The value "text/css" indicates that the content is standard CSS. The href attribute specifies the destination of a link == You can type in the empty space circle in black. We need those ids in CSS. Step 3: The HTML structure
- 5. The layout width is 90% of the window width. The margin clears an area outside the border of an element. When the value is auto, it means the browser sets and margin. You can add background color. The padding clears an area inside the border of an element. A floated element will move as far to the left or right as it can. Usually this means all the way to the left or right of the containing element. Step 4: The CSS structure
- 6. Here the center column(blue box) is on the left side of the red box. The right column (green box)now is on the right side of the red box. The clear property specifies which sides of an element where other floating elements are not allowed. The value, “both”, means no floating elements allowed on either the left or the right side. Step 5: The CSS structure cont’d
- 7. The layout should remain the same proportion when you resize your browser window. Full Screen Narrow Screen Step 6: Test your layout