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.
Related
I am trying to place a title and description in a out div that will wrap them. I have <div class="category_border"> wrapped around the title and description, but for some reason they are falling out of it. I have created a fiddle to help show what it is doing. Why aren't they falling in <div class="category_border">?
https://jsfiddle.net/0vkzoxm3/
Add overflow: auto to the .category_border class.
Here's your updated demo:
https://jsfiddle.net/0vkzoxm3/3/
The reason your title and description overflow the containing div is because both are styled with float: left. When you float an element it is taken out of the normal flow. Hence, as far as the container div is concerned they don't exist.
The answer is to "clear" the floats. There are many ways to do this. One way is to add overflow: auto to the container. This forces the container to expand to the height of the floated elements.
Here's a bit more if you're interested:
Clearing Floats: An Overview of Different clearfix Methods
How Floats are Positioned
Good luck!
Say you have a list of articles, some have a right floated image and very little text, so the image floats outside the article and into the next article, messing things up.
What is the correct/preferred/best way to make sure the elements inside the article does not float outside of it?
I know that overflow:hidden works, but is this correct usage? Or does it just happen to do what I want out of chance?
You have three ways to do it:
you can have overflow:hidden which is a clean way to do it.
Pros: It does not mess with semantics of the HTML, No "dead elements".
Cons: clipping the content if the container has a defined dimension, and clips shadows from inner elements.
div <-- style="overflow:hidden"
div <-- floating children
div
div <-- style="overflow:hidden"
div <-- floating children
div
You can have a blank element, usually a <div> after the container that has floats. Style this with clear:both.
Cons: Having a "dead element" in the DOM.
div
div <-- floating children
div
div <-- style="clear:both"
div
div <-- floating children
div
You can add a "clearfix" class to the container and use :after pseudo-class to add a "clearing dynamic dot/space". Basically it works like the second, but uses the :after to insert a space that has "clear:both" This article explains it.
Pros: It does not mess with semantics of the HTML, No "dead elements".
Cons: "classitis" (overuse of classes), :after is not supported in IE7 and older, thus CSS hacks are used
div <-- :after
div <-- floating children
div
" " <-- style="clear:both"
div <-- :after
div <-- floating children
div
You can use either of the three and they work great. I usually use 1 most of the time, and if I had shadows in the container, or if the container has a fixed dimension, I use 3. Method 3 relies on :after which is new. To support this clearfix, youd use an old CSS hack as described in the article.
For each article element, add clear: both;. This will ensure that images don't "leak" on the next article, but also makes sure they're not cut-off.
This link explains exactly what you asked.
overflow: hidden or overflow: auto would be acceptable solutions for clearing floats on smaller containing elements like a navigation bar that holds floated list items, or a call-to-action area that has a bunch of floated boxes.
And the link also explains the problem of using overflow:hidden to clear with a demo.
i want content NOT to wrap around it's floating sibling (may it be floating on content's left or right).
there will be no content following the content so containing floats/realigning baselines is out of the question. i just want content to "stand up and not curl around"
i know this is easily done by putting overflow:auto/hidden on the content - done it many times. however, this time, i cannot because.
the content will contain an <ul> of inherited width and has box-shadow - content will clip shadows if it has overflow:auto/hidden
i cannot set padding to the sides of <ul> because it has to be the same width as content.
i must NOT explicitly set dimensions, paddings and margins in any unit of measure, the same way when i do it when putting overflow:auto/hidden. this includes (but not limited to) adding a margin to move the wrap away from the floating element - the floating element's content may be dynamic in width.
my html and css is here: http://jsfiddle.net/QQQB5/2/ - but this one uses overflow to prevent wrapping but clips the shadows.
is there any other way to prevent content from wrapping aside from using overflow? as much as possible, no hacks, no "tricks/cheats". additional mark-up accepted if it can't be avoided.
Just use float:left on the content container as well and it will be fine :)
.content {zoom:1; float:left;}
Update:
Just because the link you provided which is from 2004 used FNE this isn't the case nowadays.
With CSS3 you just add:
.container:after {
content: "";
display: block;
clear: both;
}
and you don't float everything.
You could do it without floats:
.floater, .content {display: inline-block;}
.floater {vertical-align: top;}
See fiddle
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.
What's the most common way to deal with a series of block elements that need to be on a line (if javascript needs to be able to modify their widths, for example)? What are the pros and cons to applying float:left to each of them vs. using positioning to place them?
Well, if you're not too concerned with older browsers (I'm looking at you, IE6) the best way here is to go with
display:inline-block;
Basically, it creates a box-model element without clearing before or after it, so it remains in the line. Every modern browser interprets it well.
Floating would be my choice, but it really depends on what you wish to achieve. If you can provide a more specific example I would be able to give you a clear reason as to what and why I think you should use. However here is a brief set of pros and cons that I have come accross (I'm assuming that by positioning you mean absolute positioning):
Positioning pros:
very precise positioning in relation to the next ancestor marked as position relative - allows for great flexibility
allows for elements to be in a different order visually than they are in the DOM
Positioning cons:
Harder to line up with other elements since the positioned element is no longer in the document flow and also because of the level of precision required.
Other elements ignore the absolutely positioned element which means you could have a potential overlap, unless you account for the minimum and maximum size of the positioned element
harder to implement a footer if you are using absolute positioning for your columns.
Float pros:
really easy to construct simple and advanced layouts
no footer problem
no worrying about precision, browser takes care of that for you
parent container stretches
Float cons:
Lots of pitfalls for those less experienced with float layouts that may lead to many questions being asked on SO :)
As to the clear:both element that Sebastian mentioned, There's a simple way around that. Lets say you have a container div and 2 floated divs inside.
Html:
<div id="con">
<div class="float"></div>
<div class="float"></div>
</div>
CSS:
#con { background:#f0f; }
.float { float:left; width:100px; height:100px; background:#0ff; }
if you were to run this code you would notice that the container div (the magenta coloured one) is only a single pixel high whereas the floated divs were correct - which is the problem Sebastian mentioned. Now you could take his advice and add a br or float the container which would not be very semantic - so here is a slightly more elegant solution. Just add overflow:hidden; to the container div like so:
#con { background:#f0f; overflow:hidden; }
Now your container should wrap the floated divs properly.
The parent container does not stretch with them unless it is also assigned a float tag or there is a br with clear:both; at the bottom.
I would go with the float:left instead of the positioning. The browser does all the aligning when one object stretches. So there is less for you to care about.
I think i wouldn't explicitly position the elements but rather instruct the browser to use an inline layout for the elements using display:inline and let the browser handle the positioning.
regarding float vs positioning i think the only way to line them up using positioning is by using absolute positioning, and that means you need to handle re-sizes(of the browser view port) in order to keep the elements in place.
I think that by using the float property the browser handles the re-sizing issues for you and re-renders the element in the correct place.
Only disadvantage to float in situations like this for me has been that you'll either need to left justify them or right justify them -- centering is not an option. However you've mentioned you're using absolute values for widths, so you could just nest all the floated elements in a DIV element and add either margin-right or margin-left to the parent DIV to simulate center alignment.