Presentation is loading. Please wait.

Presentation is loading. Please wait.

7 Building Float- Based Layouts. How CSS Layout Works.

Similar presentations


Presentation on theme: "7 Building Float- Based Layouts. How CSS Layout Works."— Presentation transcript:

1 7 Building Float- Based Layouts

2 How CSS Layout Works

3 The Mighty Tag

4

5 Types of Web Page Layouts

6 Float-Based Layouts

7 Fixed Width

8 Liquid

9 Elastic

10 Float Layout Basics

11

12 Two-Column Design Left Right A butterfly is an insect of the order Lepidoptera. Like all Lepidoptera, butterflies are notable for their unusual life cycle with a larval caterpillar stage, an inactive pupal stage, and a spectacular metamorphosis into a familiar and colourful winged adult form. Most species are day- flying so they regularly attract attention.insectorder Lepidopteralife cyclelarval caterpillarpupal metamorphosis

13 Applying Floats to Your Layouts

14 Floating All Columns

15 1, Banner 2, Left Sidebar 3. Right Sidebar 4, Main Content 1. Banner 2. L3. R 4. Main

16

17 Floats Within Floats

18 Using Negative Margins to Position Elements

19 Overcoming Float Problems

20 Containing Floats

21

22

23 Creating Full-Height Columns

24

25

26

27 Preventing Float Drops

28

29 Here are a few other culprits

30 Handling IE Bugs

31


Download ppt "7 Building Float- Based Layouts. How CSS Layout Works."

Similar presentations


Ads by Google