I'm creating a website which seems to work fine with the following method on a desktop computer, but when I test it on an iPad and the content extends over the footer, the footer doesn't get pushed down, but overlaps the content.
My HTML is:
<body>
<div id="wrapper">
<div id="header">
....
</div>
<div id="main">
<div id="mainuser">
<span id="left"><jdoc:include type="component" /></span>
<span id="right"><jdoc:include type="modules" name="position-7" style="xhtml" />
</span>
</div>
</div>
<div id="ft">
...
</div>
</div>
</body>
Here's the CSS:
html {
height: 100%;
padding:0;
margin:0;
}
body{
height:100%;
margin:0;
padding:0;
text-align:left;
}
#wrapper {
min-height: 100%;
position:relative;
}
#main{
width:700px;
background:transparent;
}
#mainuser {
margin-top:40px;
width:700px;
text-align:left;
background:#fff;
}
#left {
float:left;
width: 540px;
}
#right {
float:right;
width:150px;
text-align:left;
background:transparent;
color: #e10000;
margin-right:5px;
margin-top:5px;
}
#ft {
width:100%;
height:60px;
border-top:1px solid #527988;
position:absolute;
left:0;
bottom:0;
}
I also tried to insert a div between the content and the footer with clear:both, but it didn't work.
Related
I have a sidebar which is only taking up enough space for the content it contains rather than taking up 100% of the wrapper which contains all elements, the image below should get across what I mean:
Here is some of the code I'm working with:
HTML
<body>
<div id="wrapper">
<div id="top">
...
</div>
<div id="topnav">
<...
</div>
<div id="banner">
<img id="img" src="images/2for20.png" alt="banner1" />
</div>
<div id="subbanner">
...
</div>
<div id="content">
...
</div>
<div id="rightSide">
<p>This is the sidebar</p>
</div>
<div id="footer">
<p>© Copyright 2015 Celtic Ore, All Rights Reserved</p>
</div>
</div>
</body>
CSS
#wrapper
{
width:1000px;
height:100%;
margin:0px auto;
background-color:#efefef;
}
#rightSide
{
float:right;
position:relative;
width:220px;
height:100%;
background-color:#efefef;
}
#rightSide img
{
vertical-align:middle;
}
#rightSide h2
{
padding:10px 0px;
}
#rightSide p
{
padding:10px 0px;
}
#footer
{
width:100%;
padding: 10px 0px;
background-color:#000000;
float:left;
}
#footer p
{
color:white;
text-align:center;
}
This works for me:
.container {
overflow: hidden;
....
}
#sidebar {
margin-bottom: -101%;
padding-bottom: 101%;
....
}
> #wrapper
{
width:100%; //change this to 100%
height:100%;
margin:0px auto;
background-color:#efefef;
}
#rightSide
{
float:right;
position:relative;
width:100%; //Change this to 100%
height:100%;
background-color:#efefef;
}
#rightSide img
{
vertical-align:middle;
}
#rightSide h2
{
padding:10px 0px;
}
#rightSide p
{
padding:10px 0px;
}
#footer
{
width:100%;
padding: 10px 0px;
background-color:#000000;
float:left;
}
#footer p
{
color:white;
text-align:center;
}
I am trying to build a website that has three floating columns in the middle of the page. I have a container wrapping around everthing but it will not extend fully. Is there something I am doing wrong?
Thanks
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style/style.css">
</head>
<body>
<div id="container">
<div id="header">
<div id="navbar"></div>
</div>
<div id="topper">This is the Topper</div>
<div id="colone">This is column one</div>
<div id="coltwo">This is column two</div>
<div id="colthree">This is colum three</div>
<div id="footer">This is the footer</div>
</div>
</body>
</html>
#charset "utf-8";
/* CSS Document */
#container
{
background-color:#CCC;
min-height:100%;
}
#header
{
background-color: #000;
width:100%;
float:left;
}
#navbar
{
background-color: #FFF;
border-radius: 10px;
height:75px;
width:70%;
margin: 0 auto;
margin-top:10px;
margin-bottom:10px;
border-radius:10px;
}
#topper
{
background-color:#000;
height: 175px;
}
#colone
{
background-color:#FFF;
float:left;
margin-left:15px;
margin-top:-20px;
height:150px;
}
#coltwo
{
background-color:#FFF;
float:left;
margin-left:15px;
margin-top:-20px;
height:150px;
}
#colthree
{
background-color:#FFF;
float:left;
margin-left: 15px;
margin-top:-20px;
height:150px;
}
#footer
{
}
You need to clear your float. This is what it looks like.
http://jsfiddle.net/ZT59d/
<div id="container">
<div id="header">
<div id="navbar"></div>
</div>
<div id="topper">This is the Topper</div>
<div id="colone">This is column one</div>
<div id="coltwo">This is column two</div>
<div id="colthree">This is colum three</div>
<div class="clear"></div>
<div id="footer">This is the footer</div>
</div>
#container {
background-color:#CCC;
min-height:100%;
}
#header {
background-color: #000;
width:100%;
float:left;
}
#navbar {
background-color: #FFF;
border-radius: 10px;
height:75px;
width:70%;
margin: 0 auto;
margin-top:10px;
margin-bottom:10px;
border-radius:10px;
}
#topper {
background-color:#000;
height: 175px;
}
#colone {
background-color:#FFF;
float:left;
margin-left:15px;
margin-top:-20px;
height:150px;
}
#coltwo {
background-color:#FFF;
float:left;
margin-left:15px;
margin-top:-20px;
height:150px;
}
#colthree {
background-color:#FFF;
float:left;
margin-left: 15px;
margin-top:-20px;
height:150px;
}
.clear
{
clear:both;
}
#footer {
}
If you don't mind, I'm going to give you some suggestions on how to improve your code.
First, you're using HTML5 but you're not using some of the new elements. Let's replace them.
<header>
<nav></nav>
</header>
<main>
<div id="topper">This is the Topper</div>
<div id="colone">This is column one</div>
<div id="coltwo">This is column two</div>
<div id="colthree">This is colum three</div>
<div class="clear"></div>
</main>
<footer>This is the footer</footer>
You're also using ids for everything. Trust me, you don't want to do that. Realistically, you should be using ids sparingly. I'm at the point now that the only time I use an id is if I need to target something with javascript.
<header>
<nav></nav>
</header>
<main>
<div id="topper">This is the Topper</div>
<div class="column">This is column one</div>
<div class="column">This is column two</div>
<div class="column">This is colum three</div>
<div class="clear"></div>
</main>
<footer>This is the footer</footer>
Here's what you're new css would look like.
body {
background-color:#CCC;
min-height:100%;
}
header {
background-color: #000;
width:100%;
float:left;
}
nav {
background-color: #FFF;
border-radius: 10px;
height:75px;
width:70%;
margin: 0 auto;
margin-top:10px;
margin-bottom:10px;
border-radius:10px;
}
#topper {
background-color:#000;
height: 175px;
}
.column {
background-color:#FFF;
float:left;
margin-left:15px;
margin-top:-20px;
height:150px;
}
.clear {
clear:both;
}
I left #topper in because it's unusual. It's hard for me to tell exactly what you're trying to achieve with it.
Here's the fiddle with everything together.
Easy way to fix this is to add such CSS rules:
#footer
{
clear: both;
}
#container {
overflow: hidden;
}
DEMO
Obviously, you have some problems understanding how float property works. You should investigate it more careful. Especially I would recommend to check out clearfix hack.
Hate to bring another sticky footer question but after hours of looking for answers over the course of two days I give up.
Here's my the page in question: http://aaronisdead.com/sites/kanwakan/kanwakan.html
Here's my HTML architecture
<html>
<head>
</head>
<body>
<header>
<div class="headercenter"><img src="kanwakanheader.png"></div>
</header>
<div class="mainwrap">
<div class="left">
<img src="featonspin.png">
<iframe src="https://player.vimeo.com/video/78659516" width="464" height="257" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<div class="right">
<img src="featoncarson.png">
<iframe src="https://player.vimeo.com/video/86751056" width="464" height="257" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<div class="bandpic">
<img src="bandpic.jpg">
</div>
<div class="text">
</div>
</div>
<div class="wrapper">
<div class="push"></div>
</div>
<div class="footer">
<div id="footwrap">
<div id="leftcol">
<img id="email" src="bottomcontact.png">
</div>
<div id="rightcol">
<img id="andlogo" src="bottomlogos.png">
</div>
</div>
</div>
Annnd here's my CSS.
.mainwrap {
margin-right:auto;
margin-left:auto;
display:block;
width:950px;
top:75px;
height:100%;
}
.right {
position:relative;
width:50%;
margin-right:auto;
margin-left:auto;
display:block;
float:right;
padding:0 0 30 0;
}
.left {
position:relative;
padding-bottom:0px;
width:50%;
margin-right:auto;
margin-left:auto;
display:block;
float:right;
left:10px;
}
/*HEADER*/
.headercenter {
width:375px;
margin-right:auto;
margin-left:auto;
display:block;
}
header {
position:relative;
width:100%;
height:75px;
background:#000000;
}
/*FOOTER STUFF*/
#email, #andlogo {
height:75px;
}
#footwrap {
width:950px;
height:75px;
margin-right:auto;
margin-left:auto;
display:block;
}
#leftcol {
float:left;
width:50%;
}
#rightcol {
float:right;
width:50%;
}
/*ABSOLUTELY NECESSARY PAGE PROPERTIES*/
body {
background-image:url("background.jpg");
background-attachment: fixed;
background-height:100%;
background-repeat:repeat;
background-position:center;
}
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -75px;
}
.footer {
width:100%:
position:absolute;
background:#000000;
z-index:999;
}
.footer, .push {
height: 75px;
}
I'm not sure what's causing this; I've included a lot of information because of this. If you're taking the time pour through all this you would be helping me in a very big way in understanding sticky footers, a skill I'll be able to use as a web developer forever. Thank you.
Remove height: 100% from .mainwrap and move it inside the .wrapper.
I made a div have class footer and want footer to be in the end of the page not fixed actually.
it is showing when the data of content element finish , i mention min-height of content equal t 90% so that if there is no more data then also in this case footer should be end of the page.
here is my css code
.header-cont
{
width:100%;
position:absolute;
top:0px;
}
.header {
height:50px;
background:#3399FF;
border:1px solid #CCC;
width:100%;
margin:0px auto;
text-align:center;
}
.footer{
position:absolute;
text-align:center;
margin-bottom:0px;
margin-right:0px;
margin-left:0px;
width:100%;
background-color: #3399FF;
height:35px;
}
.footer-data
{
padding:7px;
text-align:center;
font-size:18px;
}
.content{
min-height:90%;
width:1130px;
background: white;
border: 1px solid white;
top:80px;
margin-right:155px;
margin-top:100px;
margin-left:125px;
}
HTML code
<div class="header-cont">
<div class="header">
</div>
</div>
<div class="content">
</div>
<div class="footer">
<div class="footer-data">
footer data
</div>
</div>
I am trying to place some text inside an image, but the text div is not coming on top of the image, rather it is hidden and invisible right below the image. thanks in advance!
Here is a link to jsfiddle:
http://jsfiddle.net/XrXZj/1/
have the following in my css file:
.spotlight {
color:#FFFFFF;
display:table;
height:120px;
margin-bottom:15px;
margin-left:0px;
overflow:hidden;
padding:0 50px;
position:relative;
width:840px;
}
.spotlight .wrapper {
position:absolute;
}
.spotlight .middle {
display:table-cell;
height:50px;
vertical-align:middle;
}
.spotlight .spotlight-copy {
font-size:15px;
line-height:25px;
width:500px;
}
and here is the content of html file:
<div class="spotlight">
<img src="<spring:url value="/assets/img/banner-natural-hazard-risk.jpg"/>" border="0" />
<div class="wrapper">
<div class="middle">
<div class="spotlight-copy">
<spring:message code="content.location.title" />
</div>
</div>
</div>
<div style="clear: both;"></div>
</div>
.spotlight .wrapper {
position:absolute;
top: 0;
}
I put there a solution http://jsfiddle.net/NPh76/
HTML is:
<div class="wrapper">
<div class="middle">
<div class="spotlight">
<img src="http://www.springsource.org/files/header/logo-spring-103x60.png" border="0" />
<div class="spotlight-copy">
message in spotlight copy
</div>
</div>
</div>
<div style="clear: both;"></div>
notice about HTML:
<IMG> is into .middle to be at same level as .spotlight-copy
CSS is:
.spotlight {
color:#FFFFFF;
display:table;
height:120px;
margin-bottom:15px;
margin-left:0px;
overflow:hidden;
padding:0 50px;
position:absolute;
width:840px;
}
.spotlight .wrapper {
position:absolute;
}
.spotlight .middle {
display:table-cell;
height:50px;
vertical-align:middle;
}
.spotlight .spotlight-copy {
position:absolute;
top: 0px;
font-size:15px;
line-height:25px;
width:500px;
color:#FF0000;
}
notice about CSS
position:absolute; in .spotlight-copy
top: 0px; for position
color:#FF0000; to see something ;)