I dont get it. I wrote the code to have the footer always at the bottom. lets say sticky-footer. Here is my code.
body {
background-color: #edecd8;
margin:0;
padding:0;
height:100%;
}
#container {min-height:100%; position:relative;}
#body {
padding-bottom:20px;
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:20px;/* Height of the footer */
background: #FC0;}
</style>
<div id="footer"> contact | the athens store | Mitropoleos 37 </div>
With these code it didnt work well, actually the footer was not at the bottom but a bit higher. And then I added in the very beginning an html tag like this and it worked! Why was it wrong before?
html,body {
background-color: #edecd8;
margin:0;
padding:0;
height:100%;
}
browsers have a default page margin and padding, thats why you got a little space under you bar, and that is why developers use a css reset to ower write these.
Or by useing a simple code
if you replace this
html,body {
background-color: #edecd8;
margin:0;
padding:0;
height:100%;
}
to this
* {
margin:0;
padding:0;
}
body {
background-color: #edecd8;
height:100%;
}
it will work and owewrite all the default browser paddings and margins
Browsers have a standard (and often differing) css for elements. The html element may have had a margin or padding applied, keeping your footer off the bottom a little bit.
Or the html element needed to be given the 100% height to get it to expand the full height of the window.
This is why CSS resets are used, to get to a baseline standard between the browsers.
Related
I am stuck trying to figure it out how exactly inline element and floated element behave when are next to each other. I have following code in which inline element comes before the floated one and the second situation when inline element comes after the floated one and in both situation.
html code is the same in both examples so I am gonna put it just here:
<body>
<p class="first">first paragraph</p>
<p class="second">second pargraph</p>
<p class="clearBoth"></p>
</body>
So here is first example in which is the inline element before the floated one, along with following css:
html{
background:white;
}
p.clearBoth{
clear:both;
}
body{
width:400px;
margin:0 auto;
background:red;
}
p.first{
display:inline;
background:yellow;
color:black;
}
p.second{
float:left;
background:black;
color:white;
}
and here is the link what this code does
Here is second example where the floated element is first element, along with the following css code:
html{
background:white;
}
p.clearBoth{
clear:both;
}
body{
width:400px;
margin:0 auto;
background:red;
}
p.first{
float:left;
background:yellow;
color:black;
}
p.second{
display:inline;
background:black;
color:white;
}
And here is link what it does
In both cases I've noticed that the float element will be first to the left no matter which one is first in html document, but I find this align very strangeto happen since I would normally expect both to be in same line.
That's because web browsers apply a margin property to the top and bottom of the <p> element.
For instance, Google chrome applies the following:
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
You need to reset the default user agent style sheet by using CSS Reset
As a tiny fix, just for the demo:
* { margin: 0; padding: 0; }
/* Or just:
p { margin: 0; }
*/
UPDATED DEMO #1
UPDATED DEMO #2
I know this has been asked somewhere else, but I can't find the solution. I have a simple layout. A container Div with two floating divs inside. The left div holds the navigation and has a background image. The right div has a solid background and is dynamic based on the content of each page. I am not having issues with the content div. My problem is I want the left div to "stretch" vertically to match the height of the content div. What is happening is the left is only stretching to the min-height value. Here is my CSS:
#containerTemp {
margin-left:auto;
margin-right:auto;
width:1000px;
min-height:100px;
height:auto;
}
#containerNavigation {
width:210px;
float:left;
background-image:url(../images/template/linkbgd.gif);
background-repeat:repeat-y;
min-height:500px;
height:100%;
}
#containerContent {
width:790px;
background:#FFFFFF;
background-repeat:repeat-y;
float:right;
min-height:500px;
height:100%;
}
You can see the issue by visiting this page: http://www.athensfireandrescue.org/?pid=7
I am sure it's something simple, but I can't put my finger on it. Sorry for the redundant question, but my searches just didnt' turn up viable solutions.
Heights can be a bit tricky. However the goal is to make sure the parent containers have 100% height.You have a lot of stuff going on in your web page. So I created an isolated demo to demonstrate how this works.
HTML
<div class="wrapper">
<div class="left"></div>
<div class="right"></div>
</div>
CSS
html, body {height:100%;}
.wrapper {
width:400px;
height:100%;
margin:0 auto;
}
.left {
width:198px;
border:1px solid black;
float:left;
height:100%;
}
.right {
width:198px;
border:1px solid red;
float:left;
height:100%;
}
DEMO:
http://jsfiddle.net/nFdtT/
SOME OTHER STUFF I NOTICED:
If I can offer some advice I would suggest the following:
Don't use tables unless it is tabular data. Your NAV should be constructed using a list.
Remove all inline styles and place them in a separate stylesheet.
<meta> and <style> tags should be in the <head> of your document. (For some reason you have a partial doctype heading nested inside of your <head>)
And if you aren't already, I would suggest using a CSS reset.
How does this CSS code center a webpage?
html,
body {
margin:0;
padding:0;
color:#000;
background:#fff;
}
#body {
width:870px;
margin:0 auto;
background:#ddd;
}
margin: auto;
centers any block.
But that's not the body that is centered, just a div whose id is "body" (which I find a little misleading).
Be careful when naming classes or IDs the same as body/head/footer/etc. The code you posted will work fine, because the margin:auto will center the block but that naming scheme could cause some accidental changes pretty easily. Try using #wrapper, #container, or something of the like.
There is nothing wrong.
body { ... } refers to the entire page, the body of your document.
#body { ... } is for sure a div in your body with ID = "body". The CSS is correct because it gives a fixed width and automatic margin on the left and on the right.
This will work in modern browsers, but you need to add some more attributes in order to work this in older versions of IE
html,
body {
margin:0;
padding:0;
color:#000;
background:#fff;
text-align:center; /* align contents to center which will align #body center */
}
#body {
width:870px;
margin:0 auto;
background:#ddd;
text-align:left; /* re-arranges contents of #body to default left */
}
I have a Footer that spans the width of the page. Within the footer there is an which is essentially acting as a footer background image that fills the entire width of the footer / page. However, in IE, there is some white space under the footer, when it should just be flush with the bottom of the page. Seems fine in Firefox, Safari, etc. Here's what I have, any recommendations on something to try?
<body>
<div id='container'>
<div id='content'></div
</div>
<div id='footer'></div>
</body>
CSS Is:
html {
font:62.5% 'Helvetica Neue';
color:#777676;
margin:0;
padding:0;
}
body {
font-size:1.8em; /* 18 px */
line-height:1.2em;
margin:0;
padding:0;
width:100%;
}
#container {
width:906px;
margin:0 auto;
height:100%;
position:relative;
z-index:10;
}
#content {
padding-top:20px;
}
div#footer {
position:relative;
bottom:0;
clear:both;
width:100%;
z-index:1;
}
div#footer img {
width:100%;
border:0 none;
}
Add display:block; on the image, that should fix it...
(and use code highlighting in your question if you want <tags> to be visible in your text...)
That could be a very involved answer. I have ran into this before and I forget now how I solved it. First, I should ask which version of IE your testing in, it could be old. I don't think this is as much of an issue in IE 8 and above. Next, is your DOCTYPE set. Then try setting the height and/or line-height on the footer. Make sure all sibling and parent elements have their "position", "top", and "left" set.
Have you tried positioning it "absolute" and if that doesn't work remove all other elements in the body, adding them back in one at a time till it breaks and then figure out what is wrong with the element you added.
I hope this is not a repost! I have looked everywhere and so I am sorry if it is.
I have a header div that is position:fixed and it has some image links and a login div. Since the position:fixed is relative to the window, whenever I resize the windows to test liquidity, the content in the header div gets jammed and starts to drop down the page.
Is there anyway to get a horizontal scroll bar to appear and remove the space? I have min-width set on the body and the header div but no luck. I am not coding for IE at the moment and only using latest Chrome and Firefox for testing now.
Thank you for any help!
CSS:
body {
min-width:1000px;
padding-top:0;
padding-bottom:0;
margin:0;
background-color:#022F00;
}
.container {
padding: 0;
margin-left:auto;
margin-right:auto;
height:100%;
margin-top:160px;
}
.header {
width:inherit;
padding:5px;
position:fixed;
left:20px;
right:20px;
top:15px;;
min-width:850px;
}
.login {
float:right;
padding:0;
margin:0;
border:0;
position:relative;
}
img {
margin:0;
border:0;
padding:0;
}
a {
margin:0;
border:0;
padding:0;
}
HTML:
<body>
<div class="container">
<div class="header" id="titlebar"><img src="title.jpg" /><img src="newaccount.jpg"><img src="newarticle.jpg">
<div class="login" id="logindiv">content</div>
</div>
</div>
</body>
i found this solution, it may help you
Set a min-width to your container:
#container { min-width: 1000px;}
you may want to check this link
Two divs floating left and right: How can I keep them on the same level when a page resizes?
it was an answer to
"Two divs floating left and right: How can I keep them on the same level when a page resizes? "follow this link