I am simply using a div of this nature to clear an area after floats:
.clear {
clear:both;
}
however, I am seeing it is causing a big space in my formatting and I'm not sure how to rid of it. what do you think may be happening?
thank you!
In case anyone else runs into this problem, the solution is to add this to the group's parent; that is the element that is causing the problems:
overflow: auto
i.e.:
<div style="overflow: auto">
<div style="float: right">Testing</div>
<div style="clear: both"></div>
</div>
Try to use a line height , it should fix the problem.
Is it happening only on IE , if so add line height
do something like this
.clear {
clear: both;
height: 0px;
overflow: hidden;
}
I would just apply the clear: both attribute to the next content element (i.e. div) instead of creating an empty div (which I'm assuming that you are doing).
Demo: http://jsfiddle.net/wdm954/ArDhF/1/
I had the same problem with several small left-floating tables next to each other. The clear div afterwards took a lot of white space without having any height, nor padding or margin.
The solution: Wrap all tables within a div, then assign overflow-hidden to that div and (this is important) a value for the height.
E.g.
.tablecontainer {
height: 70px;
overflow: hidden;
}
Related
This question already has answers here:
Why doesn't the height of a container element increase if it contains floated elements?
(7 answers)
Closed 8 years ago.
I make simple http://jsfiddle.net/6KzXw/ with CSS:
.container {
width: 50%;
margin: 0 auto;
padding: 2px;
background: red;
}
.left {
float: left;
background: yellow;
}
.right {
float: right;
background: yellow;
}
and HTML:
<div class="container">
<div class="left">To the left.</div>
<div class="right">To the right.</div>
</div>
I wondering why area of container isn't red....
After search I found solution with overflow: hidden but official docs about fix: http://www.w3.org/TR/CSS21/visufx.html make me cry when I try to understand how it work...
Can any explain why overflow: hidden is fix for surrounding problem with standard in mind?
overflow: hidden causes the container to establish a block formatting context for its contents. Without it, the floats participate in some other formatting context, having been taken out of normal flow, and therefore the floats are not taken into account when calculating the height of the container.
Once you cause the container to establish a formatting context, it will consider the floats, even though the floats are still taken out of the normal flow that is established within its own formatting context. That is stated in another section of the spec. The reason this isn't stated in the section that you link to is because it's a side effect that was never really intended, but made so due to implementation limits. See this answer (and the one that it links to) for an explanation.
you need to provide a height to the div as if you float the contents, the contents are removed from the flow of the page. essentially the div sees no children inside it as the children are floating.
i added a height to the div height: 20px
FIDDLE
When you apply the 'hidden' property to an element, any floats within it will take up space. So if you have a container that only contains floated elements, that container will act like it's empty. By setting 'overflow' to 'hidden' we force that container to account for those floats.
Another solution to this is to add a "clearfix" element below the floats. It might look something like this:
<div class="container">
<div class="left">To the left.</div>
<div class="right">To the right.</div>
<div class="clearfix"></div>
</div>
And the CSS will be something like this:
.clearfix {
clear: both;
}
Personally, I prefer setting overflow to hidden (if possible) but there are many clearfix solutions out there.
http://nicolasgallagher.com/micro-clearfix-hack/
http://css-tricks.com/snippets/css/clear-fix/
http://learnlayout.com/clearfix.html
Edit:
As far as setting a set height. You can do that if you want a set height, but if you want the container to grow or shrink based on the height on the floats, you need to set overflow hidden or use a clearfix.
Because the container has a height of 0
My slideshow is overlapping my footer. In the source code, I've tried to clear the previous DIV as typically recommended:
<div class="clear"></div><!-- /clear any floats -->
This is not fixing the problem. Any ideas?
One way to solve this is to adjust the footer-wrap class to add more margin on top:
#footer-wrap {
margin: 100px auto 120px;
}
There might be other adjustments necessary but this should fix the issue assuming your content in the sideshow stays the same height.
give this one <div class="ls-thumbnail-wrapper" style="visibility: visible;"> a float: left and it should be fixed
So often, I we wind up doing something like this:
<div class="one">
<div class="floating-two">content</div>
<div class="clear"></div>
</div>
What we usually mean is, "make sure that any floated elements are included into block one". Sof potentially, any background applied to "one" appears behind everything, floating or not.
I am looking for a cleaner way to do this. After all, the "clear" div is simply a style that we intend to apply to "one". We could do:
.floating-two:after{
clear:both;
}
But this is not correct either. Floating-two doesn't know whether there might be other blocks following it before "one"'s closure.
Has anyone developed a trick for this one?
You can clear do this in two ways without adding markup (without a <div class="clear"..> or equiv):
.one:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
height: 0;
}
OR
.one {
overflow: hidden
}
You can use overflow: hidden on the outer div and it will stretch to the height needed to contain .floating-two. Example fiddled here: http://jsfiddle.net/neilheinrich/rBBMp/6/
.one {
overflow: hidden;
}
You have to add a real element with the clear property. If you don't like the divs, use a <br>. It's the shortest, valid element which doesn't modify the lay-out:
<br class="clear" />
EDIT
I do believe that RobW is correct in saying you can't do this with :after, but you can make it more dynamic with this css:
http://jsfiddle.net/qQaQg/2
.one :last-child
{
clear:both;
}
How is it possible to make an exception on the overflow:hidden; container property to a matched set of child elements?
Here's a sample scene:
<div style = "overflow:hidden;">
<p>item</p>
<p>item</p>
<p class="special">item that needs to show itself outside the parent borders</p>
</div>
I do have a reason why I'm doing this :] I'm building a pretty complex scrolling menu whose elements are expanding out of the menu's borders. The menu obviously clips everything outside its borders since it's scrolling around.
Here's a chunk of code relevant to the issue:
http://jsfiddle.net/Birowsky/fNLbP/15/
Uncomment the marked line in the JavaScript to see the issue below the 'special item'.
You might notice that the scrolling isn't working, it's ok, I think it's fiddle issue.
You can make the special element to be absolutely positioned
.special{
position:absolute;
}
But this will only work when the .special does not define a position (top/left/bottom/right), and also it will not be used if you later want to calculate the height of the parent div..
example : http://jsfiddle.net/gaby/aT3We/
The requirement though is a bit weird, and it might be better to rethink the whole issue..
(what exactly are you trying to achieve with this ?)
I don't think you'll be able to find a way to do this. Even if you do, I'd recommend against using it because it probably won't be future-proof or very cross-browser compatible.
In the case of a menu, you're probably better off putting these items in separate divs. I'd need to see your code in context to recommend a specific way of doing things, but layering your elements kinda like this might work for you:
<div style = "overflow: hidden; width: 200px; height: 100px; margin: 0; padding: 0; background-color: #CCCCCC; z-index: 1;">
<p>item</p>
<p>item</p>
</div>
<div style = "overflow: visible; width: 200px; height: 100px; margin: -30px 0 0 0; padding: 0; z-index: 2;">
<p class="special">item that needs to show itself outside the parent borders</p>
</div>
If that doesn't fit your needs, maybe you could describe the structure of your menus better so that we can understand what you need? Do you have a link to an example, perhaps?
Edit based on new information
After looking at your example link, it looks like what you want to do is clip content horizontally, while still allowing it to overflow vertically. You can do this by using a very high height value, and then setting a negative bottom margin:
<div style="width: 200px; height: 2000px; margin: 0 0 -1960px 0; overflow: hidden;">
<p>Thisisaverylongsentencedesignedtooverflowthewindowverticallysopleasepermitmetotypeitwithoutandspaces</p>
Item 1<br />
Item 2<br />
Item 3<br />
Item 4<br />
</div>
Is this what you want?
I had a problem like this where the aforementioned solutions weren't working. There was a list of items in a container, each of which could be varying size depending on how many where in the list (with a minimum). The container was overflow: hidden; and there was a part of the items in the list that was a drop down and would be cut off.
My solution:
// get dropdown container position, make a modification, and apply to dropdown
function openDropdown(){
var offSet = $('.dropdown.open').parent().offset();
offSet.top = offSet.top + ($('.dropdown.open').parent().height() / 2);
$('.dropdown.open').offset(offSet);
}
// on scroll reassess dropdown position
$(window).on('scroll', window, function(){
if($('.dropdown.open')[0] != undefined){
openDropdown();
}
});
// on click close open dropdowns and open this one
$('body').on('click', '.dropdown', function(){
$('.dropdown.open').removeClass('open');
$(this).addClass('open');
openDropdown();
});
Why would you need to do this? Maybe a better solution can be made.
I don't think that defining overflow: auto; selectively is possible, as overflow is applied to the parent, not it's children, so it's like having color: red and color: blue on the same element, at the same time; they just don't make sense when put together (bad example, but you get the idea).
So i have a couple of tag, and i have some text and images i'd like to center or align to the bottom inside of them. Vertical-align doesn't seem to be in the mood to work.
I'd also like to make a horizontal menu, which will have a start image (say, menutop.png), a filler (menubg.png) and a closing block (menubottom.png), and i'd like for the bottom closing block to automatically place itself at the end of the menu, no matter how long it happens to be.
Thanks!
This calls for absolute positioning in CSS. First you need to give the parent DIV a position value (relative or static at least).
Then, the images and text you want to align to the bottom you need to make position: absolute, and bottom: 0px.
The horizontal menu should be 100% width (display: block also works), and the closing block placed inside. Absolutely position the closing block, and give it "right: 0" so it is always to the right.
I solved it like this:
<div id="menu">
<img src="img/menutop.png" />
<div id="menucontent">
stuff goes here
</div>
<img src="img/menubottom.png" />
</div>
CSS:
#menu
{
width: 335px;
height: 100%;
float: right;
border:solid black 1px;
}
#menucontent
{
background:url(img/menubg.png) repeat-y;
width: 100%;
}
Thanks for the pointers though :)
Try this with the element you want to center something else within:
div {
display: table-cell;
vertical-align: center;
}
(Not sure if this works in every browser, but I'm fairly sure it does in Firefox and IE8 at least)