I have stuff like:
<div id="div1">
<div style="float:left;width:100px;height:100px;"></div>
</div>
And the div1 appears to have 0x0 size instead of 100x100. Why?
#div1 isn't floated itself, so it doesn't appear to contain the inner div. Floating takes an element out of normal flow, so #div1 sort of isn't aware of its child anymore.
To make it do so, you need to float #div1 too, or give it overflow: hidden to make it contain its inner div's float (or use a clearfix).
Clear the float:
http://blogs.sitepoint.com/2005/02/26/simple-clearing-of-floats/
Update:
A List Apart has a good article on this type of thing: http://www.alistapart.com/articles/css-floats-101/
From the article:
...floated elements are originally calculated in the normal flow and then removed, the #container element doesn’t consider it within its bounds and therefore acts as if it isn’t even there..
Just set
#div1{
overflow:hidden;
}
Or add
<br style="clear:both" />
just before #div1 closing tag.
Related
I'm having some problems with float issues and them floating outside their containers.
I know that you can use clears in this issue but I don't really understand what they do or where they should go to solve the problem.
I've created a clear class so I can use <br class="clear" />
Live site with the problem can be seen here:
http://www.rubytuesdaycreative.co.uk/testsite/shop.html
float means "Move to the side, and let content that follows this element appear beside it"
clear means "If something before me is floating, stay below it".
You can use clear to make a container expand around its floating content — by setting clear: both on a zero height element that appears after the floating content but inside the container — but it isn't the cleanest approach to solve that problem.
Set overflow: hidden on the container instead. This will establish a new block formatting context and cause the container to expand to contain the floated children.
Clear is used in the div that is being invade by the other. So if part of div1 goes into div2 and div one is left of div2, then in div2 insert clear:left.
To fix your problem add overflow:hidden to #content.
#content {
margin-top: 60px;
text-align: center;
overflow: hidden;
}
This is only one possible solution. Just as hint: http://www.quirksmode.org/css/clearing.html
To your question: I do not recommended you to add extra markup to your document to clear floats. It's a bad practice! A quite common and stable solution is the micro clearfix hack introduced by Nicolas Gallagher. You have only to add one class to your #content and you're ready to go.
You should apply clear: both to a block-level element (like div) after the last floated element. That way the cleared element will be positioned below all of the floated elements, and it will push the bottom of its container down to cover them.
I have a problem with a <div> not sizing up the content (which is two <p> elements). The content is floated.
I have one <p> tag floated to the left
I have one <p> tag floated to
the right
I have one empty <div> tag below with style="clear:both"
Still, the <div> that contains the whole thing is 3 lines tall - not just 1 as it is supposed to be. What am I missing to make it work?
I prepared a fiddle and it works well - it must be an error in your code. Show us some pieces of it.
Example
Be sure to have no paddings/margins/height/lineheight affect your divs and ps (=reset browserdefaults!). Also the parent div needs to be wide enough to hold both p. Also, if you have non-floated content, the order matters.
I believe <p> elements have a default margin, try setting margin to 0px, and that may remove the the spacing.
First, float both <p> tags to the left.
Then, make sure that the <div> has a large enough width to accomodate both of the <p> tags.
You should be able to get them in one line after that.
http://jsfiddle.net/myJ3W/1/
Just to show you why float right might not be a good idea (it really depends on what you're trying to do.. Dialog boxes?)
If you use float: right;, your formatting breaks after the paragraph gets too long:
http://jsfiddle.net/myJ3W/3/
Whereas if you use float: left; for both put them into containers, you can be sure that they will stick within their boxes:
http://jsfiddle.net/myJ3W/4/
Again, really depends on what you're trying to achieve here.
Is there enough space in the outer most <div> so that each <p> is a single line? If not, one will break down below the other. In addition, your clear both <div> will have full line height as well. Here is the style I apply to a class called cb that I apply in those situations...
.cb
{
clear:both !important;
float:none !important;
height:1px;
line-height:0;
margin:0;
padding:0;
}
So I was fiddling around with CSS and floating the other day and stumbled upon an odd behavior (frankly I'm surprised I hadn't encountered it before). I was puzzled as to the reason for it (as well as to why I didn't already know...).
If you have a div (let's call him Bob) and you try to float him next to another div (Jimmy), it only works if
Jimmy is floated too
Jimmy comes after Bob
So if we have:
<div class="container">
<div id="one">Main Content 1</div>
<div id="two">Sidebar 1</div>
</div>
with
.container {
overflow:hidden; /* this essentially clears the floats. You could remove it and add a clearfloat div instead */
margin-bottom:10px;
}
#one {
background-color:red;
margin-right:50px;
}
#two {
width:50px;
float:right;
background-color:blue;
}
we get;
but if we just swap #one and #two, keeping the same CSS:
<div class="container">
<div id="two">Sidebar 2</div>
<div id="one">Main Content 2</div>
</div>
we get:
Why? I'm sure it's something simple (which makes me feel stupid) related to the box model and the definition of float, but what?
You can fiddle with it here
If you remove the margin-right:50px; it should make more sense to you :)
A block element by definition takes up the full width of the parent container. Even if you give it a defined width, that's only a visual representation of the calculated width and does not affect the box model.
Floating an element does exactly that, but it floats at it's first available floatable space in the parent element. In example one, that's below the first block element. In example two, it's at the top.
If you want to achieve example 2's result in example 1, simply add float:left; to #one.
This is expected behavior.
First remember that floated elements are not part of the normal flow. The rest is in the following spec:
A floated box is shifted to the left
or right until its outer edge touches
the containing block edge or the outer
edge of another float. If there is a
line box, the outer top of the floated
box is aligned with the top of the
current line box.
Basically your second example pulls div#two out of the document flow and shifts it to the right until it touches the outer edge of its sibling, div#one. Since it has margin: 50px;, there's enough room for div#two to fit.
Your first example, div#one has already cleared that line as a block level element and therefore div#two is floated right and aligned with the top of the current line.
Read more from the W3C CSS2.1 Specification on Floats
I'm trying to get the div wrapper to surround all the divs within it so depending on the amount of content the height of wrapper will grow.
I guessed that the way of doing this would be to set height: 100% but as you can see from the screen grab below, this is not the case.
Where it says 'No :-(' is what having height: 100% is doing where ideally I would like wrapper to be at the bottom where it says 'Yes' and I have drawn a red line.
Any help is much appreciated.
If you are using floats, giving the container overflow:hidden might fix the problem. If no fixed size is given to the div, this makes it stretch over the floated elements.
If you have absolutely positioned elements inside the container, it would be good to see the html/css for a solution.
Sounds like you need a clearfix.
http://css-tricks.com/snippets/css/clear-fix/
You'll want to define the clearfix class (as stated in the above link) add .clearfix to the #wrapper.
Can you post a link to the css?
The first thing that comes to my mind is the position attribute of the divs inside the wrapper. If they are set to float or absolute they will not be contained in the wrapper. That is intended behavior.
i.e. Here is a nice article about containing floats:
http://complexspiral.com/publications/containing-floats/
If, as is likely, that is the problem, you can either relative-position the inside divs or, if you are using floats, you can add an invisible block-displayed hr at the end of the wrapper, like so:
<div id="wrapper">
/*All divs to be contained here*/
<hr style="display:block;clear:left;visibility:hidden;">
</div>
The clear:left; is what gets rid of the "floating" of the previous elements. THe 'left' should be changed according to your floats.
More in the article above, this is the method i like best.
I am using firebug to debug, one useful feature of firebug is when I click the element in HTML, firebug will show highlight on the actual browser window so that I know which part is currently selected.
But I noticed, with some css, below code is interesting:
<div>
<div>
</div>
</div>
The parent divs highlight area didn't cover the child div's highlight area. In my opinion, the child divs area should be a subset of parent's, is it right? In which cases that that is not true?
There are some cases:
If the child uses position: relative; top: 200px and move away from the parent.
If the child does something similar using a negative margin. (similar to 1)
If the child is a float, and there is no clearing or some kind of clearfix, such as the newest method of making the parent overflow: auto, then the parent will not enclose the floated child.
It is mostly likely because the child divs are floated. In this case you need to use a clearfix hack, or add an additional div into the container like so:
<div style="clear: both"></div>
It depends upon the style being applied. Generally what you are saying holds good. But positioning of a child element can be made independent of the parent.
You may please show the css to get clear idea.
If the inner element is floating or positioned absolutely, it won't affect the size of the parent.
If the inner element is floating you can change the overflow setting of the outer element to make it contain the child. You can specify overflow:hidden; for the parent element, but no size, which has the side effect that it will be sized to contain it's children.