Home/ Questions/Q 4339202
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-21T11:11:06+00:00

I’m teaching myself CSS and HTML, and I’ve come across something that seems like

  • 0

I’m teaching myself CSS and HTML, and I’ve come across something that seems like a bug– it’s challenging how I understand HTML and CSS. I’ve found a fix for this bug already, but I was hoping someone could cue me as to why the fix works, and if there’s some advice out there for how to get a easier handle on CSS’s inconsistencies. Below I’ve detailed the problem and its solution.

Problem:
I have a few items that I want to be nested in a couple of boxes on the page. I’ve changed the CSS to draw attention the specific problem areas: The red and green boxes should be sandwiched between the black and yellow lines.

The red and green boxes are set to float to the right and left of the page. Their container does not expand to surround them, and the black and yellow lines touch eachother. After applying the magical CSS before my custom CSS, the two lines surround the red/green boxes as expected

Here are my files:
template.html

<html>
<head>
    <!-- uncomment the line below to enable the fix -->
    <!--<link rel="stylesheet" href="css/resettemp.css" type="text/css" > -->
    <link rel="stylesheet" href="css/template.css" type="text/css" > 
</head>
<body>
    <section class="content">
        <header id="contact">
            <div id="name">Name</div>

            <div id="address">
                <div>Home Address</div>
            </div>

            <div id="contact-details">
                <div><strong>Phone Number:</strong>5555 </div>
            </div>
        </header>
        This text should be under everything else.
    </section>
</body>
</html>

template.css:

header#contact
{
    display: block;
    font-size: 1em;
    border-bottom: 5px #ff0 dashed;
}

header#contact
#name
{
    display:block;
    text-align: right;
    font-size: 2em;
    border-bottom: 3px #000 solid;
}

header#contact
#address
{
    float:left;
    background: #f00;
}

header#contact
#contact-details
{
    float:right;
    background: #0f0;
}

And the fix below is placed in “resettemp.css”:

/* our Global CSS file */article:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }aside:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }div:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }footer:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }form:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }header:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }nav:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }section:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }ul:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }/* our ie CSS file */article { zoom:1; }aside { zoom:1; }div { zoom:1; }footer { zoom:1; }form { zoom:1; }header { zoom:1; }nav { zoom:1; }section { zoom:1; }ul { zoom:1; }

sources: http://www.sycha.com/css-clearfix-floated-element-automatically-fill-parent-container

and then the CSS above: http://www.marcwatts.com.au/blog/best-clearfix-ever/

How do I understand how this CSS fix works?
How do I teach myself the basic syntax of CSS in addition to understanding these peculiarities?
It seems I’m probably using floats to accomplish formatting goals improperly– What’s the more acceptable way to get two boxes of text on opposite sides of a container underneath another block element like this?

Browser: google chrome 10.0.648.205

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The “Problem”

    Here is a diagram, fom the w3c, showing what happens when a float overlaps borders of elements in the normal flow.

    A floating image obscures borders of block boxes it overlaps.

    This behavior of floating elements causes its parent element’s height to do things most developers consider unintuitive.

    But given that it is documented on the w3c, this is intentional: it is not a bug.

    The Solution You Found

    So here’s the interesting rule in your CSS:

    /* our Global CSS file */
header:after {
    clear:both;
    content:".";
    display:block;
    height:0;
    visibility:hidden;
}

    This rule is targeting the <header> element, but it’s also using the :after pseudo-element. The result is that it’s like there was an imaginary element after <header> which you are targeting with this CSS rule:

    <!DOCTYPE html>
<html>
<head>
    <!-- uncomment the line below to enable the fix -->
    <!--<link rel="stylesheet" href="css/resettemp.css" type="text/css" > -->
    <link rel="stylesheet" href="css/template.css" type="text/css" >
    <title>Teaching myself CSS, HTML. I want help understanding this bug.</title>
</head>
<body>
    <section class="content">
        <header id="contact">
            <div id="name">Name</div>

            <div id="address">
                <div>Home Address</div>
            </div>

            <div id="contact-details">
                <div><strong>Phone Number:</strong>5555 </div>
            </div>
        </header><!-- imaginary header:after element -->
        This text should be under everything else.
    </section>
</body>
</html>

    This imaginary header:after “element” which is added after the <header> has a clear:both CSS property:

    /* our Global CSS file */
header:after {
    clear:both; /* This property clears floating elements! */
    content:".";
    display:block;
    height:0;
    visibility:hidden;
}

    So what does clear do? According to the w3c…

    This property indicates which sides of an element’s box(es) may not be adjacent to an earlier floating box.

    The less reliable but sometimes clearer w3schools describes clear as…

    The clear property specifies which sides of an element where other floating elements are not allowed.

    Since the header:after “element” has a clear:both CSS property, is will appear at the bottom of (after) any floating elements on either its left or right sides, such as your red and green boxes.

    Now, that resettemp.css file seems to target almost every element imaginable with the same trick – kind of a carpet-bomb approach to solving the float–overflow problem. A better idea is to learn CSS 😛

    You could also use header { overflow:hidden; } – depending on your needs.

    • 0