I have one div element at the top of my page that is set to overflow:visible. Immediately beneath it, I have the page content.
I do not want the top div to expand, because of aesthetic reasons, but I would like the content below to treat the overflow from above as it would a block element...by "clearing" it.
I know about CSS clear...but it doesn't seem to apply to overflow.
Is there a correct method to do this?
The overflow:visible doesn't really have anything to do with the issue, as it's the default.
Set the height of the top div, and put another floating div inside it for the content. The floating div will expand outside the top div, and you can use the clear style to get below it.
try
overflow: auto;
it will expand the div and should solve your problem
Related
Why is my div cutting off the content of its contained absolutely positioned div?
I am trying to get my twitter bootstrap popover to be "on top" of the containing div. As you can see below, the popover is being cut off.
Z-index
Popover is absolutely positioned, so figured I'd try increasing z-index. Didn't work.
overflow: visible
Then next I figured I'd check for all the containing elements having overflow set to something other than visible, but that also didn't change anything.
Is there some CSS attribute I'm forgetting to check?
I'm dealing with a text who goes out of its div. I've coded the frontpage. So, no matter how long the main content is, it should force the sub-content (the grey area and the footer) to move down.
You see how the dummy text is acting
URL http://nicejob.is/clients/pizzahollin/www/divproblem.htm
I've accomplish this before but somehow it's not working now.
You've set an explicit height on that div. For it to reshape itself to its content, you'll need to set height:auto. (or never set its height in the first place)
EDIT: As ANeve said, you'll need to remove the height on both .article and .opentext, as well you'll need to put a clear:left on .lower-container to push the footer down.
If you have an element that only contains floating elements, the container's height will be zero. To fix this you can add a clearing div (<div style="clear:both"></div>).
If you add a clearing div at the end of the #under-content section, it will automatically adjust the height of the section to it's contents.
The other issue you have is that you are using relative positioning on your .opentext div elements. When you set a 'top' property, it actually pushes the content down, causing it to overlap with your #lower-container. You're better off using the 'margin-top' property, which will expand the size the .opentext div to fit all the contents.
So in short:
Add <div style="clear:both"></div> at the end of the #under-content <section>
Change the 'top:82px' to 'margin-top:82px' on your .opentext div
I hope this helps!
Just use wordwrap: break-word; for the div and it will break the word to the next line.
You have set the height property of your .article and .opentext divs. If you remove this property, the content should expand accordingly.
However, you will also need to adjust the positioning of your background image. You should set the background image of .footer itself, rather than relying on one statically-sized background image for the entire page.
I'm having a problem with overflow and width in Google Chrome/Webkit. This is a follow-up question on this question, there you will find the CSS. I need to have visibility: hidden to fix the problem in the first question.
The problem is visible in the screenshots below.
Why does this attribute affect the width in Webkit? Can I solve this without nasty hacks? Or can I re-think my strategy for the right pane?
Main div with overflow: visible. The div is stretched to the right pane, as it should be.
Main div with overflow: hidden. The right pane is now affecting the main div's width.
It's due to "formatting context" : http://www.communitymx.com/content/article.cfm?cid=6BC9D
"Floats don't overlap each other, and neither will a float overlap an element that establishes a new block formatting context."
If you use overflow: hidden to create a new block formatting context in the main div, you don't need the horizontal margins any more.
I'm having a few problems trying to position some divs in my website layout. All of them is related to the div's size. I'm using Chrome's developer tools to inspect the divs and when I mouse over some divs it is just 1px-high, but it has content inside and its content has some height. Shouldn't it have at least the same height of its content?
I don't know if I explained well, so I'm posting some images. I'm using Blueprint CSS Framework and it happens when I use class="span-XX" and inside it I don't use neither class
Here is some images (click to zoom)
The parent div
The div with problem (no height)
The child div
The parent div has class="span-XX", the div with problem has only #search
which is this one
I suspect it is some float or positioning issue with css but I don't know what it is and how to deal with it. I have also a list containing the social networks on the top of the site which ul has the same problem.
If you have floats inside, you need to clear them. Apply overflow:hidden; zoom:1; to the parent containing the floats and it should resolve it.
If you have negative margins / position + relative and negative offset and cant use overflow hidden use a clearfix... http://work.arounds.org/clearing-floats/
Your child div has the float property set, so the parent div will not expand height-wise to contain it. To get the behavior you expect, set overflow: hidden on the parent div.
I'm looking for a way to force floated or absolutely positioned elements to stay in the flow in css. I'm pretty much thinking css is stupid for not having something like flow:on flow:off to keep it in the flow or take it out.
The issue is that I want to have a div element with a variable height, I have a floated image on the left in the div, and I want the div to be at least the height of the picture. I also want it to be at least big enough to hold all the text that IS in the flow (this obviously isn't a problem).
I need the picture to be able to vary in size. I am currently using a jQuery solution, but its acting up. Since I don't feel like debugging, and I feel like there should be some kind of CSS solution, i'm asking.
Anyone know how I can do this?
I usually go with overflow: hidden or overflow: auto.
Instead of using a new element to clear the div at the end, you can add this onto the absolute div css;
overflow: auto;
Obviously IE likes to play differently so you need to supply a width to it too. I am assuming the absolute div has a set width... so you can just set it to that width.
.abs-div {
position: absolute;
overflow: auto;
width: 160px; /* Replace with your width */
}
A hack that may work in your situation is to add another element inside your div after the rest of the content that has the CSS clear property set to "both" (or left, since your image is on the left). eg:
<br style="clear: both" />
This will force the element below the floated elements, which will stretch the containing div.