twitter bootstrap clearfix push down
add this class to your CSS:
.row{
overflow:hidden;
}
DEMO
it is because of your aside
, you set fixed width to aside
and set margin to your main-content
, this is not right way to put element side by side. but if you use percentage width to your aside
and main-content
and use float
it will look good and there is no need for overflow:hidden
(or auto).
look at this:
DEMO
#sidebar{
float: left;
width: 20%; /* instead 260px */
position: relative;
background: #ddd;
display: block
}
#main-content{
background: #FFF;
position: relative;
min-height: 600px;
width: 80%; /* instead auto */
float:left; /* added */
}
div class=clearfix/div causes a gap between my columns
You should reverse the push/pull columns...
<div class="clearfix"></div>
<div class="col-md-6 col-md-push-6"><img src="http://via.placeholder.com/500x300" alt="Picture of room two" class="img-responsive" width="500px" height="300px"></div>
<div class="col-md-6 col-md-pull-6">
<div class="rooms-photo-text">
<h2><span style="color: #bb9b50;">Splendid<br>
</span></h2>
<p>Our Splendid rooms are more spacious than the Cosy and located in both the main house and the coach house building. Beautifully appointed with Cotswolds charm.</p>
<div class="wideSeparatorDark"></div>
</div>
</div>
<div class="clearfix"></div>
https://codepen.io/anon/pen/RQRKLd
How to clear floats properly in twitter bootstrap?
You need to utilize the proper bootstrap classes. If inside a container (a true Bootstrap container), you need a row to offset the padding.
<div class="container">
<div class="row">
<header id="main_header" class="col-md-12">
<nav class="navbar navbar-default" role="navigation">
</nav>
<div class="contact pull-left">
</div>
</header>
</div>
</div>
Bootstrap has pull-left
and pull-right
already to float content. clearfix
shouldn't be needed if you are utilizing a container/row.
Realistically you could also (or instead) use the grid utilities on the nav/contact.
clearfix does not work in the large view
There is a typo in your code:
visable-md
It should be
visible-md
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
totable
. 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 usefont:0/0 a
.Legacy Firefox
Firefox < 3.5 will benefit from using Thierry’s method with the
addition ofvisibility:hidden
to hide the inserted character. This
is because legacy versions of Firefox needcontent:"."
to avoid
extra space appearing between thebody
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 applyingoverflow:hidden
or
display:inline-block
to the container element, will also avoid this
behaviour in legacy versions of Firefox.
How do I apply bootstrap's clearfix to my code?
You can also use clearfix outside of bootstrap. As long as you define it in your CSS like this:
.clearfix::after {
content: " ";
display: table;
clear: both; }
And apply the "clearfix" class to any element it requires, like this:
<div class="clearfix"></div>
It should work.
What is the equivalent of this CSS in Twitter Bootstrap?
using css you can simple use the after psudeo
.class1:after, .class2:after //append as many as you like
{
clear:both;
*zoom:1;
height:0;
visibility: hidden;
display:block;
}
alternative(providing children are not using the position selector)
(parent-elemts){overflow:hidden;}//bit of a quick fix!
keep unwanted markup out of your html file
Edit: sorry! for some reason the add comment button or upvote button is not working for me tonight.
To append my answer to answer your other question:
twitter bootstrap you say uses a .clearfix class, which is similar to the css I provided below, however their method needs to be added to the element, ie: "element class="clearfix" OR similar, where as css pseduo's we dont need to add this extra bit of code to our document. Take note however, not all browsers support css pseduo's.
Related Topics
How to Pass Value from Ts File to SCSS File in Same Component in Angular 2+
CSS Background Gradient with Offset
Angular 6 - How to Apply External CSS Stylesheet (Leaflet) at Component Level
How to Stretch a Header Across a Web Page Background with CSS
Linear-Gradient Using CSS3 Pie in Ie9 Not Working, Ie8 Does
Does a CSS3 Animation Run When Parent Element Has Visibility: Hidden
CSS Grid: Grid-Row Not Working in Chrome Browser
Video Js - Poster Image Cover/Contain
Background Image in Styled Components React
CSS3 Background-Size: Cover Doesn't Make Image Cover Vertically
CSS Background Color Extend as Far as Text
Ie7 Cause of "Text - Empty Text Node"
CSS3 /CSS - Spinning Background Image
Is There Cross Browser Word-Wrap: Overflow-Wrap Solution
Conditional CSS Based Upon Div Not Screen