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.
Floating, absolutely positioned, displayed as table cells (table-cell
) or table headers (table-caption
), inline-blockinline-block
and elements withoverflow
that are notvisible
(except when the value is inherited by view) sets a new context for formatting
overflow
' too. Immediately add that the experiments with the headings of the tables did not lead to anything.
#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; }
<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>
display:inline-block
display:inline-block
is capable of display:inline-block
display:inline
works like display:inline-block
)
vertical-align:bottom
add *vertical-align:0%
for IE and omit the text in Opera ( vertical-align:text-bottom
).
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
-moz-inline-box
, -moz-inline-stack
and -moz-inline-block
. Although in this case all the columns with the float
property are displayed normally.
display:table-cell
display:table-cell
table
, and ie it doesn’t support a table-cell
- then we’ll do it to display at least like in all browsers
display:inline-block
, just add the line break. We do all this for IE and immediately fix the known flaws.
display-inline
in IE, because you define the width, not the content of the container
display-inline
Float
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):
background-color
from .col
overflow:hidden
lead to (in ie, we include hasLayout
)
table
(ie omitted for obvious reasons)
float:left
(you can and right
).
clear
and overflow
properties, as well as increase the performance of browsers that process your pages.
Source: https://habr.com/ru/post/48429/