I'm trying to make my footer stick to the bottom of the page but somehow it just can't do. I've looked in the internet for answers with no luck, so I decided to give it a shot in here.
http://jsfiddle.net/f54eq3w8/
html:
<div id="container">test</div>
<footer></footer>
css:
html{
height:100%;
position:relative;
min-height:100%;
}
body{
height:100%;
padding:0;
display:inline-block;
width:100%;
min-height:100%;
}
footer{
position:relative;
background-color:#003300;
color:red;
width:100%;
height:100px;
border-top:4px solid #B8B8B8;
}
#container{
width:1024px;
margin:auto;
margin-top:60px;
min-height:100%;
}
JSFiddle - DEMO
Use an extra div inside container to push the footer with the same height as footer's height and apply bottom margin the negative value of the footer's height to container.
HTML:
<div id="container">
<div class="footer-push">
</div>
</div>
<footer></footer>
CSS:
html, body {
background-color: #00FF00;
height: 100%;
margin: 0px;
}
#container {
z-index: 999;
background-color: #00FF00;
position: relative;
width: 1024px;
margin: 0 auto;
min-height: 100%;
margin: 0px auto -104px auto;
}
.footer-push {
position: relative;
height: 104px;
}
footer {
z-index: 99999;
position: relative;
height: 100px;
background-color: #003300;
width: 100%;
border-top:4px solid #B8B8B8;
}
change your CSS like this. Please note that besides the footer, I got rid of the html styling, which is the culprit of your issues
body{
height:100%;
padding:0;
display:inline-block;
width:100%;
min-height:100%;
}
footer{
position:absolute;
bottom:0;
background-color:#003300;
color:red;
width:100%;
height:100px;
border-top:4px solid #B8B8B8;
}
#container{
width:1024px;
margin:auto;
margin-top:60px;
min-height:100%;
}
See your updated fiddle
Related
For the life of me, I cannot figure out why this code can't work. I am trying to set up a personal website and before I put my content in place, I want to have all of the areas setup and have it be responsive. I want a 3x3 grid of boxes where I can display my work (div id = container), but every time I introduce the ninth div block specifically (p9), the arrangement breaks for seemingly no reason. Here's the code for the desktop layout:
body{
background-color:#FFB51E;
width:100%;
height:1000px;
position:absolute;
}
/* unvisited link */
a:link {
text-decoration:none;
background-color: #2A56C4;
color:#fff;
padding:15px;
border-radius:26px;
}
/* visited link */
a:visited {
color: fff;
}
/* mouse over link */
a:hover {
background-color:#FF581E;
}
/* selected link */
a:active {
color:#FF581E;
background-color:fff;
}
#header{
width:80%;
height:160px;
margin: 0 auto;
position:relative;
display:block;
}
.left{
color:#fff;
text-align: left;
margin-top:25px;
margin-bottom:15px;
font-size:36px;
position:relative;
float:left;
width:310px;
display:block;
}
.right{
text-align:right;
width:300px;
float:right;
padding-top:5px;
margin-bottom:15px;
font-size:24px;
position:relative;
float:right;
z-index:2;
}
.works{
text-align:center;
position:relative;
float:left;
left:30%;
font-size:25px;
width:100px;
display:inline-block;
}
.about{
text-align:center;
position:relative;
float:right;
right:30%;
font-size:25px;
width:100px;
display:inline-block;
}
.border{
background-color:none;
width:100%;
height:85px;
margin:0 auto;
border:none;
border-bottom: 6px solid #000;
float:none;
position:relative;
}
/*body stuff*/
#container{
position:static;
display:block;
margin:0 auto;
font-size:0px;
margin-top: -10px;
width:80%;
height:550px;
}
.p1{
background-color: aliceblue;
color:000;
font-size:12px;
width:230px;
z-index: 1;
float:left;
margin: 0px;
padding:0px;
}
.p2{
background-color: red;
width:230px;
z-index: 1;
float:left;
padding:0px;
}
.p3{
background-color: blue;
width:230px;
z-index: 1;
float:left;
padding:0px;
margin:0px;
}
.p4{
background-color: purple;
width:230px;
z-index: 1;
float:left;
margin-top: 20px;
padding:0px;
}
.p5{
background-color: green;
width:230px;
z-index: 1;
float:left;
margin-top: 20px;
padding:0px;
}
.p6{
background-color: brown;
width:230px;
z-index: 1;
float:left;
padding:0px;
margin-top: 20px;
}
.p7{
background-color: purple;
width:230px;
z-index: 1;
float:left;
margin-top: 20px;
padding:0px;
}
.p8{
background-color: green;
width:230px;
z-index: 1;
float:left;
margin-top: 20px;
padding:0px;
}
.p9{
background-color: green;
width:230px;
z-index: 1;
float:left;
margin-top: 20px;
padding:0px;
}
I'm about five minutes from drop kicking my laptop out the window, so any kind of help would be greatly appreciated! Let me know if you need code for the html as well.
Something to get you started. I don't have the HTML you use so I focused on the container.
I defined it as a flexbox which makes it responsive. Each item has a width of 33% and a height of 30px (for demo purpose).
/*body stuff*/
#container {
display: flex;
flex-wrap: wrap;
margin: 0 auto;
margin-top: -10px;
width: 80%;
}
[class^="p"] {
width: 33%;
height: 30px;
}
.p1 {
background-color: aliceblue;
}
.p2 {
background-color: red;
}
.p3 {
background-color: blue;
}
.p4 {
background-color: purple;
}
.p5 {
background-color: green;
}
.p6 {
background-color: brown;
}
.p7 {
background-color: yellow;
}
.p8 {
background-color: red;
}
.p9 {
background-color: green;
}
<div id="container">
<div class="p1"></div>
<div class="p2"></div>
<div class="p3"></div>
<div class="p4"></div>
<div class="p5"></div>
<div class="p6"></div>
<div class="p7"></div>
<div class="p8"></div>
<div class="p9"></div>
</div>
First: I just added this CSS rule at the bottom (to overwrite the other rules) and now it works as desired:
#container > div {
width: 230px;
margin-top: 20px;
}
https://jsfiddle.net/bhzw7o60/1/
Second: For elements that have common parameters (like your floated elements which all have the same width, size and margin-top) you should use a * common* class for all of them and additional seperate classes for the individual elements which only contain the differing properties. My above rule does this for width and margin-top. You could also add the height to it, and only define the background-color in the individual classes. BTW: z-index does nothing in this case, you can delete that from all the rules.
I have a div that needs to be centered horizontally inside another div. The problem is that the inner div is almost centered - i.e., it is centered but with a left margin/padding (I can't determine which) of about 5-10px. How can I make the inner div centered within the outer div?
HTML:
<div class="outer">
<div class="inner">
// stuff
</div>
</div>
CSS:
.outer {
position:relative;
display:inline-block;
width:100%;
}
.inner {
position:relative;
padding:10px;
width:200px;
height:200px;
}
you could do something like this:
#parent {
display: table-cell;
width: 300px;
height: 300px;
vertical-align: middle;
text-align: center;
border: 1px solid black;
}
#child {
display: inline-block;
width:100px;
height: 100px;
border: 1px solid black;
}
here's a fiddle: http://jsfiddle.net/De36Y/
I would try to make the inner div have a position: absolute, then set margin equally like the following:
CSS:
.outer {
position:relative;
display:inline-block;
width:100%;
}
.inner {
position: absolute;
margin-left: auto;
margin-right: auto
width:200px;
height:200px;
}
On .inner use:
width: 50%;
margin: 0 auto;
You could do this
.outer {
position:relative;
display:inline-block;
width:100%;
text-align: center;
}
.inner {
position:relative;
display: inline-block;
padding:10px;
width:200px;
height:200px;
}
How about this code?
.inner {
position:relative;
padding:10px;
width:200px;
height:200px;
/* included */
left:50%;
margin-left:-100px;}
hi i would like to make full height for a left and side bars i must be 100% height but it made a little buggy my css looks like
html{
height: 100%;
min-height: 100%;
}
body{
height: 100%;
}
.container{
background-color: #999;
padding: 20px;
height:100%;
}
.sidebar{
background-color: #9999ff;
float:left;
width:30%;
height:100%;
}
.content{
background-color: #99ff99;
float:left;
width:70%;
height:100%
}
this is my fiddle
demo
if i did height:100% for childs means most of the contents are get overflowed.
display .container as table:
.container{
background-color: #999;
padding: 20px;
display:table;
height:100%;
}
.sidebar{
background-color: #9999ff;
display:table-cell;
width:30%;
}
.content{
background-color: #99ff99;
display:table-cell;
width:70%;
}
http://jsfiddle.net/56C9v/15/
i've updated your fiddle
HTML:
<div class="container">
<div class="wrapper">
<div class="sidebar"></div>
<div class="content"></div>
</div>
</div>
CSS:
html{
height: 100%;
min-height: 100%;
}
body{
height: 100%;
}
.container{
background-color: #999;
padding: 20px;
}
.wrapper {
position: relative;
}
.sidebar{
background-color: #9999ff;
float:left;
width:30%;
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
}
.content{
width: 70%;
background-color: #99ff99;
float:right;
}
Can you please take a look at JSfiddle and let me know how I can position the div with .caption at the bottom of the div with class .wrapper.
I already tried to add position:absolute; bottom:5px; rules to .caption but it positioned the caption div out of the .wrapper !
<div class="wrapper">
<div class="caption">Test</div>
<div class="main"></div>
</div>
here is the css rules
.wrapper{
height:300px;
width:300px;
background-color:yellow;
}
.main{
height:100%;
width:100%;
}
.caption{
height:10%;
width:100%;
background: rgb(0, 0, 0) ; opacity: 0.7;>
margin-bottom:5px;
color:white;
}
The position: absolute should work but you'll need to set .wrapper as:
.wrapper {
position: relative;
}
Demo here: http://jsfiddle.net/sBxP2/4/
try this
http://jsfiddle.net/shall1987/MwJsG/
CSS
.wrapper{
height:300px;
width:300px;
background-color:yellow;
position: relative;
}
.main{
height:100%;
width:100%;
}
.caption{
height:10%;
width:100%;
background: rgb(0, 0, 0) ; opacity: 0.7;>
margin-bottom:5px;
color:white;
position: absolute;
bottom: 0;
}
you can update your css like this
http://jsfiddle.net/shall1987/MwJsG/
.wrapper{
height:300px;
width:300px;
background-color:yellow;
position:relative;
}
.main{
height:100%;
width:100%;
}
.caption{
height:10%;
width:100%;
background: rgb(0, 0, 0) ; opacity: 0.7;
margin-bottom:5px;
color:white;
position:absolute;
bottom:0;
}
Take a look at this image...
All of the boxes are divs. How can I position them like that? Here's what I got so far...
#container{
position:relative;
padding:25px;
}
#div1 {
float:left;
margin-left: 50px;
margin-top: 50px;
width: 300px;
padding:25px;
}
#div2 {
clear:both;
margin-left: 50px;
width: 300px;
padding:25px;
}
#div3 {
float:right;
margin-right: 50px;
margin-top: -100px;
width: 300px;
padding:25px;
}
With the code above..div1 and div2 is position properly somehow. But div3 is on the lower part of the page.
I would float:right div3 and have it first in your HTML and then just have div1 and div2 not floated.
Something like this: http://jsfiddle.net/eErVT/
...or you could wrap div1 and div2 in its own wrap, and float that.
Wrap your left divs in a single column. So your markup would look something like this:
<div id="container">
<div id="main">
<div id="div1">div1</div>
<div id="div2">div2</div>
</div>
<div id="div3">div3</div>
</div>
Then your css would look like this:
#container{
position:relative;
padding:25px;
}
#main {
float:left;
width:100px;
}
#div1 {
padding:25px;
}
#div2 {
padding:25px;
}
#div3 {
float:right;
width: 100px;
padding:25px;
}
Here's an example fiddled: http://jsfiddle.net/neilheinrich/ez2rQ/
An alternate that doesn't require adding extra divs is to use absolute positioning on div3, along with extra padding on container to create space for div3.
See the fiddle here: http://jsfiddle.net/y2fJS/
CSS:
div {
border: 1px solid blue;
}
#container{
position:relative;
border-color: green;
padding: 50px 200px 50px 50px; /* right padding (150) should include div3 width+padding+margin */
}
#div1 {
padding:25px;
}
#div2 {
padding:25px;
}
#div3 {
position: absolute;
top: 50px;
right: 50px;
width: 50px;
padding:25px;
}
EDIT: One problem I forgot to mention is that the absolutely positioned div3 will no longer contribute to the height of the outer div. So, if you have a long div3 this may not work without some additional trickery.
Here this looks like your picture, but i would suggest looking at sites like http://www.cssplay.co.uk/ for site design.
<html>
<head>
<title>Div Positioning</title>
<style type='text/css'>
#div1
{
position: absolute;
top: 25px;
left: 25px;
height: 200px;
width: 200px;
border: 1px solid red;
}
#div2
{
position: absolute;
top: 250px;
left: 25px;
height: 200px;
width: 200px;
border: 1px solid red;
}
#div3
{
position: absolute;
top: 25px;
left: 250px;
height: 425px;
width: 300px;
border: 1px solid red;
}
</style>
</head>
<body>
<div id='div1'></div>
<div id='div2'></div>
<div id='div3'></div>
</body>
</html>