I want to position my footer at the baseline of my #wrapper but all I seem to be able to do is get the footer positioned below the wrapper. Can someone please tell me why this is happening?
Also, if someone sees a problem with how I have this currently designed and has a better way, I'm open to any suggestions.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>sd</title>
<style type="text/css">
html, body {
width:100%;
background:brown;
border:0px solid red;
margin:0;
padding:0;
}
#wrapper {
width:1220px;
height:750px;
padding:0;
margin:0 auto;
background:#ccc;
border:3px solid white;
}
#header {
background-color:#aaa;
width:100%;
height:100px;
padding:0;
margin:0 auto 0 auto;
border:0px solid;
}
#content {
float:left;
width:100%;
height:649px;
padding:0;
margin:0;
border:0px solid;
}
#cell-left {
background-color:#bbb;
float:left;
width:200px;
height:100%;
padding:0;
margin:0;
border:0px solid;
}
#cell-right {
float:right;
width:1010px;
height:100%;
padding:0;
margin:0;
border:0px solid;
}
#footer {
float:left;
width:100%;
height:25px;
padding:4px;
margin:0;
text-align:center;
border:1px solid;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="content">
<div id="cell-left">dsssd</div>
<div id="cell-right">dsssd</div>
</div>
<div id="footer">sdsd</div>
</div>
</body>
</html>
You should remove the fixed height on #wrapper (height:750px), and clear the floated elements inside #wrapper properly.
The easiest way to do this is to add overflow: hidden to #wrapper.
See: http://jsbin.com/iciwo6
The changed CSS:
#wrapper {
overflow:hidden;
width:1220px;
padding:0;
margin:0 auto;
background:#ccc;
border:3px solid white;
}
You have mentioned the wrapper height 750 that is showing problem.Just make it clear and give height:auto
You have given
header: `height:100px;`
content: height:649px;
so it is taking almost 750px .so there is no space for footer.so it is coming just below the wrapper.So try to give height:auto.
Related
I have a simple unordered list beside beside two other divs, all 3 contained within a parent container. Here's how it looks like: https://jsfiddle.net/f0bz4hc0/1/. If you zoom in, you can see that all 3 have borders around them, but the borders around the list items and the anchors extend beyond the container's bottom border while the two other divs are snug. Why does this happen and how can I fix it so that everything is within the container?
<!doctype html>
<html>
<head>
<title>practice</title>
<meta charset='utf-8' />
<style type='text/css'>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
.page{
width:960px;
height:300px;
margin:0 auto;
border:1px solid red;
}
.row{
width:100%;
}
.header{
background-color:black;
height:40px;
}
.logo{
background-color:orange;
height:100%;
width:40px;
float:left;
display: inline-block;
}
.home{
display: inline-block;
height:40px;
width:40px;
float:left;
border:1px solid cyan;
}
.home img{
width:100%;
height:100%;
}
ul{
float:left;
height:100%;
}
ul li{
display: inline-block;
border:1px solid teal;
}
a{
display: inline-block;
color:white;
height:40px;
line-height: 40px;
border:1px solid orange;
}
</style>
</head>
<body>
<div class='page'>
<div class='header row'>
<div class='logo'></div>
<div class='home'><img src='house.png' /></div>
<ul>
<li>a</li>
<li>a</li>
<li>a</li>
</ul>
</div>
</div>
</body>
</html>
If you remove the set height on .header and make it inline-block, you'll see that the borders of on your anchors remain contained in their parent.
.header {
/*height: 40px;*/
background-color:black;
display: inline-block;
}
https://jsfiddle.net/q5mxbywp/
I want to create a contact me section on a website i'm making but the problem is my whole website has text-align:center and i am using a definition list for the contact information. is there a way i can still use the wrapper for my page but align the text to the left without it going out of the white border?
CSS:
#charset "utf-8";
html {
text-align: center
}
#container {
margin-left:auto;
margin-right:auto;
margin-top:50 auto;
margin-bottom:50 auto;
width:1000px;
background-color:#666666;
}
#body1 {
background-color:#666666;
width:1000px;
height:405px;;
border:3px solid #FFFFFF;
margin-top:50px auto;
}
#body2 {
background-color:#666666;
width:1000px;
height:800px;;
border:3px solid #FFFFFF;
margin-top:50px auto;
}
#body3{
background-color:#666666;
width:1000px;
height:500px;;
border:3px solid #FFFFFF;
margin-top:50px auto;
}
#body4{
background-color:#666666;
width:1000px;
height:500px;;
border:3px solid #FFFFFF;
margin-top:50px auto;
}
#body5{
background-color:#666666;
width:1000px;
height:500px;;
border:3px solid #FFFFFF;
margin-top:50px auto;
}
.navbar {
margin:0px;
background-color:#999;
text-align:center;
list-style:none;
border-bottom:none;
padding-left:0px;
}
ul.navbar li {
width:20%;
display:inline-block;
}
ul.navbar a {
color:white;
font-size:20px;
display:block;
width:100%;
margin:0px;
padding:10px 0px;
text-decoration:none;
}
ul.navbar a:hover {
color:#000000;
background-color:#CCC;
}
body {
background-color:#333333;
}
#portrait {
position:relative;
top:20px;
right:420px;
}
#headerhome {
position:relative;
bottom:130px;
left:50px;
font-size:30px;
text-decoration:underline;
font-family:arial;
color:#CCCCCC
}
#goal {
margin-left:40px;
text-align:left;
text-indent:40px;
position:relative;
bottom:110px
}
.tab {
margin-left:40px;
}
#contact {
position:relative;
right:390px;
text-align:left
}
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>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Joe Scotto | Contact</title>
</head>
<body>
<div id="container">
<div id="body3">
<img src="banner.png" width="1000" height="100" />
<!--Navbar Start-->
<center>
<ul class="navbar">
<li>Home</li><li>About</li><li>Contact</li><li>Services</li><li>Biography</li>
</ul>
</center>
<!--Navbar End-->
<div id="contact">
<dl>
<dt><h3>Phone Number</h3></dt>
<dd>XXX-XXX-XXXX</dd>
<dt><h3>Email Address</h3></dt>
<dd>XXXXXX#gmail.com</dd>
</dl>
</div>
</div>
</div>
</body>
</html>
If i understand you correctly then your problem can be fixed using two things:
in #contact css add "!important" after the "text-align:left;" on the same line
add margin if it overlaps.
If this doesnt answer your question please send me a link so i can see what is happening.
hope i helped.
#contact {
text-align:left;
} Might work. position:relative; Try removing. Because CSS goes from top to bottom and over-writes the properties with new values.. Check this
If you want to keep the "contact block" in the body3 (which is centered), why you added the code - "right: 390px;" to the #contact, I do not see the reason. So if you delete it everything will be okay.
Have you tried this?
dl {
text-align: left;
}
Edit: I added the above to your css and the list was aligned to the left.
remove the text-align:center from css in html tag and add text-align attribute in every div tag so you will get align as you want
I am trying to get a Sticky Footer to work, and have currently tried the following css:
#footer {
width:920px;
height:208px;
font-size:10px;
margin-left:auto;
margin-right:auto;
background-image:url(images/grad.png);
background-repeat:repeat-y;
padding:0 20px;
clear:both;
position:relative;
margin-top:-208px;
}
body {
margin:0;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
color:#333333;
background-repeat:repeat-x;
padding: 0;
height: 100%;
}
#wrap {
width:960px;
margin:0 auto;
min-height:100%;
height: 100%;
}
#content {
width:892px;
float:left;
border-left:4px solid white;
border-right:4px solid white;
padding:15px 0px 15px 20px;
background-image:url(images/sidebar_bg.png);
position:relative;
padding-bottom:143px;
}
I have had to reduce the #content padding-bottom, so it would fit. But I am still having issues. Firstly, There is too much space at the bottom of longer pages (see - http://bellbird.redgraphic.co.uk/headteacher/ ) Secondly, on a shorter page the footer doesnt scroll up when the browser window is resized (see - http://bellbird.redgraphic.co.uk/school-council/ )
Sticky footers always seem to be an issue, so I must be missing a trick.
Any help would be greatly appreciated.
Lewis
usefull link here. This one helped me with the same issue.
CSS mark-up:
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
HTML mark-up:
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
</div>
use this css instead of your
#footer {
position:fixed;
bottom:0;
left:0;
right:0;
height:40px; /* Height of the footer */
background:#6cf;
}
html:
<div class="wrap">
<div class="inner-wrap">
...
</div>
</div>
<footer>
...
</footer>
css:
html, body {height:100%;}
.wrap {min-height:100%; height:auto !important; margin-bottom:-100px;}
.inner-wrap {padding-bottom:100px;}
footer {height:100px;}
<style>
.wrapper{
width:900px;
height:auto;
padding:0px;
margin:auto;
background:#000000;
position:relative;
}
.header{
width:900px;
height:200px;
float:left;
padding:0px;
margin:0px;
background:#00FFFF;
}
.body_content{
width:900px;
height:500px;
float:left;
padding:0px;
margin:0px;
background:#6666FF;
}
.fotter{
width:900px;
height:150px;
float:left;
padding:0px;
margin:0px 0px 25px 0px;
background:#336600;
}
</style>
<div class="wrapper">
<div class="header"></div>
<div class="body_content"></div>
<div class="fotter">sss</div>
</div>
Since you float everything in the wrapper, the browser won't pickup the size of your wrapper div, ie, it consider it has 'zero' height.
Solution:
use the magical overflow keyword in wrapper:
.wrapper{
overflow:auto;
//...
}
This is what I see:
What are you expecting?
#sridhar ,
For div the background color should be given like this right
background-color:#003366 and background image sould be given like this
background-image: url(../images/test-background.gif);
Here is the code i'm working on it's not a page it's a treasure hunt for what might be re-used in a page, I ran into this problem last week or so and I'm asking myself what the heck is this margin for a while here
Let's picture that I can't use the float:left; tag for a reason, when I use display:inline-block; a weird margin apears on the elements (say divs) how do I fix it?
Problem is on FF3, and IE8 never tested in other browsers but if it dos not work on these what will it work on?
Original Code
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Why does that happen</title>
<style type="text/css">
* {padding:0px; margin:0 auto;
vertical-class:baseline;
text-class:left;}
body {padding:0px; margin:0 auto;}
div{margin: 0 auto;}
div div{margin: 0;}
.body {background:#CCC; width:900px; }
.red {background:#F00;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}
.blue {background:#03F;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}
.green {background:#090;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}
.light-blue {background:#39F;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}
.light-green {background:#9FC;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}
.heavy-red {background:#C00;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}
</style>
</head>
<body>
<div class="body">
<div class="red"></div>
<div class="blue"></div>
<div class="green"></div>
<div class="light-blue"></div>
<div class="light-green"></div>
<div class="heavy-red"></div>
</div>
</body>
</html>
Solved: solution is eliminate the spacing in the markup:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Why does that happen</title>
<style type="text/css">
* {padding:0px; margin:0 auto;
vertical-class:baseline;
text-class:left;}
body {padding:0px; margin:0 auto;}
div{margin: 0 auto;}
div div{margin: 0;}
.body {background:#CCC; width:900px; }
.red {background:#F00;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}
.blue {background:#03F;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}
.green {background:#090;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}
.light-blue {background:#39F;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}
.light-green {background:#9FC;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}
.heavy-red {background:#C00;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}
</style>
</head>
<body>
<div class="body">
<div class="red"></div><div class="blue"></div><div class="green"></div><div class="light-blue"></div><div class="light-green"></div><div class="heavy-red"></div>
</div>
</body>
</html>
The problem is caused by spaces in the markup between the divs. If you don't want to float them (why not I wonder), you have a couple of options.
Remove the spaces so that the markup is all on the same line.
If you don't ever want any text to appear in these divs then you can do this
div{font-size:0;}
I common practice in order your sites to be more cross browser compatible is to use a css reset file. Check this question https://stackoverflow.com/questions/116754/best-css-reset
in all your inner div classes use margin-left: 0px
.red {background:#F00;
height:300px; width:300px; margin-left: 0px; display: inline-block;
}
.blue {background:#03F;
height:300px; width:300px;margin-left: 0px; display: inline-block;
}
.green {background:#090;
height:300px; width:300px;margin-left: 0px; display: inline-block;
}
.light-blue {background:#39F;
height:300px; width:300px;margin-left: 0px; display: inline-block;
}
.light-green {background:#9FC;
height:300px; width:300px;margin-left: 0px; display: inline-block;
}
.heavy-red {background:#C00;
height:300px; width:300px;margin-left: 0px; display: inline-block;
}
I have posted the final html at http://jsbin.com/uwavi3
I had to remove display: inline-block to get it to work on jsbin while on running it locally from a file I didn't have to. I think jsbin uses some sort of reset css.
Edit2 for float: left kinda layout
Sorry for misunderstanding the question.
Increasing the width of the parent div and using spans instead of div(for colored blocks like red, blue etc.) Works for IE8 and FF3.6. Check here http://jsbin.com/uwavi3/3
This is causing a margin on the left and right of every element (that is not display:inline):
* { margin:0 auto; }
You probably want this as your "reset" rule.
* { margin:0; }
You can then apply margin:0 auto to things that you want centered.