Here is the problem http://jpswebsites.com/rebound/recovery/recovery-education/134-2/
My website content background area stops at 1000px. The min-height property is set to 1000px. Why doesn't it flow to the bottom where it meets the footer like it's suppose to?
The HTML:
<html>
<body>
<div id="swoosh">
<div id="wrapper">
<div id="container">
<div id="int-content">
<div id="main">
CONTENT IS HERE
</div>
</div>
</div>
</div>
</div>
</body>
</html>
The CSS
body{
background: white url(images/tiny_grid.png)repeat;
font: 13px Muli, Arial, Helvetica, sans-serif;
color: #525153;
min-width: 980px;
}
#swoosh {
background: url(images/swoosh.png);
background-repeat: no-repeat;
}
#container {
margin: 10px 16px 0 16px;
background-image: url(images/container_bg.jpg);
min-height: 1000px;
}
#wrapper {
width: 980px;
margin: 0 auto;
background: url(images/cbg.png) no-repeat 0 0;
padding: 0 14px;
}
#int-content {
margin: -5px 2px 15px 30px;
}
#main {
float: left;
width: 484px;
padding: 34px 0 0 20px;
}
I tried putting a height 100% on every item from through as tutorials suggested. This really threw things out of whack.
Thanks in advance all!
Related
I'm trying to get the #footer div to stay at the bottom of the #content div and the #sidebar div, but what once worked elsewhere, doesn't seem to want to work anymore and I'm at a loss.
Works here: http://wiki.tf-575.com/index.php?title=RBL_Store
But not here: http://beta.tf-575.com/index.php?title=RBL_Store
body {
background: #020B12;
font: x-small sans-serif;
color: B3DFFC;
margin: 0;
padding: 0;
text-align: center;
}
#container {
background: #020B12 url(background-tile.png) top left repeat-y;
font: normal;
width: 100%;
margin: 0 auto;
text-align: left;
}
#header {
background: #020B12;
color: B3DFFC;
padding-top: 1px;
padding-bottom: 67px;
}
#sidebar {
background: none;
float: left;
margin-bottom: 84px;
padding: 0 1px;
width: 164px;
top: 80px;
position: absolute;
}
#content {
color: #446C90;
margin-top: -48px;
min-width: 960px;
font-size: 120%;
text-align: left;
padding: 0 20px 0 165px;
}
#footer {
background: url("footer.png") no-repeat scroll left bottom transparent;
clear: both;
color: #446C90;
font-size: 90%;
min-height: 82px;
margin: 0;
padding: 82px 0 0 165px;
text-align: center;
}
<body>
<div id="container">
<div id="header">
<snip />
</div>
<div id="sidebar">
<snip />
</div>
<div id="content">
<snip />
</div>
<div id="footer">
<snip />
</div>
</div>
</body>
Your problem is that on the beta site the sidebar is positioned absolute, so the float is ignored and the clear:both; doesn't push down the footer anymore
try setting the width of the footer to 100%
How can I make the white box (container) extend fully to the bottom of the page?
CSS:
#import url(http://fonts.googleapis.com/css?family=Raleway);
html,body
{
height: 100%;
font-family: 'Raleway', sans-serif;
}
body.app
{
background: #8e44ad;
}
div.container
{
margin: 25px 25px 0px 25px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
min-height: 96vh;
background: #fff;
}
HTML:
<body class="app">
<div class="container">
<header></header>
</div>
</body>
http://jsfiddle.net/0aa9xtpz/
Remove the height: 100%; from html and give body margin: 0;.
I've got a website which I'm still playing with and editing however I'm a little lost with trying to make a footer stick to the bottom of the screen.
I tried ryanfait option (http://ryanfait.com/resources/footer-stick-to-bottom-of-page/) but I cannot see how to make it work with my current theme.
I then tried a different method using absolute position etc but it placed the footer in the middle of the page on my long pages so clearly that wont work.
My current site is: http://goo.gl/PO3OYo and you can see on the front page what I mean about the footer not being right...
My site html is basically this:
<body>
<div id="wrap">
<div id="header"></div
<div id="nav"></div>
<div id="inner"></div>
<div id="footer" class="footer"></div>
</div>
and the CSS is
* {
margin: 0;
}
html {
margin: 0;
padding: 0;
height:100%;
}
body {
background: #000000 url(images/bg.jpg) top center no-repeat;
color: #444444;
font-size: 12px;
font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, Helvetica, sans-serif;
margin: 0 auto 0;
padding: 0;
line-height: 21px;
height:100%;
}
#wrap {
height:auto !important;
margin:0 auto;
min-height:100%;
padding:0;
position: relative; */ I tried this but it breaks long pages */
}
#inner {
background: #FFF;
width: 900px;
margin: 0 auto 0;
padding: 30px;
overflow: hidden;
}
#footer {
background: #161616;
color: #666666;
margin: 0 auto 0;
padding: 20px, 0, 0, 0;
clear: both;
overflow: hidden;
border-top: 1px solid #222222;
height: 40px;
bottom: 0;
left: 0;
width: 100%;
position: absolute; */ I tried this but it breaks long pages */
}
Do you have any ideas how I can get it to work without the position: absolute?
Come on dude, you were so close!
Make sure you follow the same structure:
<body>
<div id="wrap">
<div id="header">fdsf</div>
<div id="nav">ffd</div>
<div id="inner">
content here...
</div>
<div class="push"></div>
</div>
<div id="footer" class="footer">footer</div>
</body>
Then from ryan fait's
#wrap {
min-height: 100%;
height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */
height: 100%;
margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 155px; /* .push must be the same height as .footer */
}
#footer {
background: #161616;
color: #666666;
margin: 0 auto 0;
padding: 20px, 0, 0, 0;
clear: both;
overflow: hidden;
border-top: 1px solid #222222;
width: 100%;
}
Example:
http://codepen.io/EightArmsHQ/pen/YPymWV
I'd really advise having a muck about with my code in Codepen, just to get to grips with it. I sticky footer every footer I've ever made, and it still gets the better of me some times so just keep at it. There will also always be occasions when the above doesn't quite work...
I created a jsfiddle example here
http://jsfiddle.net/Lmazqt4q/5/
But when I try to fix the right column, it doesn't stay a fixed width. I know that with the same code if I put it on the left side and fix that, it'll stay fixed fine. Been awhile since I've played with css so trying to refresh and have gotten frustrated with this. Any help would be appreciated. Thanks!
If you need the code, here it is
HTML:
<div id="wrapper">
<div id="header">
header
</div>
<div id="content">
<div id="topBar">
Top bar
</div>
<div id="leftColumn" class="column">
Content
</div>
<div id="rightColumn" class="column">
Content
</div>
</div>
<div id="footer">
Footer
</div>
</div>
CSS:
body {
background: none repeat scroll 0 0 #CCCCCC;
font: 13px/17px Arial,Helvetica,Verdana,sans-serif;
height: 100%;
margin: 0;
overflow: hidden;
padding: 0;
width: 100%;
}
div#header {
background: none repeat scroll 0 0 #000000;
color: #FFFFFF;
height: 70px;
margin: 0 auto;
width: 90%;
text-align: center;
}
div#wrapper {
height: 100%;
}
div#content {
background: none repeat scroll 0 0 #B4C4EA;
height: 87%;
margin: 0 auto;
overflow: auto;
position: relative;
width: 90%;
}
div#footer {
background: none repeat scroll 0 0 #000000;
color: #FFFFFF;
height: 50px;
margin: 0 auto;
padding: 20px 0 0;
position: relative;
width: 90%;
text-align: center;
}
div#topBar {
background: none repeat scroll 0 0 #444;
color: #FFFFFF;
height: 40px;
text-align: center;
width: 100%;
}
.column {
display: inline-block;
float: left;
height: 200px;
}
div#leftColumn {
border-right: 1px solid #000000;
width: 83.88%;
}
div#rightColumn {
border-left: 1px solid #000000;
width: 1.25em;
}
You could float the right column and give the overflow:hidden property to the left. If you have the right column come before the left in your markup, the left column will fill the remaining width.
HTML
<div id="topBar">Top bar</div>
<div id="rightColumn" class="column">Content</div>
<div id="leftColumn" class="column">Content</div>
CSS
.column {
float: right;
}
div#rightColumn {
width:50px;
}
div#leftColumn {
float:none;
overflow:hidden;
}
JSFiddle
Or, display your columns as table cells, this way would require you to have a container for your columns:
HTML
<div class="columns">
<div id="leftColumn" class="column">Content</div>
<div id="rightColumn" class="column">Content</div>
</div>
CSS
.columns {
display:table;
width:100%
}
.column {
display:table-cell;
}
div#rightColumn {
width:50px;
}
JSFiddle
I have a two column layout which has stopped working while tweaking to get rid of the double scroll bars on body. Now I have one scroll bar on wrap which is what I wanted but the contents somehow overlap by the width of the scroll bar.
html, body {
margin:0;
padding:0;
font: 12px Geneva, Verdana, sans-serif;
color: #1e1f21;
vertical-align: top;
height: 100%
}
body {
background: #fff url(../esimages/cubes.png) no-repeat left bottom fixed;
}
#wrap {
background: #f5f5f5;
margin: 0 auto;
width: 960px;
height: 100%;
}
#logo {
height: 75px;
width: 100%;
background: #1e1f21;
padding: 10px 0px 5px 0px;
}
#header {
height: 30px;
width: 100%;
background: #1e1f21;
margin:0px;
padding: 0px;
}
#container {
overflow: hidden;
height: auto;
background: #f5f5f5;
width: 100%;
margin: 0px;
padding: 0px;
text-align: left;
}
#content1 {
min-height: 100%;
background: #f5f5f5;
padding: 20px 20px 20px 40px;
margin: 0
}
#content2 {
float: right;
width: 290px;
min-height: 100%;
background: #f5f5f5;
padding: 20px 0px 20px 10px;
margin: 0
}
#footer {
clear: both;
padding: 10px;
background: #1e1f21;
text-align: center;
line-height: 200%;
font-size: 10px;
}
The two content boxes don't fit in the container side by side as they should. I have tried with different reduced fixed widths for content1 but it makes no difference at all and the column width stays the same no matter what. I am tearing my hair out because it's just not logical!
<body>
<div id="wrap">
<div id="logo"></div>
<div id="header"></div>
<div id="container">
<div id="content2">
<div class="box0">
<ul>
<li></li>
</ul>
</div>
</div>
<div id="content1">
<p></p>
</div>
</div>
<div id="footer" align="center"></div>
You need to put a width and float: left on content1. Also keep in mind that the total width + padding cannot exceed the container's width.
Also, you're missing a semicolon after margin: 0 for content1