Bootstrap.Css: .Container:Before Display Table

What methods of ‘clearfix’ can I use?

Depending upon the design being produced, each of the below clearfix CSS solutions has its own benefits.

The clearfix does have useful applications but it has also been used as a hack. Before you use a clearfix perhaps these modern css solutions can be useful:

css flexbox
css grid

Modern Clearfix Solutions

Container with `overflow: auto;`

The simplest way to clear floated elements is using the style overflow: auto on the containing element. This solution works in every modern browsers.

<div style="overflow: auto;">
  <img
    style="float: right;"
    src="path/to/floated-element.png"
    width="500"
    height="500"
  > 
  <p>Your content here…</p>
</div>

One downside, using certain combinations of margin and padding on the external element can cause scrollbars to appear but this can be solved by placing the margin and padding on another parent containing element.

Using ‘overflow: hidden’ is also a clearfix solution, but will not have scrollbars, however using hidden will crop any content positioned outside of the containing element.

Note: The floated element is an img tag in this example, but could be any html element.

Clearfix Reloaded

Thierry Koblentz on CSSMojo wrote: The very latest clearfix reloaded. He noted that by dropping support for oldIE, the solution can be simplified to one css statement. Additionally, using display: block (instead of display: table) allows margins to collapse properly when elements with clearfix are siblings.

.container::after {
  content: "";
  display: block;
  clear: both;
}

This is the most modern version of the clearfix.

⋮

Older Clearfix Solutions

The below solutions are not necessary for modern browsers, but may be useful for targeting older browsers.

Note that these solutions rely upon browser bugs and therefore should be used only if none of the above solutions work for you.

They are listed roughly in chronological order.

"Beat That ClearFix", a clearfix for modern browsers

Thierry Koblentz' of CSS Mojo has pointed out that when targeting modern browsers, we can now drop the zoom and ::before property/values and simply use:

.container::after {
    content: "";
    display: table;
    clear: both;
}

This solution does not support for IE 6/7 …on purpose!

Thierry also offers: "A word of caution: if you start a new project from scratch, go for it, but don’t swap this technique with the one you have now, because even though you do not support oldIE, your existing rules prevent collapsing margins."

Micro Clearfix

The most recent and globally adopted clearfix solution, the Micro Clearfix by Nicolas Gallagher.

Known support: Firefox 3.5+, Safari 4+, Chrome, Opera 9+, IE 6+

.container::before, .container::after {
  content: "";
  display: table;
}
.container::after {
  clear: both;
}
.container {
  zoom: 1;
}

Overflow Property

This basic method is preferred for the usual case, when positioned content will not show outside the bounds of the container.

http://www.quirksmode.org/css/clearing.html
- explains how to resolve common issues related to this technique, namely, setting width: 100% on the container.

.container {
  overflow: hidden;
  display: inline-block;
  display: block;
}

Rather than using the display property to set "hasLayout" for IE, other properties can be used for triggering "hasLayout" for an element.

.container {
  overflow: hidden;
  zoom: 1;
  display: block;
}

Another way to clear floats using the overflow property is to use the underscore hack. IE will apply the values prefixed with the underscore, other browsers will not. The zoom property triggers hasLayout in IE:

.container {
  overflow: hidden;
  _overflow: visible; /* for IE */
  _zoom: 1; /* for IE */
}

While this works... it is not ideal to use hacks.

PIE: Easy Clearing Method

This older "Easy Clearing" method has the advantage of allowing positioned elements to hang outside the bounds of the container, at the expense of more tricky CSS.

This solution is quite old, but you can learn all about Easy Clearing on Position Is Everything: http://www.positioniseverything.net/easyclearing.html

Element using "clear" property

The quick and dirty solution (with some drawbacks) for when you’re quickly slapping something together:

<br style="clear: both" /> <!-- So dirty! -->

Drawbacks

