I have created a sticky footer, a footer that hugs the bottom of the window whether or not there is enough content to fill the page. My implementation works well except for one minor issue when rendering in Internet Explorer. If the content fills the page and any of my content divs have an unspecified height, a crack appears beneath the footer. This also happens if the content contains a span with or without a fixed height.
Below is my implementation. If I give Div 2 a fixed height the footer tightly hugs the bottom of the window, but by not setting a height the crack appears. I have been unable to resolve this. Any suggestions on how to prevent it would be appreciated.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Sticky Footer</title>
<style type="text/css">
Html, body {
margin: 0;
height: 100%;
background-color: lightgreen;
}
header {
height: 40px;
background-color: green;
}
footer {
bottom: 0;
position: absolute;
width: 100%;
height: 40px;
background-color: gray;
}
.fixedHeightDiv {
border: 2px;
border-style: solid;
height: 500px;
}
.container {
min-height: 100%;
position: relative;
}
.content {
padding-bottom: 40px;
}
</style>
</head>
<body>
<div class="container">
<header>Header</header>
<div class="content">
<div class="fixedHeightDiv">
Div 1
</div>
<div>
Div 2
</div>
<div class="fixedHeightDiv">
Div 3
</div>
</div>
<footer>Footer</footer>
</div>
</body>
</html>
Related
I'd like to set the div height using percentages that do not depend on items in it.
I got a fixed header on the top of the screen and a centered div. But set height in percentages does not work. It enlarges only if I add some items in there.
Please help.
I have this code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>lol</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div id="conteiner">
<header>
<p>header</p>
</header>
<div id="main">
<p>main info</p>
</div>
</div>
</body>
</html>
And this CSS.
html{
width: 100%;
height: 100%;
}
body{
overflow: hidden;
margin: 0;
width: 100%;
height: 100%;
}
header{
position: fixed;
top: 0px;
width: 100%;
height: 10%;
border: solid red 1px;
}
#main{
display: block;
width: 65%;
height: 80%;
border: solid green 1px;
margin: 8% auto 0 auto;
}
You forgot to make it's parent 100% height too.
#conteiner has automatic height by default because its div block. And default height is height of its children. If parent's height isn't set manually, children height in percents are ignoring by browser
#conteiner {
height: 100%;
}
at your style file you have to write style for container div code like
#container{
height:100%;
}
I have a web page that is 960px wide. Inside this page there's a section with an image inside that I want pushed all the way to the right so it's half way outside the page. The attached image below will show you an example of what I would wan this to look like.
I would also like it if the image is in the background so if the browser window is small in width it would just keep covering the image.
Here's a couple sites that has this:
http://cpanel.com/products/
At cpanel you can see the iPad on that page is only half way displayed when the browser window is smaller than image.
Another website with this effect is Doteasy.com here's the URL:
http://www.doteasy.com/
If you scroll down to the middle of their page you will see the Site builder section which includes a screenshot of the software. Their page is 980px wide and you can see that the screenshot is halfway outside the page wrapper.
The image should be 552px widde by 315px high.
.container {
width: 960px;
height: auto;
margin: 0 auto;
background-color: yellow;
}
section {
width: 100%;
height: 508px;
background-color: blue;
}
.image {
width: 552px;
height: 315px;
background-color: red;
}
<!DOCTYPE html>
<html>
<head>
<title>Site Example</title>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
</head>
<body>
<section>
<h1>This is the Section</h1>
<div class="container">
<div class="image">This would be the image.</div>
</div>
</section>
</body>
</html>
I hope you guys are able to help !
Thanks.
You can position absolutely relative to the container like so:
Add position: relative; to the container
Add absolute positioning to the image position: absolute; top: 0; right: -276px; (The right value is half the image width)
overflow-x: hidden on the container will stop the extra half of the image from being visible.
section {
width: 100%;
height: 508px;
background-color: blue;
}
.container {
position: relative;
width: 960px;
height: 400px;
margin: 0 auto;
background-color: green;
overflow-x: hidden;
}
.image {
position: absolute;
top: 0;
right: -276px;
width: 552px;
height: 315px;
background-color: red;
}
<section>
<h1>This is the Section</h1>
<div class="container">
This is the container
<div class="image">This would be the image.</div>
</div>
</section>
This should work for you. I added position: relative to the .container and section, then position: absolute to the image container. You can then use left: 25% to adjust how far off screen you would like the image to be. The 25% can be adjusted according to your needs. You can also use px instead of percentages if that works better for your needs.
.container {
width: 960px;
height: auto;
margin: 0 auto;
position: relative;
}
section {
width: 100%;
height: 508px;
background-color: blue;
position: relative;
}
.image {
width: 552px;
height: 315px;
background-color: red;
position: absolute;
left: -25%; /* -- Adjust this percentage as needed -- */
}
<!DOCTYPE html>
<html>
<head>
<title>Site Example</title>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
</head>
<body>
<section>
<h1>This is the Section</h1>
<div class="container">
<div class="image">This would be the image.</div>
</div>
</section>
</body>
</html>
I would like to have a web page with a header 120px tall, a footer 120px tall,
and a main content whose minimum height is 600px but when the browser is then
stretched vertically past 840px in height (or the user zooms out with
"control minus" on Firefox), I want the body to stretch vertically
to fill all available space minus the header and footer space.
Here is what I tried:
<header>This is the header.</header>
<div id="mainContent">This is the main content.</div>
<footer>This is the footer.</footer>
and this is the CSS:
header { height: 120px; background: red; }
div#mainContent { min-height: 600px; height: 100%; background: green; }
footer { height: 120px; background: blue; }
Here is the complete code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
header { height: 120px; background: red; }
div#mainContent { height: 100%; background: green; }
footer { height: 120px; background: blue; }
</style>
</head>
<body>
<header>This is the header.</header>
<div id="mainContent">This is the main content.</div>
<footer>This is the footer.</footer>
</body>
</html>
What is the correct way of achieving the effect I'm after.
Thanks.
Change the body size to a percentage you cant have a px size and percentage they don't work together.
div#mainContent { height: 100%; background: green; }
Have a problem trying to have a header tab strip occupy the entire width of the browser. Below is the code. When the page is viewed in a browser, I see a horizaontal scroll bar for the browser, so, when you scroll over to the right, the bluish tab cuts out, revealing the white background.
How can I have this header tab expand when scrolled over too?
THanks.
<html>
<head>
<style type="text/css">
html, body, div { margin: 0; padding: 0; }
html, body,form, #wrapper, #left, #right { height: 100%; min-height: 100%; }
#wrapper { margin-left: 10px;overflow: hidden; width: 100%; }
#left { background: yellow; float: left; width: 360px; }
#right { background: grey; margin-left: 360px; }
</style>
<title>Example</title>
</head>
<body>
<div id="tabstrip" style="height: 25px; background-color: #63a3c7; color: White;">
</div>
<form id="form1" runat="server">
<div id="wrapper">
<div id="left">
Left
</div>
<div id="right"></div>
</div>
</form>
</body>
</html>
It's coming from the margin-left: 10px; on your #wrapper. Remove it and the problem goes away.
jsFiddle example
If for some reason you need that bit of margin there, put it on the form instead.
See this. I removed the wrapper width 100%.
#wrapper { margin-left: 10px;overflow: hidden; }
Hope this helps!
I am tryingg to design and simple css template for my dashboard. Like to have top section to display the logo and the title, left section for the menu, center to display info based on the menu, right to display some info, bottom to display some contact info. I like left/center/right side of the page to be vertically and horizontally scorllable. When scrolled, I need the header to be always showing on the browser.
can anybody help me with this?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Dashboard Layout</title>
<STYLE type="text/css">
#top {
height: 100px;
widht: auto;
border-bottom: 5px solid;
}
#left {
height: auto;
width: 350px;
border: 1px solid;
float: left;
overflow: scroll;
}
#content {
width: auto;
height: auto;
float: left;
overflow: scroll;
}
#right {
height: auto;
width: 350px;
float: right;
overflow: auto;
}
#bottom {
height: 50px;
width: auto;
}
</STYLE>
</head>
<body>
<div id="top">
<h3><b>Dashboard</b></h3>
</div>
<div id="middle">
<div id="left">
<h3><b>Menu</b></h3>
</div>
<div id="content">
<div id="div1" </div>
</div>
<div id="right">
<h3><b>Definitions</b></h3>
</div>
</div>
<div id="bottom">
<p>This dasboard prodides info about systems.</p>
</div>
</body>
</html>
To have a div that is always visible whether or not your scroll, use:
.visibleDiv
{
position: fixed;
}
Yes, as Karan said, you have to fix the position of your header (#top). A fixed element is positioned relative to the browser window.
#top {
position: fixed;
width: 100%
top: 0;
height: 100px;
border-bottom: 5px solid;
}
Then you would see your content div (#middle) starting to overlap with the header, so you should set aside a top margin.
#middle {
margin-top: 100px /* the same height as your header */
}
And because you are floating several divs, I suggest that you clearfix after them to adjust the height of the parent div.
There are many great tutorials for css menus and headers on the web, so Google them! :]