2

I am learning HTML5 and CSS 3 (newbie). When I went through an example in a book, I faced a rendering problem.

What I am trying to do: Create a Faux Column.

Working sample:

<!doctype html>
<html>
    <head>
        <title>Faux Columns</title>
        <style>
            .container{
                background: black;
                color: #fff;
            }
            .container::after{
                content: ' ';
                clear: both;
                display: block;
            }
            .col{
                float: left;
                width: 50%;
            }
        </style>
    </head>

    <body>
        <div class="container">
            <aside class="col">
                Aside
            </aside>
            <div class="col main">
                Main Content Area
            </div>
        </div>
    </body>
</html>

Run the script, and you can see the two columns.

Now run this script,

<!doctype html>
<html>
    <head>
        <title>Faux Columns</title>
        <style>
            .container{
                background: black;
                color: #fff;
            }
            .col{
                float: left;
                width: 50%;
            }
        </style>
    </head>

    <body>
        <div class="container">
            <aside class="col">
                Aside
            </aside>
            <div class="col main">
                Main Content Area
            </div>
        </div>
    </body>
</html>

Why is the above not rendered?

  1. What am I doing wrong?
  2. Also, in the working sample what is ::after?
  3. In the working sample CSS content: ' '; why this is set?
  4. What does that working sample CSS actually do?

As per some comments, I just changed the color in my parent container.

<!doctype html>
<html>
    <head>
        <title>Faux Columns</title>
        <style>
            .container{
                background: black;
                color: red;
            }
            .col{
                float: left;
                width: 50%;
            }
        </style>
    </head>

    <body>
        <div class="container">
            <aside class="col">
                Aside
            </aside>
            <div class="col main">
                Main Content Area
            </div>
        </div>
    </body>
</html>

Now I can see the two columns. But the parent's background colour black is not set.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Sathish
  • 2,056
  • 3
  • 26
  • 40

7 Answers7

1

You can add <div style="clear:both;"></div> after the .col.main element, or add overflow: auto; to the .container

Alon Eitan
  • 11,997
  • 8
  • 49
  • 58
  • Alon, Thanks for the Answer, Actually I am setting it in the working sample 1. The thing is why should i need to do that. Coz, it is not a complex example. Just two divs and i am trying to place side by side. – Sathish Nov 09 '15 at 17:54
  • @Sathish - Because they float, their parent doesn't affected by their height - so the parent height is 0px so you won't see the black background – Alon Eitan Nov 09 '15 at 17:57
  • But maybe I didn't understand your question - if so, then i'll delete my answer – Alon Eitan Nov 09 '15 at 17:57
  • Alon. May be you are correct. See my Updated Question. "so the parent height is 0px so you won't see the black background" --> This is why i may not seeing the black color. – Sathish Nov 09 '15 at 18:03
  • You have answer one of the questions. Thanks. Setting height to the parent container renders black background. – Sathish Nov 09 '15 at 18:05
1

When adding float to inner divs, the outer div collapses.

In the working example, you are using a technique called clearfix for clearing the floats. 

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

You are styling the pseudo element :after, which is placed after the floating divs.

To make the :after visible in the page, content should be specified. In this case, bank content is given.

Solutions to the second code.

  1. Use float:left to the outer div also.

    .container{ float: left; width: 100%; }

  2. Use overflow property to the outer div.

    .container{ overflow: auto; }

  3. Use clearfix as in the first code.

Felix A J
  • 6,300
  • 2
  • 27
  • 46
1

The reason the page is not rendering is 

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

the content element in css uses the ::after pseudo element to insert generated content. In this case what that means is that it puts it on the page. You can read more about this element and many more html / css elements at W3schools.

The ::after pseudo element matches a virtual last child of the selected element. In simpler terms this means that you can insert content into a page with out necessarily having to do it in html. If you had a separate CSS file you could use ::after to insert things after the html. On the same note there is also the ::before pseudo element which does much the same thing except it inserts content before the html. If you would like to read more about the ::after pseudo element I recommend checking out The Mozilla docs on it.

Next is the clear property, this property allows you to choose which sides of an element properties are allowed to float. It is useful to make sure certain elements are aligned correctly on a page. Once again you can read more about this at W3schools

To put it all together the working css inserts the container class into your page after the html using ::after and content. Then clear both specifies that no elements can float on either side of the container class. Lastly your content is aligned in a display block.

Ytry
  • 11
  • 2
0

The problem is that floating boxes don't take up space on the parent unless you clear them. In your first example, you are clearing it using: 

.container::after{
  content: ' ';
  clear: both;


<!doctype html>
<html>

<head>
  <title>Faux Columns</title>
  <style>
    .container {
      background: black;
      color: white;
    }
    .col {
      float: left;
      width: 50%;
    }
  </style>
</head>

<body>
  <div class="container">
    <aside class="col">
      Aside
    </aside>
    <div class="col main">
      Main Content Area
    </div>
    <div style="clear: both;"></div>      
  </div>
</body>

</html>
Ruan Mendes
  • 90,375
  • 31
  • 153
  • 217
0

Elements that are floated behave different than non-floated elements -> Their presence does not determine container (parent element) dimensions.

Therefore in second example your .container div has 0px x 0px and you can't see anything because everything is white (.container black background is not visible).

Styling .container:after tells the browser that .container should stretch to contain all elements (even floated ones). There is a great question about what such 'clearfix' is and when you should use them.

Community
  • 1
  • 1
Keammoort
  • 3,075
  • 15
  • 20
0

The CSS clearfix

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

is useful, but it should (ideally) be optional and the columns should display the same way, whether or not the clearfix is included.

To make inclusion of the clearfix optional, the style declarations should read:

.container .col {
float: left;
width: 50%;
background: black;
color: #fff;
}

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

Now, even if you remove the clearfix, the columns will still display the same way.

Version with clearfix

.container .col {
float: left;
width: 50%;
background: black;
color: #fff;
}

.container::after {
content: ' ';
clear: both;
display: block;
}
<div class="container">
<aside class="col">Aside</aside>

<div class="col main">Main Content Area</div>
</div>

Version without clearfix

.container .col {
float: left;
width: 50%;
background: black;
color: #fff;
}
<div class="container">
<aside class="col">Aside</aside>

<div class="col main">Main Content Area</div>
</div>
Rounin
  • 27,134
  • 9
  • 83
  • 108
-2

It's just your text color. In the first example you have a black background. Change #fff to #000, or remove 'color: #fff;'.

Roeland ten Holder
  • 46
  • 2