I have a problem with my footer. Darn footer always.
Anyway, it won't show up in the center of the page. I tried using text-align:center & margin:auto but it won't come off the left side.
I'm going to post the code here; maybe you can find the problem?
HTML
<div id="footer">
<div class="footertxtl">
</div>
<div class="footertxtr">
</div>
<div class="designer">
</div>
</div>
CSS
#footer {
background-image:url(images/footer/footer.png);
background-repeat:no-repeat;
text-align:center;
height:223px;
clear:both;
position:relative;
width:100%;}
.footertxtl {
font-size:10px;
text-align:left;
float:left;
padding-left:60px;
padding-top:165px;
height:auto;
width:auto;}
.designer {
font-size:10px;
text-align:center;
padding-top:205px;
height:auto;
width:auto;}
.footertxtr {
text-align:right;
float:right;
font-size:10px;
padding-right:24%;
padding-top:155px;
height:auto;
width:auto;}
Your footer is set to 100% width which means it will always fill the whole width of the body, unless it is contained within another div.
As a result, the footer is 100% width, with one div floating to the left, another to the right, and the other relative.
Give the #footer a fixed width, then give it margin: 0 auto; this will position this div in the center
Can you post a jsfiddle example? If you have a container within your #footer which is not 100% wide, you can use margin:0 auto; to centre it.
If you do not set constant width, then it is set by default to 100%. Your "width: auto" does not behave as you expected. If you do cannot set constant width and you do not mind about IE7, you could do like this:
#footer{
float: left;
display: inline-block;
}
Remember about adding overflow: hidden; to parent div
If you have a wrapper for the rest of the page that set's either a fixed width or a percentage (75%) then stick the footer inside the wrapper
<body style="text-align: center;">
<div id="wrapper" style="text-align: left; width: 80%; margin: 0 auto;">
<div id="Header">............</div>
<div id="MainContent">.......</div>
<div id="Footer">input content here</div>
</div>
</body>
the wrapper will automatically center all of the content
#footer {
background: transparent url(images/footer/footer.png) no-repeat left top;
text-align:center;
height:223px;
clear:both;
}
Related
I am new to CSS and HTML, I have one problem with regard to height of floated elements:
when I set the height of the "content" div to anything more than or equal to the "main" div height, then the margin top of footer is showing correctly, but as soon as I change the height of content div to auto, margin top of footer is not working. I would really like to know is there any solution which makes the content height auto but respects the margin top of footer. Please help me. I've tried everything: clearfixes of every kind, overflow etc.
<div id="container">
<div id="header"></div>
<div id="content">
<div id="sidebar"></div>
<div id="main"></div>
</div>
<div id="footer"></div>
</div>
#container { width:800px; height:auto; background:#000; }
#header { width:800px; height:80px; background:#333; }
#content { width:800px; height:500px; background:#999; }
#main { width:600px; height:500px; background:skyblue; float:right; }
#sidebar { width:200px; height:500px; background:silver; float:left; }
#footer { width:800px; height:80px; background:green; clear:both; margin-top:10px; }
Use the overflow:hidden Property .
“overflow: hidden” is often used for the purpose of float containment.
It can do more special things, however: prevent an element's margins
from collapsing with its children and prevent an element from
extending “behind” an adjacent floated element.
Source: The magic of “overflow: hidden”
#content{
width:800px;
height:auto;
background:#999;
overflow:hidden;
}
see jsFiddle
Quick fix...here's a Fiddle
#container{width:800px;height:auto;background:#000;}
#header{position:relative;width:800px;height:80px;background:#333;}
#content{position:relative;width:800px;height:500px;background:#999;}
#main{position:relative;width:600px;height:800px;background:skyblue;float:right;margin-bottom: 10px;}
#sidebar{position:relative;width:200px;height:800px;background:silver;float:left;margin-bottom: 10px;}
#footer{position:relative;width:800px;height:80px;background:green;clear:both;}
The problem with your set-up is that when you set the height of #container to auto, its height is actually computed to zero. This is because #container contains purely floated elements, and they are ignored when computing the height of #container.
To fix this, add a clearfix inside #content but after any other content. For example:
<div id="content">
<div id="sidebar"></div>
<div id="main"></div>
<div class="clearfix"></div>
</div>
CSS:
.clearfix { clear: both }
You can see it working here: http://jsfiddle.net/Mzxjs/
Please can you check this example website. if I read the code well (just had a sight) it's setup with tables with some javascript so that a centered container can always stay at the center, and that the body has got two fluid color backgrounds which expands according to the screen size.
I was attempting to reproduce something like this but just using css, I am quite sure I could but can't figure how. please could you give me some indication/document to read.
i have designed a simple structure here in Jsfiddle,have a look
MARK-UP::
<div class="wrapper">
<div class="head_wrapper">
<div class="left_head">left</div>
<div class="right_head">right</div>
</div>
<div class="body_wrapper">
<div class="left_body">left</div>
<div class="right_body">right</div>
</div>
</div>
CSS ::
.wrapper{
overflow:hidden;
width:100%;
display:table;
}
.head_wrapper,.body_wrapper{
overflow:hidden;
width:100%;
padding:0px;
display:table-row;
}
.left_head,.left_body,.right_head,.right_body{
display:table-cell;
text-align:center;
vertical-align:middle;
}
.left_head{
background:black;
height:300px;
font-size:36px;
color:white;
}
.right_head{
background:blue;
height:300px;
font-size:36px;
}
.left_body{
background:yellow;
height:800px;
font-size:36px;
}
.right_body{
background:green;
height:800px;
font-size:36px;
}
.left_head,.left_body{
width:70%;
overflow:hidden;
}
You're just asking for horizontal centering, on a fixed-width container. This is easily done entirely in CSS. Simply set for your container (the element that wraps around your entire site):
.container {
width: 800px;
margin: 0 auto;
}
The "auto" will automatically even out the left and right margins (with no margin on top and bottom.)
[Edit: oops forgot a bit]
As for the blocks of colour, you can achieve this with a background image on your element, that's 1px wide and however tall you need. Just set it to repeat-x.
If your two sections have the possibility of having different heights, you can break it up, so that:
One container is full-width, and has the background colour. An inner container will then be fixed-width with auto margins as above;
Another container is full-width, and has the lighter background colour. An inner container will then be fixed-width with auto margins as above.
This means your code will be something like:
<div class="headercontainer">
<div class="header> This is my header </div>
</div>
<div class="maincontainer">
<div class="main"> This is rest of my copy. </div>
</div>
And your CSS:
.headercontainer { background-color: #222; }
.maincontainer { background-color: #444; }
.headercontainer .header,
.maincontainer .main { width: 800px;
margin: 0 auto; }
HTH :)
I'm making some mobile HTML & would like to have a div that uses up 100% of the space it has, but not use up its container and in it have 3 divs that split it up into 3 parts and have the following layout:
How can I do this using divs, I've tried to but having percentage and fixed height divs is confusing. I can do it with horizontally aligned ones, but vertically it confuses me. I don't want it to overlap by making the bottom one absolute.
Edit
The remaining space is essentially just one big div that has an overscroll-y that uses up the whole space
I have to place the layout in the section underneath the titlebar which is why I cant use position: fixed because it will interfere with the parent container.
First of all, the image in your edited question probably came from JQuery Mobile. Consider using jQuery mobile. It could be an option too.
<style type="text/css">
#container{position: relative; width: 100%; height: 100%; background-color:#ddd; z-index:1;}
#header{position: fixed; top:0; left:0; width:100%; height: 80px; background-color:#f30;z-index:3;}
#footer{position: fixed; bottom:0; left:0; width:100%; height: 80px; background-color:#f30;z-index:4;}
#content{width:100%; z-index:5; padding-top: 90px; padding-bottom: 80px;}
</style>
<div id="container">
<div id="header">
</div>
<div id="content">
Put body content here...
</div>
<div id="footer">
</div>
</div>
You might need jQuery to spice it all up. This should give you the basic idea.
http://jsfiddle.net/wy6rS/1/
<div id="toolbar">This is fixed toolbar.</div>
<div id="wrap">
<div id="header">This is the header</div>
<div id="content">Content will Expand with scripting. Notice the push.</div>
<div id="push"></div>
<div> <!--wrap ends here-->
<div id="footer">This is the footer</div>
The push makes room for the sticky footer. Notice equal negative margin on #wrap.
#wrap { width:100%; min-height:100%; height:100% !important; margin-bottom:-80px; margin-top:50px; }
#toolbar { position:fixed; top:0; width:100%; height:50px; }
#header { height: 140px; }
#content { min-height:300px; height:100%; }
#push, #footer { height:80px; } /* Must be same height as footer */
Then you'll need script to expand the content. Check the jsfiddle. It will work in a real page.
I have an issue with my divs. I currently have four “divs” in html that look like below. What I want to do is have everything in my page inside the “page” div. Inside the “main” div I have the “content” and “side” div and both have the “float:left” property from CSS. What’s happing is that when I do this I lose the background of my “page” div which is white. How can I prevent this and create my content and side divs? I know this is easy but for some reason I’m not getting it right. Any help will be appreciated.
Thanks
<div id=”page”>
<div id=”container”>
</div>
<div id=”main”>
<div id=”content”>
</div>
<div id=”side”>
</div>
</div>
</div>
This is my CSS code
#page
{
margin: 2em auto;
max-width: 1000px;
background-color:#fff;
}
#main
{
clear: both;
padding: 1.625em 0 0;
width:700px;
}
#content
{
clear: both;
padding: 1.625em 0 0;
width:740PX;;
float:left;
}
#side
{
width:250px;
margin:5px;
float:left;
}
The reason you lose the background of your div is because it only contains floating content, which causes it to have no height. Once something "clears" the floats, it will occupy space again. Try adding this after your main div (you can have the style in the style sheet instead):
<div style="clear: both;"></div>
You need to contain your floats. When you float an element, it takes it out of the document flow, so any parent container will just collapse if you don't tell it to contain the child floats.
To contain child floats, the easiest is to apply overflow: auto.
So try this:
#page {
margin: 2em auto;
max-width: 1000px;
background-color:#fff;
overflow: auto;
}
What I believe is happening is when you assign something a float, its "height" doesn't truly get represented to its parent element. Your page div now thinks that it has a height of nothing because of the floating elements within. Add a <br style="clear:both;height:1px" /> after you "side" div. Adding this will "clear" the floated div so their height is not fully represented.
This may not be your case, however I ran into this issue a few times myself and this usually fixed it.
<html><head>
<style type="text/css">
#page
{
margin: 2em auto;
max-width: 1000px;
width:1000px;
background-color:#000;
height:600px;
}
#main
{
clear: both;
padding: 1.625em 0 0;
width:700px;
background-color:#fff;
}
#content
{
clear: both;
padding: 1.625em 0 0;
width:740px;
height:200px
float:left;
background-color:blue;
}
#side
{
width:250px;
height:100px;
margin:5px;
float:left;
background-color:yellow;
}
</style>
</head>
<body>
<div id="page">
<div id="container">
</div>
<div id="main">
<div id="content">
</div>
<div id="side">
</div>
</div>
</div>
</body>
</html>
There is probably a simple answer, but I can't seem to figure it out.
Code:
<body>
<div class='left'>
</div>
<div class='right'>
</div>
</body>
I want .left to be width:100px and .right to be the remaining width of <body>, but for the life of me, I can't get it.
I have:
<style>
.left{
float:left;
width:100px;
}
body{
width:100%;
height:100%;
}
.right{
float:left;
width:85%;
}
</style>
But of course 85% won't fill <body>. Any suggestions? I know it's simple.
.right { margin: 0 0 0 100px; } /* remove the float and width */
This will not work if you have elements inside .right which clear, otherwise it will.