Peach Tea & CSS
Understanding Flow so I can Understand Float
What is flow?
Its what Browsers use
According to Elizabeth and Eric Freeman “flow is what gives css its power”.
Flow is what the browser uses to layout a web page (to flow elements onto a web page). The browser starts at the top and lays the html page out displaying each element as it encounters it.
Block elements flow from top to bottom and the browser places a linebreak between each element. By default each element takes up the width of the entire browser window (viewport).
Inline elements are flowed inside block elements from top left to bottom right.
The browser layout these elements differently when it comes to margins.
When the browser encounters two block elements (one on top of the other) it collapses their margins and creates a shared margin using the largest margin as its determined height. An example of this is, if the bottom of the first block element has a margin of 10 and the top of the second element has a margin of 20 the browser will collapse the top margin and make the total margin 20 pixels ( the largest set margin).
When two inline elements are placed next to each other the browser allows enough space for each elements margins. If two elements are side by side and each has a 12 pixel margin there will be 24 pixels of space (margins) between the elements. With inline elements the browser also creates another line when one is needed, expanding the the containing block element vertically to fit inline content if its needed.
How to float an element
- First—give it an identity (id)
- Second—give it a width
- Third—add the float property {float: left } or {float: right} This removes the element from the flow and positions it where you’ve specified left or right.
Things to Remember
- Position the html directly below the element you want it to flow below. If you want it to flow top left, then the html needs to go directly below the document header (this is not ideal for accessibility like screen readers).
- Floated elements must have a specific width set.
- Floated elements are taken out of the normal flow and placed either left or right.
- Floated elements sit onto of the block elements and do not affect their flow.
- Inline content respects the boundaries of floated elements and flows around them.
- Block elements still take the entire width of the content area, so they flow underneath your floated elements and often require extra css to make the presentation as clean and attractive as it can be.
Applying the clear property ie… clear: { right; } is extremely useful for layout cleanup because it’s used to specify that no floated elements can be on the left or the right of the block element that specified clear—clear tells the browser that floating content should not be flowed around the element.
Liquid and Frozen = Jello
Liquid layouts content expands to fill the page when the browser window is expanded which can make layouts look messy.
Frozen layout is one in which the width of the content is fixed and it does not expand or shrink with the browser window. Its advantage is that it can provide more control over your design, but doesn’t use the browsers width efficiently.
Frozen layouts lock the elements down so they can’t expand and contract (move) with the browser window. You can lock down the entire page with a <div> titled “all content” and set a width for something like 800pixels. Now you have frozen the <div=allcontent”> and all its contents to the page, freezing the entire layout in place. Frozen layouts can solve some design problems and they’re pretty common on the web, but they also often look bad when you widen the browser.
Jello is a design between frozen and liquid.
Jello layouts the content width is fixed, but the margins expand and contract with the browser window. Jello layouts usually place the content in the center of the page by setting the margins to auto: left; auto: right; They have the same advantages of a frozen layout but often appear more attractive.
Setting Elements Positions
- Four values can be set
- Static—which is the default and places elements in the flow of the document.
- Absolute—lets you place elements anywhere on the page and is usually relative to the sides of the page. If its nested inside another positioned element is position becomes relative to the container element. They can be layered using the z-index value to indicate its hierarchy on the screen (hierarchy=which is closest to the viewer).
- Fixed—elements are relative to the browsers indoor and do not move when the page is scrolled. Other content in the page scrolls underneath the fixed element.
- Relative—elements are flowed onto the page normally but then offset by a specified amount of space leaving empty space where they would normal sit/flow.