Archive
Web Development basics for ASP.NET Developers – Floating
One of the interesting and powerful ways you can affect normal flow using floats. A floated element is removed from the normal flow and shifted towards either right or left edge of the containing block as far as it can go. When the width is not enough the floated element box wraps below the first row of floated elements.
float:left
An example of float left. See how the text content flows around the right edge of the left floated element. See how the line boxes are shortened, more on that later. Float left thus shifts element from normal flow and moves it as much left as possible.
float:right
An example of float left. See how the text content flows around the left edge of the right floated element. See how the line boxes are shortened, more on that later. Float left thus shifts element from normal flow and moves it as much to the right as possible. Next we will see what happens when there are multiple floats.
Multiple floats
Multiple floats, See how the 4 the div is pushed down as the width is used by this text content and the other elements in the first row. The same applies to left floated content as well. Next we will see what if a float’s height exceeds the containing block’s height.
What happens when a float’s height exceeds the containing block’s hieght
In this example the float’s height exceeds the containing block’s height.
How block level elements after the float are affected by the float
In this example the float’s height exceeds the containing block’s height.
Let us say that this paragraph should have been below the left float as per our requirement. Notice how the first line box is still shrunk. More on line box later.
Clearing
In this example the float’s height exceeds the containing block’s height.
Now this paragraph is actually beginning below the left float as per our requirement. This is the power of clear. clear: left doesn’t allow any element to float to the left of the element box, right doesn’t allow any element to float to the right of the element box and both doesn’t allow elements to float on both left and right
Line box shortening
Notice how the background of this paragraph is bleeding into the floating element as well. But the text doesn’t bleed into the floating box. That’s because the anonymous boxes for each line of content inside of the block level box of this paragraph (called line boxes) are shortened
Use your favorite browser’s development tools to view the markup
Read the following articles for a better understanding of floats:
Web Development basics for ASP.NET Developers – Positioning
As I mentioned in the post about Normal Flow the rendering can be modified by using CSS positioning and floats. We will look into positioning in this post.
position: static implies Normal Flow, the flow is not modified.
All other positioning is relative to something else
position:relative is relative to the element box itself. For example Specifying position: relative and left: 5px, top: 5px renders the element moving it 5px down and 5px to the right of the actual element box. It is useful to shift rendering location of the element relative to its original element box by a few pixels to the left, right, top or bottom.
position:absolute is relative to the containing block. The containing block is the ancestral element which is positioned relative, absolute or fixed. If there is no such element then a hypothetical initial containing block (the viewport usually) is used. Viewport is the visible area of the browser window that can show html content (excludes addressbar, menubar, statusbar, toolbar etc.). When an element is positioned absolute it is removed from the document flow and positioned relative to the containing block as specified by the top, left, right, bottom attributes.
position:fixed is similar to position:absolute but the containing block is always the initial containing block. This is useful when you want to create a menu that is always at the top of the page and doesn’t scroll as the user scrolls content vertically in the viewport.
The stacking order is controlled by the z-index css attribute. Element boxes with higher z-index appear above element boxes with lower z-index.
I recommend you to read the following excellent articles on positioning:
Web Development basics for ASP.NET Developers – Normal Flow
Normal flow (or document flow as some people call it) is the manner in which a browser renders html elements in the absence of any float / position related css attributes applied to the elements.
Block elements are rendered one below the other / stacked vertically in the order in which they appear in the html document. They can contain other block level elements, inline elements, text.
Inline elements are rendered in the same line stacked horizontally next to each other (left to right in most of the languages) in the order in which they appear in the html document. They cannot contain block level elements. If the width is not sufficient to display all the inline elements / content then rendering starts in the next line.
The visual layout of each element is governed by a box generated as as per the css box model.
This is rendering in Normal Flow. But float and position which affect the normal flow are what make css powerful enough to do visual layouts.
Web Development basics for ASP.NET Developers – Block vs. Inline elements
| Block | Inline | |
| Width | Takes up whole width available | Takes up only much width as needed |
| line breaks | Generates line-breaks before and after | Does not force any line break (except <br /> which is a special case) |
| width, height – css attributes | applicable | ignored |
| max-width, max-height – css attributes | applicable | ignored |
| min-width, min-height – css attributes | applicable | ignored |
| examples | div, h1,h2…h6, p, ul, ol, dl, li, dt, dd, table, blockquote, pre, form | span, a, strong, em, img, br, input, abbr, acronym |
| Layout behavior in normal flow | stacked vertically one below the other (top to bottom) in order they appear in the document | stacked horizontally one after the other (left to right) till width permits and then continues in the next line |
| What can it contain? | other block level elements, inline elements, text data | other inline elements, text data – cannot contain block level elements |
Though HTML elements have their default display styles as block or inline, we can change the behavior using the display css attribute (block, inline and other exotic stuff). For example you can change the list item’s display to inline to have a horizontally stacked menu instead of a vertical one.
References:
http://www.webdesignfromscratch.com/html-css/css-block-and-inline/
http://webdesign.about.com/od/htmltags/qt/block_vs_inline_elements.htm
Web Development Basics for the ASP.NET Developer – What is Box Model?
All document elements (visible) generate an element box which describes the amount of space that element occupies in the layout of the document. As per the CSS specification the box consists of the element’s content area, padding, border and margin.
The margin is always transparent and reflects the containing block’s background properties, whereas the content and padding reflect the element’s background properties. The border assumes the foreground properties of the element unless explicitly specified.
The CSS box model
References:
Sendhil's Cyber Home 