5

I'm cloning the home page of a website and while I was tracing and copying their codes I saw that my vertical scroll bar has doubled (when I got to the container part). I am trying to search how to get rid of this and some people said that you have to fix the height of the body to 100% or simply put overflow-y:hidden, yes it worked but my other problem now is that, some of the contents below was missing. It will just appear if the other vertical scroll bar is there and I think it has something to do with this "clearfix" thing and I still don't understand how it work. Please help me get rid of this, I'm still an intern and I still don't have an idea about css3 or whatever this is and website cloning is one of my project. Thanks!

user3577730
  • 51
  • 1
  • 3
  • 1
    Any chance of a jsFiddle? I'm having trouble visualising your issue. – thexacre Apr 27 '14 at 07:13
  • 1
    grab a book or online doc about css3 and begin reading. There are many CSS feature that govern the layout of a page, and many techniques to achieve your desired results, all depending on other reqs your site may have. Start studying and begin with simple things before trying to copy paste an existing site. – PA. Apr 27 '14 at 07:14
  • Please provide a link to the website, html and css so that others can actually help you. – Luke Apr 27 '14 at 07:15

4 Answers4

3

The "Clearfix" hack is a collection of CSS rules applied to a parent element that forces that element to expand to encompass any child elements, including those that have been "floated".

Under normal circumstances, "floating" an element results in the parent containing element collapsing to encompass only non-floated content. The "Clearfix" hack prevents this.

See more info on clearfix: http://css-tricks.com/snippets/css/clear-fix/

...and floats: http://css-tricks.com/all-about-floats/

Luke
  • 4,825
  • 2
  • 30
  • 37
1

Clearfix is just used to set height of container, which would have a child element with position property set.

Position property makes the elements float on other elements in the document. So clearfix is used in these cases to that the parent's height and height is set accordingly.

Learn more about it here: http://css-tricks.com/snippets/css/clear-fix/

Afzaal Ahmad Zeeshan
  • 15,669
  • 12
  • 55
  • 103
  • @OP see? many terms here, with more or less precise meanings: container, parent-child, position, float, height... – PA. Apr 27 '14 at 07:15
  • 1
    "Position property makes the elements float on other elements." No... the float property makes elements float. – BoltClock Apr 27 '14 at 07:15
1

A clearfix is a way for an element to automatically clear after itself, so that you don't need to add additional markup. It's generally used in float layouts where elements are floated to be stacked horizontally.

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
zoom: 1
}
.clearfix {display: block}
delgkp
  • 36
  • 3
-1

Try adding this to the end of your DIV and/or page.

<div style="clear:both;"></div>
stomo21
  • 280
  • 2
  • 5