I can't seem to get my footer div to go to the bottom. It is always at the bottom of my container div but my container div is always height:0. I tried setting overflow to hidden in the container div but the height was still 0 and it made all my other divs dissapear. What is wrong? Here is my css and html.
Thanks.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<body background="images/bg.png">
<div id="contentcontainer">
<div id="header">
<img src="images/banner.png" />
</div>
<div id="nav">
</div>
<div id="form">
<!--This is where the form goes-->
</div>
<div id="content">
<!--This is where the content goes-->
</div>
<div id="submission"></div>
<div id="footer">
<p id="footertext">Copyright © 2013 me.com. All rights reserved.</p>
</div>
</div>
</body>
</html>
CSS:
#charset"utf-8";
/* CSS Document */
#submission {
width:500px;
height:175px;
position:absolute;
left:320px;
top:225px;
}
#header {
width: 820px;
height: 200px;
position: absolute;
left: 0px;
top: 0px;
}
#nav {
width: 820px;
height: 50px;
position: absolute;
left: 0px;
top: 150px;
}
#form {
background-color: #FFFFFF;
width: 820px;
height: 175px;
position: absolute;
left: 0px;
top: 200px;
border-bottom: 1px;
border-bottom-color: #666666;
border-bottom-style: dashed;
}
#content {
border: hidden;
background-color: #FFFFFF;
width: 820px;
position: absolute;
left: 0%;
top: 376px;
min-height: 1200px;
height: auto;
}
#footer {
background-color: #666666;
width: 100%;
height: 50px;
position: absolute;
bottom: 0;
}
#footertext {
color: #FFF;
text-align: center;
position: absolute;
}
#contentcontainer {
height: 100%;
width: 820px;
position: relative;
top: -10px;
background-color: #FFF;
left: 20%;
}
The height of your container div is zero because all of the children are positioned as absolute. If you could achieve the same without absolute positioning, you'll notice that the container div actually takes some space.
Its not a good idea to make everything absolutely positioned.
Related
Simply I want the content to scroll under the fixed header but the modal in the top of the header. if I removed the position: relative; from the .content it will work fine but I can't remove it in my real project there are hundreds of children using it and other properties creating new stacking context. thanks for help.
here is html html:
<div>
<div class="header">
</div>
</div>
<div class="content">
<div class="modal">
</div>
</div>
CSS:
.header {
position: fixed;
top: 0;
height: 100px;
width: 100%;
background: blue;
}
.content {
margin-top: 115px;
height: 1000px;
width: 100%;
background: yellow;
position: relative;
}
.modal {
position: fixed;
top: 25%;
left: 25%;
height: 50%;
width: 50%;
background: red;
z-index: 10;
}
and also fiddle
Is it possible to use calc() to center an element, which has a width defined with % ?
e.g.
.wrapper {
width: 100%;
background-color: black;
height: 300px;
position: absolute;
top: 0;
}
.inside {
width: 100%;
margin-left: 30px;
background-color: yellow;
height: 250px;
margin: 20px;
}
.inside h1 {
width: 30%;
background-color: white;
text-align: center;
}
.inside h1 {
position: absolute;
left: calc(50% - 15%);
left: -webkit-calc(50% - 15%);
}
<div class="wrapper">
<div class="inside">
<h1>CENTERED to viewport</h1>
</div>
</div>
This is the slider. It has a "string", which guides through the steps of the slider and the header is always in the middle of the screen. But for design purpose, the line starts a bit to the right and ends a bit to the left, which is given with a width of 80%.
The top is slider no.1 with the string, the second slider, which is synced is the area with the big white square.
Maybe now it is a bit more clear, why I tried what I tried.
Yes, if you create a variable in the css for example:
<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
--Example: 200px;
position: absolute;
left: 50px;
width: calc(100% - var(--Example)/2);
border: 1px solid black;
background-color: yellow;
padding: 5px;
text-align: center;
}
</style>
</head>
<body>
<div id="div1">Some text...</div>
</body>
</html>
If you can have fixed width just add margin: 0px auto. This will center the text horizontally.
.wrapper {
width: 100%;
background-color: black;
height: 300px;
position: absolute;
top: 0;
}
.inside {
margin-left: 30px;
background-color: yellow;
height: 250px;
margin: 20px;
}
.inside h1 {
width: 40%;
background-color: white;
text-align: center;
margin: 0px auto;
}
<div class="wrapper">
<div class="inside">
<h1>CENTERED to viewport</h1>
</div>
</div>
I'm currently working on my layout.
I have two left columns, not begining from the top of the document.
html:
<div id="site-logo">logo</div>
<section id="left-column">
<nav>nav</nav>
</section>
<header>header</header>
<main id="main-section">
<section id="second-left-column">
<nav id="sub-nav">sub nav</nav>
</section>
<section id="content">content</section>
</main>
css:
body { position: relative; }
header {
background-color:red;
height: 50px;
}
#left-column {
position: absolute;
width: 150px;
background-color:black;
height: 100%;
min-height: 100%;
top:100px;
bottom: 0px;
}
#site-logo {
width: 150px;
height: 100px;
background-color:yellow;
position: absolute;
}
#second-left-column{
width: 150px;
position: absolute;
height: 100%;
min-height: 100%;
background-color:grey;
top: 25px;
}
#main-section {
margin-left: 150px;
position: relative;
height: 100%;
min-height: 100%;
}
#content {
margin-left:150px;
background-color: blue;
min-height: 800px;
}
There is the Fiddle
I would like to have both the columns ending at the end of the document, hoefully at the same line than the content (blue)
How can I avoid the different margin bottom?
I can put the logo (yellow) inside the column if needed. We must keep the white strange space inside the layout
Try add a wrap div for all your divs and set it as overflow:hidden, see https://jsfiddle.net/jm4j9h04/4/
<div style="overflow:hidden;">
<div id="site-logo">logo</div>
<section id="left-column">
<nav>
nav
</nav>
</section>
<header>
header
</header>
<section id="main-section">
<section id="second-left-column">
<nav id="sub-nav">
sub nav
</nav>
</section>
<section id="content">
content
</section>
</section>
</div>
body { position: relative;}
header {
background-color:red;
height: 50px;
}
#left-column {
position: absolute;
width: 150px;
background-color:black;
top:100px;
bottom: 0px;
}
#site-logo {
width: 150px;
height: 100px;
background-color:yellow;
position: absolute;
}
#second-left-column{
width: 150px;
position: absolute;
height: 100%;
min-height: 100%;
background-color:grey;
top: 65px;
}
#main-section {
margin-left: 150px;
position: relative;
height: 100%;
min-height: 100%;
}
#content {
margin-left:150px;
background-color: blue;
min-height: 800px;
}
Here is the JSFiddle: http://jsfiddle.net/W2UvH/1/
Very simple implementation of a sticky footer that should stick to the bottom of the screen when there is less content height than the height of the screen. But if the height of the content extends beyond the height of the screen, then the footer should follow along with it.
I don't understand why my footer is stopping half way up the screen.
HTML:
<div id="Canvas">
<div id="Container">
<div id="Wrapper">
</div>
</div>
</div>
<div id="SiteFooter">
<p>Copyright © All Rights Reserved.</p>
</div>
CSS:
body, html {
height: 100%;
}
#Canvas {
position: relative;
min-height: 100%;
}
#Container {
margin: auto;
background-color: #CCC;
max-width: 802px;
padding: 15px 0;
}
#Wrapper {
margin-right: auto;
margin-left: auto;
margin-top: 15px;
width: 730px;
background-color: #999;
border: 1px solid #DEDEDE;
overflow: hidden;
height: 1000px;
}
#SiteFooter {
bottom: 0;
left: 0;
position: absolute;
width: 100%;
z-index: 9000;
background-color: #FF00FF;
height: 45px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #E0E0E0;
}
I see that all your other elements are positions relative. So, not sure what your exact implementation is, but:
#SiteFooter {
position: relative;
}
The above code should also do it for you.
You want the position to be fixed, not absolute.
#SiteFooter {
position: fixed;
}
I'm trying to replicate this mockup:
I know how to create a semi-circle in CSS but I don't want an entire semi-circle. I want just the top, center portion of a much larger circle.
I'm specifically looking for the CSS code to create the black circle in the above mockup. Thanks!
Here is my attempt:
<!DOCTYPE html>
<html>
<head>
<title>Landing Page</title>
<link rel="stylesheet" href="/stylesheets/style.css">
</head>
<body>
<h1>
<img id="logo" src="/images/logo.png">
</h1>
<div id="half_circle">
<div id="footer_container">
<div id="learn">
Learn more.
</div>
<div id="signin">
<div>
Sign in to start callin'it
</div>
</div>
</div>
</div>
</body>
</html>
#half_circle {
width: 100%;
height: 50%;
border-radius: 100% 100% 0 0;
background-color: #111111;
display: block;
position: absolute;
bottom: 0;
}
#footer_container {
display: block;
position: relative;
height: 100%;
width: 100%;
}
#learn {
text-align: center;
padding-top: 3em;
}
#footer_container a {
color:white;
}
#signin {
display: block;
width: 100%;
position: absolute;
bottom: 10%;
margin-right: auto;
margin-left: auto;
}
#signin div {
text-align: center;
}
Just make a big circle and hide it :)
Demo: http://jsfiddle.net/Ye35w/1/
body {
overflow: hidden;
}
.circle {
position: absolute;
top: 65%;
left: -25%;
display: block;
width: 150%;
height: 150%;
background-color: #ccc;
border-radius: 50%;
}