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/
Related
I have a horizontally scrolling container with several inline-block divs, each containing an image. The Image is set to height:100% and width:auto. The problem is the inline-blocks aren't taking the width of the image. They seem to be using the native image width rather than the rendered width.
.container {height:300px; overflow:auto; white-space:nowrap;}
.container div {display:inline-block; height:100%;}
img {height:100%; width:auto;}
<div class="container">
<div>
<img src="example.jpg"/>
</div>
<div>
<img src="example.jpg"/>
</div>
</div>
https://jsfiddle.net/8mL0yx56/3/
The whole thing is inside a flex item, which seems to be what's causing it. Any way to stop this?
.flex-item {height:100%;}
It can solved you problem.
You set .container {height:100%;}, but its father,.flex-item, doesn't have height.
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
I am using 960.gs, and want to vertically align an IMG. My sense is that
the IMG within the first DIV of grid_3 has no idea as to the height of the
rest of the row (the div of grid_6 suffix_3). The image hugs the top...
Some constraints: I may not know the height of the image. I may not know the
height of the content in the DIV to the right.
Without resorting to javascript, what's a good approach that wont break 960.gs?
Is this where I go to a nested container, just so that I can vertically center an
IMG? I have tried the css rule:
img {
vertical-align: middle;
}
There's obviously more to it....
Snippet...
<div class="container_12">
<div class="grid_3">
<img src="images/dlsmug5.png">
</div>
<div class="grid_6 suffix_3">
<h1>My Title - etc...</h1>
<p>
Heya, revamp time! It may not be obvious, but...,
I am coming up to speed with the CSS framework
of The 960 Grid System ..
</p>
</div>
<div class="clear"></div>
You can give to the div a table-cell behavior with a vertical align:
.grid_3 {
display: table-cell;
vertical-align: middle;
}
I have a centered container layout with a right fixed nav div. To make the fixed nav stay in place when viewport resizes it's set up in some nested divs. Problem is the nav div ends up infront of the content. I can change the z-index order but I want both content and nav to be accesible as in being able to "mark" text for example. Any ideas on this? Below is link to code and and an image showing the layout structure
http://jsbin.com/aliru5/3/edit
You are making this more complicated than it needs to be, try this:
<div id="container">
<div id="content"></div>
<div id="nav"></div>
</div>
#container {
margin:0 auto; /* center container in browser */
overflow:hidden; /* clear floats */
width:900px
}
#content {float:left;width:640px}
#nav {float:right;width:240px}
I'm using this solution, which has worked for me before:
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
I'm currently working on a site, and it's not working. I think it's because I'm using absolute position on some divs on the page. Instead of sticking to the bottom of the page, the footer shows up under the header, on top of the absolutely positioned divs. How can I get sticky footer to work in this situation?
<div id="wrap">
<div id="container">
<div id="myDiv">
...content...
... this div is absolutely positioned
</div><!-- END aboutText -->
</div><!-- END container -->
<div class="push"></div>
</div><!-- END wrap -->
<div id="footer">
...footer content
</div>
Actually it's working now. Not sure why - one of those CSS mysteries. Here's a related question though - How do you set a minimum browser height, so that when someone is resizing the browser (making it smaller), the footer stops moving up and covering the content?
Edit - here's the CSS. The footer sticks to the bottom fine, but it covers the content divs on the page if the browser window is small.
html, body {
height: 100%;
}
#wrap{
width:950px;
margin: 0 auto -80px;
min-height: 100%;
height: auto !important;
height: 100%;
}
.push {
height: 80px;
}
#footer{
height: 80px;
background-image:url(../images/img.jpg);
}
#container{
position:relative;
}
#someDivWithinTheContainer{
position:absolute;
left:230px;
top:300px;
}
The correct answer is position fixed, except that IE6 does not support that property.
Here's what I use for sticking the footer at the bottom. With this method, the footer never overlaps the content, no matter how small the window gets. If you edit it, make sure the padding-bottom on the #body div is greater than the height of the #footer div - this is what prevents overlap. I don't have any pages with absolutely-positioned content, so I don't know how it behaves with that; for floated content, naturally you need to have a clearing block after it, otherwise the #body div shrinks down.
CSS:
html, body {margin:0;padding:0;height:100%;}
#container {min-height:100%;position:relative;}
#body {padding:10px;padding-bottom:2em;zoom:1;}
#footer {position:absolute;bottom:0;width:100%;height:1em;}
html:
<body>
<div id="container">
<div id="body">
(body contents)
</div><!-- #body -->
<div id="footer">
<p>(footer text)</p>
</div><!-- #footer -->
</div><!-- #container -->
</body>
And then to fix IE6, I add a conditional comment:
<!--[if lt IE 7]>
<style type="text/css">
#container {height:100%;}
</style>
<![endif]-->
It's also important to have a doctype declaration so IE will be in standards mode, not quirks mode.
Fixed positions an element relative to the window frame, ignoring whatever scrolling happens within the body of the page.
People will sometimes use absolute because it is similar, but different.
One of the biggest misconceptions about "absolute" is that it is absolutely positioned within a page (at least based on all the people I've interviewed recently). It's not. Absolute means the element is positioned absolutely within its closest containing "positioned" element-- any element that doesn't have "position: static" (the default). If you don't position anything else, then it's the body, as you expect. Once you start using position, you will change what the element is relative to.
I suspect this is what you have run into.