I have a "Content" div, which within itself contains 3 divs that float:left. Below that is the footer.
Now the footer has a border-top:10px which you'll see is hidden behind the content div. This is because the content div does not adjust it's height because it's content is floating.
To fix this I do
overflow:hidden
Here's the problem, while this fixes the height problem, it causes another issue.
The 3 floated divs have a box-shadow on them, and when the "content" container's overflow is hidden, it chops off the outside shadows.
Here's the jsfiddle http://jsfiddle.net/rhPCE/2/ as you'll see, the box-shadows are chopped off on the outside, and if you remove the overflow:hidden; from #content it fixes the shadows but breaks the positioning of the footer div.
Any ideas?
Thanks in advance!
When you float elements, the parent container naturally collapses because floated elements exist outside the normal document flow.
To fix this, you can apply a clearfix to the #content container:
Remove overflow: hidden; from #content
Include a clearfix, such as this: A new micro clearfix hack
Apply the clearfix class to the #content div, like this: <div id="content" class="cf">
After this, your parent container #content will expand to the height of the tallest floated element.
Working Example: http://jsfiddle.net/rhPCE/3/
Related
I know the solution is very simple, but I have come here for help to get the answer quickly I hope. So I have my page set up with Divs and I have a "content" div and with in that content div I have a contentarea div, so here is the problem I have run into: I want to position the "contentarea" div in the content div, the "contentarea" div will be centered in the content div with a little margin on the top and bottom. The problem is when I set the margin "top" for the contentarea div the the "contentarea div" is not actually moving but the content div itself is moving, and creating white space between the menu. Some how the contentarea div when moved, moves the content div. Any solutions? I want the content div to stay where it is when I position my content area div!!
For the main div use:
overflow: auto;
Or overflow visible :). U can also set padding on the main div :).
Best regards!
If you don't want to use overflow, you can do the trick with padding, look at this code :
Exemple :
.contentdiv {
padding-top: 10px;
}
Or
.container {
padding-top: 10px;
}
The full exemple : http://jsfiddle.net/Ca4K2/
Sorry. I had to edit my question: I made the second image in Photoshop.
**I am trying to find a DIV equivalent to a Table. How do you get divs to behave like TDs: All TDs adjust their height as the content grows, and all TDS have the same height to the bottom of the Table element. ** Why is this so hard with DIVs? After all these years, is'nt there a standard solution?
How do you get the two column divs to always be the same height (or always go down to the bottom) of the container DIV?
As the innner content grows, the wrapper DIV (in red) will grow with it, and maintain its padding (just like a table would).
yeah, your concept appears really tough to accomplish in CSS alone, for some reason. JQuery could handle it a lot better if you're open to it.
At any rate, here is is another alternative. It uses a clever trick as follows:
#container div { float: left; background: #ccc; width: 200px; margin-bottom: -2000px; padding-bottom: 2000px; }
Check it out here:
http://jsfiddle.net/jplew/yPMVJ/
try this
<div name="outer">
<div name="inner>put your contents here</div>
<div style="clear: both"></div>
</div>
you need a div that has the "clear:both" style (clear both simple makes the div takes up a entire line, nothing can float around it) at the very end of your inner divs so the outer div knows to extend to the end.
Possibly you have floats in the children divs. In that case you can do either of the followings:
Add overflow:auto; to the parent div's style.
Use CSS Clearfix
Add another tag (last tag under the parent div) containing clear:both style like the answer above.
I mocked up a solution on JSfiddle using simple percentages:
http://jsfiddle.net/xLSQX/
Otherwise, as mentioned above pay attention to the overflow: attribute and clear: both.
I want all the divs inside the container to act like table cells and the outer div to act like the element. The height of the outer div to be flexible and adjust to the height of all the content inside the other divs.
My main div .container is set to overflow:hidden; to maintain 100% height, it nests all content divs except for my header and footer. However inside is my sidebar which contains things that need to overflow out and redefining a child div doesn't seem to work. Is there a way around this?
I think you'll need to either define your parent DIV with overflow: auto; or set your child div to be absolutely positioned.
I have a container div .parent with a fixed width 500px which contains a lot of child divs .child.
The problem is that the child divs are getting auto wrapped, in my case i want them to continue in one line even if they'll be hidden and after that i'll add custom buttons to horizontally scroll the .parent div.
Demo: http://jsbin.com/egohi3
How to achieve that with keeping the floating?
Thanks
Make the parent element have white-space:nowrap and the child elements to be display:inline-block (instead of floating). Here is a modified example: http://jsfiddle.net/7we5q/
#Phrogz's answer will work. You could also add another wrapper <div> inside "parent" and give it both "overflow: hidden" and a huge width (like "width: 100000px;").
my main container div can be refreshed, so its content is being hide/shown. When my container div is hide, my footer shoots up.
the html structure looks like the following:
Note that i already tried this:
And it doesn't seem to work, the footer div will still shoot up when the container div is hidden.
Nor can i set a height on the container div because i want the content div height to stretch 100%.
Any ideas? Thanks in advance.
Use this css:
#yourdiv {
position:fixed;
bottom:0;
}
This will make it stick to the bottom :)
Sticky footer is excellent for keeping the footer where it should be.