It's not responsive and thus may not provide the desired effect if layout styles change based upon media queries. A solution in pure CSS is more ideal.
It adds html markup without necessarily adding any semantic value.
It requires a inline definition and solution for each instance rather than a class reference to a single solution of a “clearfix” in the css and class references to it in the html.
It makes code difficult to work with for others as they may have to write more hacks to work around it.
In the future when you need/want to use another clearfix solution, you won't have to go back and remove every <br style="clear: both" /> tag littered around the markup.

Bootstrap's NAV element inside display:table-cell element has a wrong alignment on Firefox

This gap is an empty text line which is caused by default bootstrap ":before" styles. You can hide it with something like that:

.container:before, .list:before {
  display: none;
}

How could we make bootstrap rows/columns look like a table?

Basic principle of Table -> row / column is that, in a particular row, columns should be of equal height whatever is the content.

You can make table -> row/columns structure using bootstrap grid but there will be a problem of equal heights column.

So, for this purpose i.e. for equal columns, you can use flexbox property. (it doesn't work in ie9 and less so be sure about its use.)

Check this fiddle here

Just add following simple CSS to a parent container (for complete demo checkout above fiddle),

.row-eq-height {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

Here is the reference

Bootstrap's NAV element inside display:table-cell element has a wrong alignment on Firefox

This gap is an empty text line which is caused by default bootstrap ":before" styles. You can hide it with something like that:

.container:before, .list:before {
  display: none;
}

Using div with display table-cell inside real tables td

Mixing in table elements with divs is eventually going to give you a headache, especially when it comes to responsive design. For this same issue, I use Bootstrap CSS. They have a grid system that is extremely effective in replacing table-style layouts and adapting to mobile devices. Your target HTML is actually really close to the markup that Bootstrap uses, so your head is obviously int he right place!

After downloading the Bootstrap js and css, I would do something like this:

<!-- the container-fluid class creates a full-width container -->
<div class="container-fluid"> 

    <!-- the row class creates a row broken into 12 columns. -->
    <div class="row">

        <!-- specify how many columns an element should take up out of 12 for each given device.  below is the markup for 3 evenly-spaced columns for a medium (desktop) device -->

        <div class="col-md-4">Column 1</div>

        <div class="col-md-4">Column 2</div>

        <div class="col-md-4">Column 3</div>

    </div>

    <div class="row">

        <div class="col-md-4">Column 1</div>

        <div class="col-md-4">Column 2</div>

        <div class="col-md-4">Column 3</div>

    </div>

</div>

Why won't bootstrap's `table-fixed` make my table into a scrolling one?

From your question, comment... you need:

a table of fixed height (not equal to the height of the page)
the table should be scrollable

for this, you need to place this table-fixed class on the div which has the table as the child; and for this class, the properties to be: height:300px; overflow:scroll;

working snippet below:

.table-fixed {

  height: 300px;

  overflow: scroll;

}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div class="container pt-3">

  <div class="row">

    <div class="col-5 col md-5">

    </div>

  </div>

  <div class="row">

    <div class="col-md-8">

    </div>

  </div>

  <div class="row">

    <div class="table-responsive-md table-fixed">

      <table class="table table-bordered table-hover table-striped table-condensed ">

        <thead>

          <tr>

            <th>Firstname</th>

            <th>Lastname</th>

            <th>Email</th>

          </tr>

        </thead>

        <tbody>

          <tr>

            <td>John</td>

            <td>Doe</td>

            <td>john@example.com</td>

          </tr>

          <tr>

            <td>Mary</td>

            <td>Moe</td>

            <td>mary@example.com</td>

          </tr>

          <tr>

            <td>July</td>

            <td>Dooley</td>

            <td>july@example.com</td>

          </tr>

          <tr>

            <td>John</td>

            <td>Doe</td>

            <td>john@example.com</td>

          </tr>

          <tr>

            <td>Mary</td>

            <td>Moe</td>

            <td>mary@example.com</td>

          </tr>

          <tr>

            <td>July</td>

            <td>Dooley</td>

            <td>july@example.com</td>

          </tr>

          <tr>

            <td>John</td>

            <td>Doe</td>

            <td>john@example.com</td>

          </tr>

          <tr>

            <td>Mary</td>

            <td>Moe</td>

            <td>mary@example.com</td>

          </tr>

          <tr>

            <td>July</td>

            <td>Dooley</td>

            <td>july@example.com</td>

          </tr>

          <tr>

            <td>John</td>

            <td>Doe</td>

            <td>john@example.com</td>

          </tr>

          <tr>

            <td>Mary</td>

            <td>Moe</td>

            <td>mary@example.com</td>

          </tr>

          <tr>

            <td>July</td>

            <td>Dooley</td>

            <td>july@example.com</td>

          </tr>

          <tr>

            <td>John</td>

            <td>Doe</td>

            <td>john@example.com</td>

          </tr>

          <tr>

            <td>Mary</td>

            <td>Moe</td>

            <td>mary@example.com</td>

          </tr>

          <tr>

            <td>July</td>

            <td>Dooley</td>

            <td>july@example.com</td>

          </tr>

          <tr>

            <td>John</td>

            <td>Doe</td>

            <td>john@example.com</td>

          </tr>

          <tr>

            <td>Mary</td>

            <td>Moe</td>

            <td>mary@example.com</td>

          </tr>

          <tr>

            <td>July</td>

            <td>Dooley</td>

            <td>july@example.com</td>

          </tr>

          <tr>

            <td>John</td>

            <td>Doe</td>

            <td>john@example.com</td>

          </tr>

          <tr>

            <td>Mary</td>

            <td>Moe</td>

            <td>mary@example.com</td>

          </tr>

          <tr>

            <td>July</td>

            <td>Dooley</td>

            <td>july@example.com</td>

          </tr>

          <tr>

            <td>John</td>

            <td>Doe</td>

            <td>john@example.com</td>

          </tr>

          <tr>

            <td>Mary</td>

            <td>Moe</td>

            <td>mary@example.com</td>

          </tr>

          <tr>

            <td>July</td>

            <td>Dooley</td>

            <td>july@example.com</td>

          </tr>

          <tr>

            <td>John</td>

            <td>Doe</td>

            <td>john@example.com</td>

          </tr>

          <tr>

            <td>Mary</td>

            <td>Moe</td>

            <td>mary@example.com</td>

          </tr>

          <tr>

            <td>July</td>

            <td>Dooley</td>

            <td>july@example.com</td>

          </tr>

          <tr>

            <td>John</td>

            <td>Doe</td>

            <td>john@example.com</td>

          </tr>

          <tr>

            <td>Mary</td>

            <td>Moe</td>

            <td>mary@example.com</td>

          </tr>

          <tr>

            <td>July</td>

            <td>Dooley</td>

            <td>july@example.com</td>

          </tr>

          <tr>

            <td>John</td>

            <td>Doe</td>

            <td>john@example.com</td>

          </tr>

          <tr>

            <td>Mary</td>

            <td>Moe</td>

            <td>mary@example.com</td>

          </tr>

          <tr>

            <td>July</td>

            <td>Dooley</td>

            <td>july@example.com</td>

          </tr>

          <tr>

            <td>John</td>

            <td>Doe</td>

            <td>john@example.com</td>

          </tr>

          <tr>

            <td>Mary</td>

            <td>Moe</td>

            <td>mary@example.com</td>

          </tr>

          <tr>

            <td>July</td>

            <td>Dooley</td>

            <td>july@example.com</td>

          </tr>

          <tr>

            <td>John</td>

            <td>Doe</td>

            <td>john@example.com</td>

          </tr>

          <tr>

            <td>Mary</td>

            <td>Moe</td>

            <td>mary@example.com</td>

          </tr>

          <tr>

            <td>July</td>

            <td>Dooley</td>

            <td>july@example.com</td>

          </tr>

          <tr>

            <td>John</td>

            <td>Doe</td>

            <td>john@example.com</td>

          </tr>

          <tr>

            <td>Mary</td>

            <td>Moe</td>

            <td>mary@example.com</td>

          </tr>

          <tr>

            <td>July</td>

            <td>Dooley</td>

            <td>july@example.com</td>

          </tr>

          <tr>

            <td>John</td>

            <td>Doe</td>

            <td>john@example.com</td>

          </tr>

          <tr>

            <td>Mary</td>

            <td>Moe</td>

            <td>mary@example.com</td>

          </tr>

          <tr>

            <td>July</td>

            <td>Dooley</td>

            <td>july@example.com</td>

          </tr>

          <tr>

            <td>John</td>

            <td>Doe</td>

            <td>john@example.com</td>

          </tr>

          <tr>

            <td>Mary</td>

            <td>Moe</td>

            <td>mary@example.com</td>

          </tr>

          <tr>

            <td>July</td>

            <td>Dooley</td>

            <td>july@example.com</td>

          </tr>

          <tr>

            <td>John</td>

            <td>Doe</td>

            <td>john@example.com</td>

          </tr>

          <tr>

            <td>Mary</td>

            <td>Moe</td>

            <td>mary@example.com</td>

          </tr>

          <tr>

            <td>July</td>

            <td>Dooley</td>

            <td>july@example.com</td>

          </tr>

          <tr>

            <td>John</td>

            <td>Doe</td>

            <td>john@example.com</td>

          </tr>

          <tr>

            <td>Mary</td>

            <td>Moe</td>

            <td>mary@example.com</td>

          </tr>

          <tr>

            <td>July</td>

            <td>Dooley</td>

            <td>july@example.com</td>

          </tr>

          <tr>

            <td>John</td>

            <td>Doe</td>

            <td>john@example.com</td>

          </tr>

          <tr>

            <td>Mary</td>

            <td>Moe</td>

            <td>mary@example.com</td>

          </tr>

          <tr>

            <td>July</td>

            <td>Dooley</td>

            <td>july@example.com</td>

          </tr>

          <tr>

            <td>John</td>

            <td>Doe</td>

            <td>john@example.com</td>

          </tr>

          <tr>

            <td>Mary</td>

            <td>Moe</td>

            <td>mary@example.com</td>

          </tr>

          <tr>

            <td>July</td>

            <td>Dooley</td>

            <td>july@example.com</td>

          </tr>

          <tr>

            <td>John</td>

            <td>Doe</td>

            <td>john@example.com</td>

          </tr>

          <tr>

            <td>Mary</td>

            <td>Moe</td>

            <td>mary@example.com</td>

          </tr>

          <tr>

            <td>July</td>

            <td>Dooley</td>

            <td>july@example.com</td>

          </tr>

          <tr>

            <td>John</td>

            <td>Doe</td>

            <td>john@example.com</td>

          </tr>

          <tr>

            <td>Mary</td>

            <td>Moe</td>

            <td>mary@example.com</td>

          </tr>

          <tr>

            <td>July</td>

            <td>Dooley</td>

            <td>july@example.com</td>

          </tr>

          <tr>

            <td>John</td>

            <td>Doe</td>

            <td>john@example.com</td>

          </tr>

          <tr>

            <td>Mary</td>

            <td>Moe</td>

            <td>mary@example.com</td>

          </tr>

          <tr>

            <td>July</td>

            <td>Dooley</td>

            <td>july@example.com</td>

          </tr>

          <tr>

            <td>John</td>

            <td>Doe</td>

            <td>john@example.com</td>

          </tr>

          <tr>

            <td>Mary</td>

            <td>Moe</td>

            <td>mary@example.com</td>

          </tr>

          <tr>

            <td>July</td>

            <td>Dooley</td>

            <td>july@example.com</td>

          </tr>

          <tr>

            <td>John</td>

            <td>Doe</td>

            <td>john@example.com</td>

          </tr>

          <tr>

            <td>Mary</td>

            <td>Moe</td>

            <td>mary@example.com</td>

          </tr>

          <tr>

            <td>July</td>

            <td>Dooley</td>

            <td>july@example.com</td>

          </tr>

          <tr>

            <td>John</td>

            <td>Doe</td>

            <td>john@example.com</td>

          </tr>

          <tr>

            <td>Mary</td>

            <td>Moe</td>

            <td>mary@example.com</td>

          </tr>

          <tr>

            <td>July</td>

            <td>Dooley</td>

            <td>july@example.com</td>

          </tr>

        </tbody>

      </table>

    </div>

  </div>

</div>

Understanding Bootstrap's clearfix class

.clearfix is defined in less/mixins.less. Right above its definition is a comment with a link to this article:

A new micro clearfix hack

The article explains how it all works.

UPDATE: Yes, link-only answers are bad. I knew this even at the time that I posted this answer, but I didn't feel like copying and pasting was OK due to copyright, plagiarism, and what have you. However, I now feel like it's OK since I have linked to the original article. I should also mention the author's name, though, for credit: Nicolas Gallagher. Here is the meat of the article (note that "Thierry’s method" is referring to Thierry Koblentz’s “clearfix reloaded”):

This “micro clearfix” generates pseudo-elements and sets their
display to table. This creates an anonymous table-cell and a
new block formatting context that means the :before pseudo-element
prevents top-margin collapse. The :after pseudo-element is used to
clear the floats. As a result, there is no need to hide any generated
content and the total amount of code needed is reduced.

Including the :before selector is not necessary to clear the
floats, but it prevents top-margins from collapsing in modern
browsers. This has two benefits:

It ensures visual consistency with other float containment techniques that create a new block formatting context, e.g.,
overflow:hidden

It ensures visual consistency with IE 6/7 when zoom:1 is applied.

N.B.: There are circumstances in which IE 6/7 will not contain the bottom margins of floats within a new block formatting context.
Further details can be found here: Better float containment in IE
using CSS expressions.

The use of content:" " (note the space in the content string) avoids
an Opera bug that creates space around clearfixed elements if the
contenteditable attribute is also present somewhere in the HTML.
Thanks to Sergio Cerrutti for spotting this fix. An alternative fix is
to use font:0/0 a.

Legacy Firefox

Firefox < 3.5 will benefit from using Thierry’s method with the
addition of visibility:hidden to hide the inserted character. This
is because legacy versions of Firefox need content:"." to avoid
extra space appearing between the body and its first child element,
in certain circumstances (e.g., jsfiddle.net/necolas/K538S/.)

Alternative float-containment methods that create a new block
formatting context, such as applying overflow:hidden or
display:inline-block to the container element, will also avoid this
behaviour in legacy versions of Firefox.

Bootstrap.Css: .Container:Before Display Table

What methods of ‘clearfix’ can I use?

Modern Clearfix Solutions

Container with `overflow: auto;`

Clearfix Reloaded

Older Clearfix Solutions

"Beat That ClearFix", a clearfix for modern browsers

Micro Clearfix

Overflow Property

PIE: Easy Clearing Method

Element using "clear" property

Drawbacks

Bootstrap's NAV element inside display:table-cell element has a wrong alignment on Firefox

How could we make bootstrap rows/columns look like a table?

Bootstrap's NAV element inside display:table-cell element has a wrong alignment on Firefox

Using div with display table-cell inside real tables td

Why won't bootstrap's `table-fixed` make my table into a scrolling one?

Understanding Bootstrap's clearfix class

Legacy Firefox

Related Topics

Leave a reply

What methods of ‘clearfix’ can I use?

Modern Clearfix Solutions

Container with overflow: auto;

Clearfix Reloaded

Older Clearfix Solutions

"Beat That ClearFix", a clearfix for modern browsers

Micro Clearfix

Overflow Property

PIE: Easy Clearing Method

Element using "clear" property

Drawbacks

Bootstrap's NAV element inside display:table-cell element has a wrong alignment on Firefox

How could we make bootstrap rows/columns look like a table?

Bootstrap's NAV element inside display:table-cell element has a wrong alignment on Firefox

Using div with display table-cell inside real tables td

Why won't bootstrap's `table-fixed` make my table into a scrolling one?

Understanding Bootstrap's clearfix class

Legacy Firefox

Related Topics

Leave a reply

Container with `overflow: auto;`