So this is one of my CSS3 lines:
body{
width: 1500px;
border: 2px solid black;
text-align: left;
margin: 20px auto;
}
However, I have an Article in HTML, and when I write float:left on my CSS file, the border that's supposed to cover it stops right before the article starts, on the top.
Can anyone help me with this issue?
I want the border to surround everything.
Here is the clearfix snippet I use. Add this to the top of your css.
.clearfix:after {visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
Like one of the commenters said. When you float an item, it disrupts the natural block level of the elements. What this means is, elements that are block level sit on top of each other, and elements that are inline, are well in a line.
So when you float items to the left, the parent div may collapse. To fix it, we add clearfix to the parent.
Honestly, you should post more of your code so we can see what's actually going on, but more than likely this will fix your issue.
Add clearfix class to your parent div (after adding it to your css)
What I mean is add it to whatever element your article is inside --
<div class ="clearfix">
<article> information </article>
</div>
I think this question has been answered all over SO, here is one post that will help- How do you keep parents of floated elements from collapsing?
Related
Why aren't these two elements next to each other?
Demo
HTML
<div>
<p>I'm a paragraph and I'm on the left!!!</p>
<h3>I'm a header and I'm on the right</h3>
</div>
CSS
div p{
float: left;
width:30%;
border: 1px solid blue;
}
div h3{
clear: both;
float:left;
width:10%;
border: 1px solid red;
}
I thought by giving the h3 a clear: both would use the empty space next to the p.
But it didn't work. Can anyone explain why?
Using clear: both; will clear the floats and will render the element below, inorder to make that work, you need to take out clear: both; from div h3 selector.
Also, if you want to float the header to the right you need to use float: right; rather using left.
This is what the clear: both; does to your example, it kinda acts like a wall between two floated elements.
Also this answer of mine will help you to understand how floats really work and the other one will help you understand clear both.
clear: both; is to clear the floated elements, so in your code, you should create a snippet of something like
.clear:after {
clear: both;
content: "";
display: table;
}
And now use the above snippet on your container element which will self clear the element like, rest stays the same but as I said you need to remove clear: both; from div h3
<div class="clear">
<p>I'm a paragraph and I'm on the left!!!</p>
<h3>I'm a header and I'm on the right</h3>
</div>
What will happen if I don't clear the floats?
Well, say you have a background applied to the parent element, the color won't render at all, see it yourself...
Demo 1 (floats aren't cleared so you don't see the red background)
Demo 2 (floats are cleared, you can see a red background now)
It's not just about the background-color, if you have third element, than it will just sit beside the other two, so inorder to prevent that, we use clear: both; as well. I've covered these aspects in the answers I provided the link for.
They aren't next to each other because you disabled any floating left of h3 with clear:both. Remove that and they will. Like so http://jsfiddle.net/vHph8/
The css clear property resets the floating and actually causes the layout to proceed beneath all floating material.
if you delete it from your css, it works (jsfiddle: here).
More frequently then not I come across this issue. Generally I use padding instead of the margin or some quick solution to fix my problem but I too know this is not the correct fix.
Without going deep into writing my issue, I like create a fiddle for better understanding. So here is my fiddle.
.container-node {
margin: 10px;
background-color: #0f0;
}
.content-node {
margin: 20px;
background-color: #f00;
padding: 5px;
color:#fff;
}
.border {
border:1px solid #00f;
}
The issue that I'm trying to point out is if I've two divs, one inside the other and the inside div is given some margin, it takes the margin value differently if the container is bordered and differently if the container does not have a border.
I appreciate any help or documentation on this. Thanks
http://www.w3.org/TR/CSS2/box.html
Read carefully 8.3.1 Collapsing margins
Two margins are adjoining if and only if:
no line boxes, no clearance, no padding and no border separate them
The best solution of this ptoblem i know is clearfix. Its not giving padding or overflow but similar to it.
Fiddle
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.cf {
*zoom: 1;
}
As already pointed out it is a "problem" with collapsing margins. A really good read about this issue can be found here:
http://reference.sitepoint.com/css/collapsingmargins
You could just add a padding of 1px and reduce the margin by 1 like so:
.container-node {
margin: 9px;
background-color: #0f0;
padding: 1px;
}
Applied to your problem:
http://jsfiddle.net/n65bX/1/
The .content-nodes margin doesn't work properly, it doesn't have an element to push from. With the border property you define the contour of the element(Based on the border, the margin can push from there).
To easially fix this, you can add a padding to your .container-node instead of the margin on .content-node:
.container-node {
/*margin: 10px;*/
padding: 20px;
background-color: #0f0;
}
Also you are creating your yellow border with a margin. I would suggest you to use also padding for this on the proper element:
.root-node {
border: 1px solid #bababb;
background: #ff0;
margin: 10px 0;
padding: 10px;
}
with proper i mean to the relevant element. You gave an yellow background to .root-node element, so you should also define the size of that element on that element.
It's far more logic to use it this way :)
When you want to create an inline spacing use padding, if you want it to go outside use margin.
jsFiddle
This might also be usefull: When to use margin vs padding in CSS
Update
So you may ask yourself: why isn't the element(.content-node) pushed away based on the parent(.container-node) element?
Well it's fairly simple why this happens. The margin still pushes the element(.content-node) away, only it's based on the wrong element(it is pushed from the .root-node). This is why your yellow border is bigger as the one with the border.
So why is it pushed at the root element?
To debug it even more; let's only set margin to the left and right of the .content-node:
margin: 0 55px;
jsFiddle
It seems that only the top-margin didn't work. And it indeed seems that the margin is collapsing.
I found this topic about this matter: Why does this CSS margin-top style not work?
So i would suggest to use padding so margins aren't conflicting with each other (paddings can never interact in the same 'flow' with each other).
I will try to explain this the best I can.
In the element containing the "container-node", there is no 'area' for that container to give margin to.
By adding sample text before/after , you will see the margin working. Likewise, if you give the "container-node" a border or even padding, you will then provide that element with something for the "content-node" to position against.
On my web page, I have a logo and a menu that make up header elements and a hero unit under it.
Now I want to give it some bottom margin so there is enough negative space between
header and hero unit but this bottom margin (100px) is not applying.
Same thing if I try to give top margin from hero unit.
.header {
width: 95%;
margin: 20px auto 100px;
}
Here is my working sample JS BIN
Adding a div under it with:
.someclass {
clear: both;
}
would help. But even easier is:
.header {
width: 95%;
margin: 20px auto 100px;
overflow: hidden;
}
If you add the overflow: hidden; the browser will be forced to calculate the size of the elements within, despite them being floated. When the size is calculated, it also knows where to start the margin-bottom.
One more popular uses of setting overflow, strangely enough, is float clearing. Setting overflow doesn't clear the float at the element, it self-clears. This means that the element with overflow applied (auto or hidden), will extend as large as it needs to encompass child elements inside that are floated (instead of collapsing), assuming that the height isn't declared.
Source
The difference between auto and hidden in this case, is that with hidden, it will hide everything that overflows, when it doesn't have enough room anymore, and with auto, it will create a scrollbar.
EDIT:
Since this question apparently is still active, I'll add the most common way of solving this in the present day:
.header:after {
clear: both;
height: 0;
width: 100%;
content: '';
display: block;
}
This is the same as the first method, but then without having to add another element. This is the way to go if setting overflow is not an option (or even if it is an option, this would be better).
When I first posted this answer, it wasn't an option as it was not supported by IE 6 / 7, which were still broadly used back then.
you could add a clearfix to your header or wrapper tag. This is useful bit of css to include in your file. More about the clearfix can be found here
http://css-tricks.com/snippets/css/clear-fix/
I think it's a problem in your margin attribute order.
If I change your property from: 20px auto 100px; to: 20px 0px 100px 0px then I have bottom space appearing.
I created a fiddle that exemplifies the problem:
http://jsfiddle.net/vZtBb/
This is working exactly as I want it, but the problem is that in IE7 the absolutely positioned span (hover-tooltip-container) starts at the top of the line instead of at the bottom like it does in the other browsers. If you add a border to hover-tooltip-container, you can see this.
This is a problem because I want the tooltip to go up, but the anchor to still be exposed. You should be able to mouse over the tooltip as well, but the gap in IE7 makes this impossible.
If there is any way to get the hover-tooltip-container span to start in the same place on the line in IE7, IE8, and FFX, that would be perfect.
Javascript is not a solution.
The most simple thing you could do with the code you already have, is add a star hack to adjust the bottom rule within .hover-tooltip, for IE7.
.hover-tooltip {
display: block;
padding: 15px;
position: absolute;
margin: 0 auto;
bottom: 1em;
*bottom: 0;
width: 100%;
border: 2px outset #c0c0c0;
background-color: #f0f0f0;
text-align: center;
}
However, the double, nested absolute positions of .hover-tooltip-container and .hover-tooltip seem unnecessary.
I did something quite different (also renamed your classes, to much of a hassle to play with those looooooooooong name).
http://jsfiddle.net/vZtBb/16/
I removed the nested absolute positionning : They are the one causing the issue, since element in absolute position are taken out of context. So, 2 solo, nested absolute positionned element means that one element is in nothing (glitchy and really not wanted).
Instead of that, I placed your tooltip box in absolute, but made it start higher than the anchor by use of a negative position (top:-70px). It's sketchy a bit, but you should get my point.
Trying putting this after the .hover-tooltip div:
<div class="clear fix"></div>
and this css:
.clearfix:after {content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;}
.clearfix {display: inline-block; }
html[xmlns] .clearfix {display: block; }* html .clearfix {height: 1%; }
I was able to solve the problem by having the "container" element float left and have relative position. This achieves the appearance of breaking out of containers but still provides a reference for the tooltip to go up from.
This is a general question and something that dawned on me and seemed to make sense. I have seen many people use clearing divs <div class="clear" />and know this is sometimes frowned upon as it is extra markup. I recently started using <hr class="clear" /> as it seams representative of its actual purpose.
Both referencing of course: .clear{clear:both;}
I am looking to get some opinions if an hr tag makes more sense than a div to clear content
According to the HTML5 spec, the hr element represents a paragraph-level thematic break (a scene change in a story, or a transition to another topic within a section of a reference book) while the div element is a generic container for flow content that by itself does not represent anything. So I don't see any justification for choosing one over the other for containing floats.
However, there's something you should keep in mind. Read the following excerpt from Eric Meyer's article Containing Floats:
div.item {border: 1px solid; padding: 5px;}
div.item img {float: left; margin: 5px;}
div.item hr {display: block; clear: left; margin: -0.66em 0;
visibility: hidden;}
The negative top and bottom margins
have the general effect of closing up
the space that the hr occupies.
However, this effect is not precise,
and not necessarily identical across
browsers. The semi-mysterious nature
of horizontal rules makes it difficult
to predict exactly what will happen.
The effective height of the hr might
be zero, or a small positive amount,
or even a negative height
Therefore, in situations where a
precise clearing effect is needed,
authors can use a div instead of an hr
to create a clearing effect.
If this didn't make sense to you, see this fiddle and notice the space below the floated div (IE8).
That said, there are other ways to contain floats and avoid using structural hacks at the same time:
Float the container: may cause layout problems.
Use .container { overflow: auto; }: If the content exceeds the boundaries of the container, you will see a scrollbar.
Use .container { overflow: hidden; }: If the content exceeds the boundaries of the container, it will be hidden.
Clearfix: To be used when 2 and 3 fail.
The better solution is to not use any elements and use overflow:hidden with a hasLayout trigger for IE, or the clearfix.
Which clearfix method?
Both methods are old fashioned. The latest "trick" is to use overflow property for the container of float elements.
If for example you have:
<div id="wrapper">
<div class="float">text here</div>
<div class="float">text here</div>
</div>
with float class float:left then it's better to use overflow:hidden or overflow:auto than <div style="clear:both"></div> or the hr method.
Demo: http://jsfiddle.net/vALSL/
Read more here: http://www.quirksmode.org/css/clearing.html
I prefer the CSS only approach. Regarding the semantics between div and hr I am not sure I think hr makes any more sense to use than a div. The hr tag is meant to create a "paragraph-level thematic break".
http://dev.w3.org/html5/markup/hr.html
CSS only solution:
http://www.positioniseverything.net/easyclearing.html
<style type="text/css">
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;} /* for IE/Mac */
</style><!-- main stylesheet ends, CC with new stylesheet below... -->
<!--[if IE]>
<style type="text/css">
.clearfix {
zoom: 1; /* triggers hasLayout */
display: block; /* resets display for IE/Win */
} /* Only IE can see inside the conditional comment
and read this CSS rule. Don't ever use a normal HTML
comment inside the CC or it will close prematurely. */
</style>
<![endif]-->