Menu
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
488
CSS Border Not Showing If you've set the shorthand border property in CSS and the border is not showing, the most likely issue is that you did not define the border style. While the border-width and border-color property values can be omitted, the border-style property must be defined. Otherwise, it will not render.
To fix this problem, the footer can be cleared to ensure it stays beneath both floated columns. Clear has four valid values as well. Both is most commonly used, which clears floats coming from either direction. Left and Right can be used to only clear the float from one direction respectively.
CSS Clear property is used to stop next element to wrap around the adjacent floating elements. Clear can have clear left, clear right or clear both values.
The float CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the page, though still remaining a part of the flow (in contrast to absolute positioning).
Here is a diagram, fom the w3c, showing what happens when a float overlaps borders of elements in the normal flow.
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.
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 :P
You could also use header { overflow:hidden; } - depending on your needs.
73
A good tool to debug html/css is FireBug with Firefox. You can dynamically edit the html and css to get real time results.
When you float an element, it no longer expands the parent element, hence the header height shrinks to the height of your #name block, which is not floated. Same with the bottom text, it gets pushed up because the floated elements "float" on top.
Do a clear both (which clears the floats)
<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>
<div style="clear:both;"></div>
</header>
This text should be under everything else.
</section>
</body>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
