I have a #wrapper div that is 100% height. Inside of that I have several content divs, each are displayed as inline-block and have a bottom margin. The problem is that this bottom margin is somehow being collapsed.
The problem can be seen with very simple code:
<div id="wrapper">
<div id="content">
<!-- lots of content here that will fill the browser window -->
</div>
</div>
I've created an example which can be seen here: http://jsfiddle.net/Y6tJw/
I have a feeling this is a webkit issue as both Firefox and IE render the page with the proper margin. Any help?
Don't ask me why it works, but this will work http://jsfiddle.net/Y6tJw/2/
Style
#wrapper { height: 100%; background: blue; }
#innerwrap { padding-bottom:300px; background: blue;}
HTML
<div id="wrapper">
<div id="innerwrap">
<div id="content">
<!-- lots of content here that will fill the browser window -->
</div>
</div>
</div>
this is happening because you gave your body a height of 100% with the min-height. Try giving height:auto; this'll work
Related
my html looks like this:
<div class="container">
<div class="header-content">
hello!
</div>
</div>
i've recently come into a situation where I need the 'header' to be 100% the window for a full-width background. usually i would do this css:
<div class="header-background-color">
<div class="container">
<div class="header-content">
hi!
</div>
</div>
</div>
unfortunately, i am fairly deep into a framework and can't wrap the container. i need to construct it within the container.
<div class="container">
<div class="header-background-color">
<div class="container">
<div class="header-content">
hi!
</div>
</div>
</div>
</div>
i can't figure out a way to accomplish this, and am wondering if this is possible.
if i use this css for header-background-color
background: blue;
left:0;
position: absolute;
width: 100%;
the element looks right, but the page flow is interrupted.
does anyone know if my target goal is reachable?
i made a bootply to illustrate this http://www.bootply.com/129060
You can use a child (>) selector to select the first container element and set its width to 100% and remove the padding.
.example-3 > .container {
width: 100%;
padding: 0;
}
This assumes you'll always have a wrapper around it with a unique class name (or use body if it's the first div), but this also allows you to remove the position: absolute which is causing the overlap and the height can stay dynamic.
See forked bootply: http://www.bootply.com/129065
I've added a button that inserts a paragraph into the div so you can see how it's not affected by changes in height.
Only thing I can think of is using a dumby element to maintain the vertical space (i.e. set the height), and then use absolute positioning on the full width content (as you mention). This is really ugly and won't be a good solution if the height of the content is dynamic.
See #content_dumby element in forked bootply: http://www.bootply.com/129063
Hey I have a Problem with my Footer div on my Homepage
http://kelteseth.net/2012/04/einsteigerhilfe-unterschied-ubuntu-kubuntu-und-xubuntu/
The Problem is that the wrapper div dos not have the same height als the content div. The footer div is in the center of my Website :/ How can I change the size of my wrapper div in dependence on the size of my content div?
<div id="wrapper">
<div id="content">
<!-- My content... -->
</div>
</div>
<div id="footer">
<!-- My footer stuff... -->
</div>
Add clear: both; to your #footer style.
The #content and #primary divs are floated, so they don't influence the height of the #wrapper div.
Edit: This method doesn't change the height of the #wrapper div, so if you plan to give it a border or a background image, Lars Nyström's overflow: auto; method will be better for you.
Set overflow: auto; for #wrapper
The reason this occurs is because the parent element of a floating element collapses. There are a number of techniques to solve it. The one I mentioned is called the Overflow Method. More info here: http://css-tricks.com/all-about-floats/
I am trying to set a min-height to a floated DIV in a XHTML or HTML document.
The fix of putting a fixed-height DIV into the DIV and clearing it with :after doesn't work at all. Directly assigning a min-height won't work either.
My code as it's now is like (which only works on Firefox in quirks mode but I want it to be something real):
<div style="float:left">
<div style="float:left; height:200px"><!-- min-height hackfix --></div>
CONTENT GOES HERE
<div style="clear:both;"></div>
</div>
I didn't really get what you want, but here is the fix for min-height issue:
selector {
min-height:500px;
height:auto !important;
height:500px;
}
So, your code can be like this
<div style="float:left;min-height:200px;height:auto !important;height:200px;">
CONTENT GOES HERE
</div>
http://jsfiddle.net/ynhat/pcpsS/1/
#Cobra; first close your clear div & instead of clear:both you can just write overflow:hidden in your parent div
<div style="float:left; overflow:hidden">
<div style="float:left; height:200px"><!-- min-height hackfix --></div>
CONTENT GOES HERE
</div>
Edit:
give width:100% to your child div.
The solution doesn't need to be supported by all browsers.
<div id="page">
<div id="header"> </div>
<div id="content"> </div>
<div id="footer"> </div>
</div>
Let's see. page got width:100%;height:100%. header and content got both width:100% (is this required anyway?), but they got fixed heights, let's say height: 200px and height: 500px. Now I want the footer to fill the rest of the page.
Any solution for that?
Thanks for your help.
you could use something like this:
html,body,#page {height:100%}
#page {position:relative;}
#header {height:200px;background:green;}
#content {height:500px;background:grey;}
#footer {position:absolute;top:700px;bottom:0;background:red;width:100%;}
in fact you set position:absolute for #footer and give a value for top 700px; the total height of #header and #content and bottom:0 so will fill the empty space.
Demo: http://jsbin.com/icuza3/2
as far as i know css3 can do "Maths" adn simple functions
see w3c-specifications , search for "calc" ;)
I've got a simple CSS:
div.header
{
width:auto;
}
div.footer
{
clear:both;
}
div.middle
{
margin:5px 0 5px 0;
}
div.links
{
width:200px;
float:left;
}
div.content
{
width: 900px;
margin-left:210px;
}
and a simple page:
<div class="header">
<!-- some control inside -->
</div>
<div class="middle">
<!-- left navigation list -->
<div class="links">
<!-- some control inside -->
</div>
<!-- content place -->
<div class="content">
<asp:ContentPlaceHolder id="myContentPlaceHolder" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
<div class="footer">
<!-- some control inside -->
</div>
The control placed inside "links" div is sometimes resized by javascript. The control is resized, but the parent div ("links" div) isn't - it preserves its original height. As a result the footer doesn't move down and the control overlaps it. How can I fix this so that resizing this control will cause resizing the parent div and as a result moving the footer down?
When putting content into a div with a float property, I always place a div with clear:both at the end of its contents to ensure proper resizing. You already have a class footer which does this, if that's all it's for then use it here., e.g.:
<div class="links">
<!-- some control inside -->
<div class="footer"></div>
</div>
If you plan on having more style on footer you might want to create a new class just for this purpose.
I think there are two ways you can solve this:
overflow on .middle:
.middle {
overflow: hidden;
}
put your footer (or another div with clear:both) inside middle, after the other two divs
http://websticky.blogspot.com/2009/10/float-left-doesnt-expand-parent-div.html
heres an article about floating divs not expanding their parent divs
You could get the height of the footer div and then subtract the re-size of the links div and set the difference as the new height of that footer div. In jquery, that might be something like:
$("#links").click(function() {
var footer-height = $("#footer").css("height");
var links-height = $("#links").css("height");
var links_resize = ...code to determine how much to resize links div ....
$("#footer").css("height, " footer-height - links_resize);
$("#links").css("height, " links-height + links_resize);
});
Try adding 'float:left' to the parent div and see if that fixes it. Floated parents will contain floated children but parents are NEVER to expand just to contain floated elements.
Maybe IE8 was supposed to fix this issue, but it isn't fixed.
Take the code from that article for example
<style>
.container
{
width:300px;
background-color:green;
}
.box
{
float:left;
width:100px;
height:100px;
border:3px solid red;
}
</style>
<div class="container">
<div class="box"></div>
<div class="box"></div>
</div>
Try it in IE8. You get the same result with IE 5 - 7. According to the article, you also get it in opera. The only mystery here is why IE continuously disregards the css docs. Instead of floating the container left to fix it, either create an empty div after the floats and do clear:both; or as the article states, do overflow:hidden; (or auto)