Where communities thrive

  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
  • Aug 17 09:32
    User @bjorno43 unbanned @linkin-park
  • Jun 20 21:19
    @bjorno43 banned @shenerd140
  • Apr 25 17:13
    @mstellaluna banned @cmal
  • Jan 08 22:05
    @mstellaluna banned @dertiuss323
  • Nov 07 2018 04:42
    User @texas2010 unbanned @ows-ali
  • Nov 02 2018 16:25
    @texas2010 banned @ows-ali
  • Oct 12 2018 05:50
    @bjorno43 banned @NACH74
  • Oct 05 2018 23:02
    @mstellaluna banned @JomoPipi
  • Sep 16 2018 12:21
    @bjorno43 banned @yash-kedia
  • Sep 16 2018 12:16
    @bjorno43 banned @vnikifirov
  • Sep 05 2018 08:12
    User @bjorno43 unbanned @androuino
  • Sep 05 2018 07:38
    @bjorno43 banned @androuino
  • Aug 23 2018 16:57
    User @bjorno43 unbanned @rahuldkjain
  • Aug 23 2018 16:23
    @bjorno43 banned @rahuldkjain
  • Jul 29 2018 14:13
    User @bjorno43 unbanned @jkyereh
  • Jul 29 2018 01:00
    @bjorno43 banned @jkyereh
  • Jul 10 2018 22:09
    @bjorno43 banned @manafn
  • Jul 06 2018 15:20
    @texas2010 banned @imlegend19
  • Jul 03 2018 12:28
    @bjorno43 banned @vbvmatta
  • Jun 29 2018 13:54
    @bjorno43 banned @OGTechnoBoy
whats the problem
var b = /[A-Z]/;
Is this the correct RegExp for all captial alphabets?
@hensn5250 thnx
:cookie: 282 | @hensn5250 |http://www.freecodecamp.org/hensn5250
quantomistro3178 sends brownie points to @hensn5250 :sparkles: :thumbsup: :sparkles:

can someone help me with one line of css in this example

<!DOCTYPE html>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
body {margin:0;}

.icon-bar {
width: 100%;
background-color: #555;
overflow: auto;

.icon-bar a {
float: left;
width: 20%;
text-align: center;
padding: 12px 0;
transition: all 0.3s ease;
color: white;
font-size: 36px;

.icon-bar a:hover {
background-color: #000;

.active {
background-color: #4CAF50 !important;

<div class="icon-bar">
<a class="active" href="#"><i class="fa fa-home"></i></a>
<a href="#"><i class="fa fa-search"></i></a>
<a href="#"><i class="fa fa-envelope"></i></a>
<a href="#"><i class="fa fa-globe"></i></a>
<a href="#"><i class="fa fa-trash"></i></a>


i do not understand how overflow in this example works? if i remove that line it wont work, when i add that line it is all ok?


final product is horizontal menu and I understand everything except

overflow: auto;

why without that line wont work?

@imemoje Because the height of the <div> containing all of the icons is 0, so even though the icons are still there due to lack of background color and no overflow, they don't appear. overflow: auto in this case is making their heights equal and giving the icons appropriate background color from the div and they become visible again.
@ezioda004 I do not understand how overflow make their heights equal and appropriate color? i have problems with concept of overflow. I taught that overflow is for something else?

Hi guys having issues with media queries not working i want to give a <p> a margin of 3% on larger screen sizes .... tried everything been stuck for 4/5 days :( @media all and (min-width: 800px) {

.paragraph3 {
margin-top: 8%;



Dan Lafferty
@0nly169 That CSS gives a top margin of 8% on screens wider than 800px. Perhaps you have a typo in your HTML? Share your full project.
Ken Haduch
@0nly169 - did you fix your problem? That does work to add a margin-top on paragraphs with the class <p class="paragraph3">some content</p> when the screen width is greater than 800px. The value that you have in there is 8% but you can adjust that. Just make sure that you put the class that you've created on the paragraphs. If you just want it to apply to all paragraphs, then instead of using a CSS selector of .paragraph3, just use p.
@khaduch can you help me
Ken Haduch
@imemoje - what are you trying to do? Is it the question of the overflow? Or something else?
example above
i do not understand how overflow works in this example and why it show elements when is set to auto? i tought that overflow is for something else.
Ken Haduch
@imemoje The coloring of the first icon is accomplished by the .active CSS selector and the fact that the CSS class is assigned to the "home" element. So that is how the background-color is set.
and if i remove that line it does not work and width that line it shows all like it should
Ken Haduch

@imemoje - the article that @toianw posted has this paragraph in it:

The Overflow Method relies on setting the overflow CSS property on a parent element. If this property is set to auto or hidden on the parent element, the parent will expand to contain the floats, effectively clearing it for succeeding elements. This method can be beautifully semantic as it may not require an additional elements. However if you find yourself adding a new div just to apply this, it is equally as non-semantic as the empty div method and less adaptable. Also bear in mind that the overflow property isn't specifically for clearing floats. Be careful not to hide content or trigger unwanted scrollbars.

With that property on the <div> parent element, as the paragraph says it will expand to contain all the floats. If it isn't there, then they are all collapsed to the left, so they are there but just hidden behind the first one.
@toianw - thanks for posting that link, by the way
khaduch sends brownie points to @toianw :sparkles: :thumbsup: :sparkles:
:cookie: 501 | @toianw |http://www.freecodecamp.org/toianw
it will expand to contain all the floats?
what will expend ?
Ken Haduch
@imemoje - as you see, if you remove that property, then all of the floats / icons are collapsed to the left. The parent div is what expands. The <div class="icon-bar"> in your code.
The overflow:auto; is a property of the class .icon-bar
uhhh it is maybe it is to complicated to me
let try this way
i am at the point where all a links are vertically
and now i want to make them horizontally
i do the float left to make them in one line, to glow right of first icon
i get that
and now i do not see them all, just the first element first icon
they do not have height ok i get that also
but first why all of them are not visible just first icon is
that is first thing that i do not understand
why they all are collapsed on one icon?
isnt they supposed to be one next to other one?why all collapse in one?
5 icon in 1 why?
Ken Haduch
@imemoje - all I can say is that "floats" do strange things on a page. I try to avoid them as much as possible! In a case like this, I would use the formulaic approach that they outline on the page, all of the information about "clearing" floats seems like magic to me. I would take what works and use it. It would be good to understand it all in gory detail. You can read this article to learn more about floats...
what approach would you use? what is formulaic approach?