CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
user847495
user847495

Reputation: 10161

What is the equivalent of this CSS in Twitter Bootstrap?

<div style="float:left;">
    column 1
</div>
<div style="float:left;">
    column 2
</div>
<div style="clear:both;"></div>

I'm used to writing clear:both. But I heard in Twitter Bootstrap there is something called "clearfix"? On which element should/would I apply "clearfix"?

Upvotes: 4

Views: 26621

Answers (2)

Philip
Philip

Reputation: 4592

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.

Upvotes: 5

artlung
artlung

Reputation: 34013

You probably only have to do:

<div class="container">
   <div class="row">
      <div class="span6">column 1</div>
      <div class="span6">column 2</div>
   </div>
</div>

clearfix should not be necessary.

Upvotes: 10

Related Questions