Flow control in CSS: creating a formatting context

Not only clear or overflow properties can control flow. You may find it useful to use display:inline-block or display:table-cell , which can completely replace the above-mentioned overflow , saving you from the danger of specifying the size of the element , as well as providing additional features.

The article does not contain universal solutions, but opens up additional tools for flow control.

Here is a complete translation of the paragraph about the contextual formatting of block elements ( from the css specification ):

Floating, absolutely positioned, displayed as table cells ( table-cell ) or table headers ( table-caption ), inline-block inline-block and elements with overflow that are not visible (except when the value is inherited by view) sets a new context for formatting

With floating and absolutely positioned elements, I think everything is clear; with ' overflow ' too. Immediately add that the experiments with the headings of the tables did not lead to anything.

In order not to duplicate, I will announce that the new code is used everywhere with the following style code originally written:

 #sidebar{ width:30px; height:200px; background-color:#ddd; float:left; } #content{ background-color:#dcd; } #content .col{ float:left; height:50px; width:30px; text-align:center; background-color:#cdd; } #content2{ background-color:#ddc; } 

and markup:

 <div id="sidebar"> side </div> <div id="content"> <div class="col"> col1 </div> <div class="col"> col2 </div> <div class="col"> col3 </div> </div> ff <div id="content2"> more content </div> 

')
This code is drawn like this in browsers:

1. display:inline-block

So let's see what display:inline-block is capable of display:inline-block

We will correct firefox and ie (if there is a hasLayout display:inline works like display:inline-block )

Understand the extra horizontal space vertical-align:bottom add *vertical-align:0% for IE and omit the text in Opera ( vertical-align:text-bottom ).

Vertical space is an IE bug that appears when you combine hasLayout for one element and float for another. It will happen even if you use overflow:hidden , has nothing to do with display:inline-block , and if you are critical ... - I put the search for a solution on your shoulders, and for now I will use *margin-left:-3px


Unfortunately, not everything is as good as it seems: the problem is in the second ff, which can completely unpredictably display content inside containers with -moz-inline-box , -moz-inline-stack and -moz-inline-block . Although in this case all the columns with the float property are displayed normally.

2. display:table-cell

Now let's proceed to display:table-cell

Everything is great, safari is stupid - we’ll just write a table , and ie it doesn’t support a table-cell - then we’ll do it to display at least like in all browsers
What do we have -
a) the width of the element is determined by the content
b) the element does not allow other elements to its horizontal level
Almost the same as display:inline-block , just add the line break. We do all this for IE and immediately fix the known flaws.


I would use this method. Moreover, if after the container there is not a text or a string element, but a block element - you do not need to wrap a line in IE, and it is worth noting that if the width of the container is known, then
1) do not need to use display-inline in IE, because you define the width, not the content of the container
2) no need to do a line break for IE, because we do not simulate display-inline
3) you do not need a separate property to include hasLayout, because width will enable it

3. Float

As I wrote float also creates a new formatting context. Not sure what is useful, but we must know. So how does this manifest itself? float:left set for .col pulls them out of the stream and their container seems to contain nothing and in fact #content is not displayed unless it is set to the width and height. To make sure, let's remove the background from the .col (as well as all subsequent tinsel):
delete background-color from .col

And now let's see what will overflow:hidden lead to (in ie, we include hasLayout )

table (ie omitted for obvious reasons)

and finally float:left (you can and right ).


Since the browser creates a separate formatting context for these examples as well as for absolute positioning, it can be assumed that for better performance, the elements that the Java script manipulates would be better placed not only in absolutely positionable containers, but also in any of the above.

Using these techniques, you can solve problems that are inherent in the clear and overflow properties, as well as increase the performance of browsers that process your pages.

The same article on my site Flow control in CSS: create a formatting context