I've been trying to make this work for a while and it never seems to work out. I think its because my HTML structure is slightly different than the ones in the example. My problem is, on pages that are smaller than the viewport, the footer is not automatically pushed to the bottom, and the #main div is not extended to the footer.
Here's my HTML:
<html>
<body>
<div id='container'>
<div id='main'>
<div id='content'> </div>
</div>
<div id='footer'> </div>
</div>
</body>
</html>
And here would be my basic CSS, without implementation of CSS Sticky Footer:
div#container {
width:960px;
margin:0 auto;
}
div#main {
background-color:black
padding-bottom:30px;
}
div#content {
width:425px;
}
div#footer {
position:relative;
bottom:0;
width:inherit;
height:90px;
}
To clarify: Lets say the background of div#main is black. Now lets say, on a page, there's only 1 line of text in div#main. So I want to make the #main area extend all the way down to the footer (which is at the bottom of the page) even when there isn't enough content to force that to happen. make sense?
And One more thing. The #main area has a different background color than the body. So the #main background has to extend all the way down to the footer, cause if there's a gap, the body color peaks through instead
Try making the footer position:fixed.
http://jsfiddle.net/QwJyp/
Update
I'm a little bit closer: http://jsfiddle.net/QwJyp/1/. Perhaps somebody can build off it. If you remove the line with !important defined, it allows the main with height:100% to show up. But there's still a lot of extra padding at the bottom of the div which I can't figure out. I'll continue later when I have more time. Good luck! Hopefully this helps with some direction.
Here you go: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
EDIT
Using the technique in the article above (tested - and works in fiddle):
HTML
<html>
<head>
</head>
<body>
<div id='container'>
<div id='main'>
<div id='content'>Hello</div>
</div>
<div id='footer'> </div>
</div>
</body>
</html>
CSS
html, body {
margin: 0; padding: 0; height: 100%;
}
div#container,div#main {
background-color: #333;
}
div#container {
min-height:100%; width:960px; margin:0 auto; position:relative;
}
div#main {
padding-bottom:90px; margin:0; padding:10px;
}
div#content {
width:425px;
}
div#footer {
position:absolute; bottom:0; width: 100%; height:90px; background-color: #ADF;
}
idea is to have #main with padding-bottom x, container min-height: 100%, footer after container and with margin-top -x
Try using with absolute position for the footer div
<div id='container'>
<div id='main'>
<div id='content'> </div>
</div>
<div id='footer'> </div>
</div>
Make sure that body height is 100%
html,body
{ height:100%;
padding:0;
margin:0;
}
div#container {
width:960px;
margin:0 auto;
position:relative;
height:100%;
}
div#main {
background-color:black;
padding-bottom:90px;
}
div#content {
width:425px;
}
div#footer {
position:absolute;
bottom:0;
width:inherit;
height:90px;
width:960px;
}
I know the html is structured differently than what you're working with, but perhaps you can alter your core structure to mimic this (because it works): CSS Sticky Footer
It looks like this group has done a lot of research on the topic and have found this it be the best (maybe the only?) way...through many different versions.
Related
I have a (relatively) simple layout, with fixed header and footer divs. The content div is split in two "full height" divs with display: inline-block;. The left div is used for navigation and the right one for the actual content and has overflow-y: scroll;. The problem is that I cannot set the width of the right div to fill the remaining space. I have tried using float (as a last resort) but the right div was pushed downwards and, honestly, I'd prefer not to use floats.
Is filling the remaining width possible in my scenario? I would very much like to not hardcode the width of the right div.
Here's the JSFiddle example.
Simple HTML structure:
<html>
<head></head>
<body
<div id="container">
<div id="header">This is the header area.</div>
<div id="content">
<div id="leftContent"> </div>
<div id="textContent">
<p>Hello world (and other content)</p>
</div>
</div>
<div id="footer">This is the footer area.</div>
</div>
</body>
</html>
CSS excerpt:
html, body { margin:0; padding:0; height:100%; }
#container { position:relative; margin:0 auto; width:750px; overflow:hidden;
height:auto !important; height:100%; min-height:100%; }
#header { border-bottom:1px solid black; height:30px; }
#content { position:absolute; top:31px; bottom:30px; overflow-y:none; width:100%; }
#leftContent { display:inline-block; height:100%; width:200px;
border-right:1px solid black; vertical-align:top; }
#textContent { display:inline-block; height:100%; vertical-align:top; overflow-y:scroll;
width:540px; /*would like to not have it hardcoded*/ }
#footer { position:absolute; width:100%; bottom:0; height:30px; }
Edit:
Thanks to Prasanth's answer, I was able to achieve what I wanted. The solution was to set
display:flex; flex-direction:row; on the #content div and
width: 100%; on the #textContent div.
Testing on IE 11 (and downwards in compatibility mode) did not produce unwanted results.* The new version can be found here.
*Edit: This method works properly in IE11. In IE10, the scrollbars do not appear if the content of the #content div requires scrolling. The layout works thought. In IE <10 it does not work at all.
You can use Flexbox to achieve this
Go through this and you will get what you need
.content{ display:flex } .content > div { flex: 1 auto; }
and beware of browser support
I'm trying to achieve, that the div's will behave like an example on picture, using css:
Is there any clean way to do this? I achieve this using javascript to calculate "left" div height and "main" div width and height. But i dont like this solution...is there any way to do this using css only?
Edit:
Page must not have scrollbar...so page's height is always max 100%, and no more...
thanks
If the sidebar (or any other div) is 100% height, and on top you have a 30px header, so that causes your container to be 100% + 30px height.
In the future you will have in css3 calc():
http://hacks.mozilla.org/2010/06/css3-calc/
This will solve your problem.
But for now you can add overflow: hidden; to the html and body section, but I recommend calculate the height of the sidebar ( container height - header height) using Javascript.
Check fiddle here
If you mean the two-column layout, you do it with pure CSS like this:
.container {
background-color: #aaaaaa;
}
.left {
float: left;
width: 100px;
clear: left;
}
.right {
margin-left: 100px;
background-color: #888888;
}
and HTML:
<div class="container">
<div class="left">left</div>
<div class="right">right</div>
</div>
Live demo: jsFiddle
The div on top can be achieved without any special CSS. To place something below (a footer for example), you'll need to use clear: both.
Without any code it is hard to determine what you want. Here is a extremely simple version of what I believe you want.
HTML:
<div id="header">
</div>
<div id="side">
</div>
<div id="content">
</div>
CSS:
#header {
width:100%;
height:50px;
}
#side {
width:300px;
height:100%;
float:left;
}
#content {
width:660px;
height:100%;
float:left;
}
jsFiddle
How to, as the title suggests, make a div didn't move. So, when the user scroll our web, the content is moving but not the div-element. If let say the div-element I want to implement is a sidebar, how can I do that with only a CSS script? (or with HTML5 power).
<style type="text/css">
div.fixedDiv{position:fixed;top:0;left:0;}
</style>
You can try this... Jsfiddle
Html
<div class="wrapper">
<div class="fixed"></div>
</div>
Css..
.wrapper { position: relative; height: 1500px; background:red; }
.fixed { position: fixed; left:0; top:50; width:100px; height:100px; background: green; }
<style>
#yourdiv{
position:absolute;
left:100px;
top:150px;
}
</style>
<div id="yourdiv">Hello I'm div</div>
Adjust the coordinates left and top as you desire.
Anyways you can see css positionings here.
I'm trying to create a simple markup with header+content+footer+sidebar. The sidebar must float above the header and content element, and if it's taller than the content, it must push the footer down (like this: http://jsfiddle.net/gWLFN/7/).
The HTML:
<div id="wrapper">
<div id="sidebar">sidebar</div>
<div id="header">header</div>
<div id="content">content</div>
<div style="clear:both"></div>
<div id="footer">footer</div>
</div>
The CSS:
#wrapper { width:500px }
#header { width:500px; height:100px; background-color:red }
#content { width:500px; height:300px; background-color:green }
#footer { width:500px; height:100px; background-color:blue }
#sidebar {
float:right;
margin-top:50px;
width:100px;
height:500px;
background-color: yellow;
border:1px solid white;
}
The problem is that in IE7, the sidebar pushes down the other elements. I think it's because the total widths of header+sidebar is greater than wrapper width. I have found a lot of posts about float:right problem in IE7, but all of them are for widths that doesn't exceede the wrapper.
I have choosen float:right instead of absolute positioning because the position of the footer must depend on sidebar height (if someone knows how to do this with absolute positioning, perfect!).
I would appreciate any idea to solve this.
You are almost there, the order of the HTML structure is slightly muddled and you are forcing CSS widths rather than letting the browser work out the best fit.
You can remove the width values from the nested CSS classes (except #sidebar) as, by default, they take up any remaining width unless they have one specified. Then you just need to swap #header and #sidebar round in the HTML structure and you are pretty much sorted.
Please note, since we have swapped round #header and #sidebar, the margin-top within #sidebar has been changed.
CSS
#wrapper {
width:500px;
}
#header {
height:100px;
background-color:red;
}
#content {
height:300px;
background-color:green;
}
#footer {
height:100px;
background-color:blue;
}
#sidebar {
float:right;
margin-top: -50px; /*changed this to -50px */
width:100px;
height:500px;
background-color: yellow;
border:1px solid white;
}
HTML
<div id="wrapper">
<div id="header">header</div>
<div id="sidebar">sidebar</div>
<div id="content">content</div>
<div style="clear:both"></div>
<div id="footer">footer</div>
</div>
Working example: http://jsfiddle.net/gnx2z/
I'm looking for CSS rules to set a simple page layout.
I want a header div that has a fixed height, and extends fully across the top of the viewport from left to right,
I want a main content div that completely fills the remainder of the viewport.
There should be no area within the viewport that is not within one of these two divs, and neither div should extend beyond the viewport.
And these should remain true as I resize the browser. Regardless of what I put in either div. (Assuming, of course, that I'm not using overflow:visible.)
Seems simple enough, but I've not been able to make it work.
What about something like this: http://jsfiddle.net/WqCYh/
For the sake of people not wanting to click the link, here's the HTML and CSS:
<style type="text/css">
#header
{
height:100px;
background-color:red;
position:absolute;
top:0px;
left:0px;
right:0px;
}
#body
{
background-color:blue;
position:absolute;
top:100px;
left:0px;
bottom:0px;
right:0px;
}
</style>
<div id="header">
Header
</div>
<div id="body">
Body
</div>
Are you sure you need your content div to be the height of the browser? You can apply a background color to the body to simulate full viewport coverage.
Anyway here is the 100% height code...
CSS
html,body { height: 100%; }
#header { height: 100px; background: red; }
#content { min-height: 100%; background: blue; }
#inner { padding: 20px; }
XHTML
<div id="content">
<div id="header">
<h1>Header</h1>
</div>
<div id="inner">
<p>Content</p>
</div>
</div>