Im trying to do layout that has header, content and footer. Footer must be bottom of the page(done). But my problem is how can I get content 100% strech between header and footer. When my content is empty, then I can't see that, but when I'm writing some word to html in to content div, like "hello", then the content is only so long than the content in content. I guess you can understand what I mean.
Can somebody explain what is wrong in my css code.
Red is header, green is footer, cyan is content and blue is container. Problem is that Content does not cover the container area.
<!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>Praktika1</title>
<link rel="stylesheet" href="style1.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
</div>
<div id="content">
</div>
<div id="footer">
</div>
</div>
</body>
</html>
CSS:
#CHARSET "UTF-8";
*{padding:0; margin:0;}
html,body{
height:100%;
}
#container{
width: 1024px;
position:relative;
background-color:#cce;
margin: 0 auto;
min-height:100%;
}
#header{
width: 1024px;
height:100px;
background-color: #CCC;
}
#content{
height:100%;
width:1024px;
background-color:yellow;
}
#footer{
width: 1024px;
height: 100px;
position:absolute;
bottom:0;
background-color: #ced;
}
You're in luck. I spent a good amount of time yesterday figuring out a question similar to this.
http://andrew.x10.mx/rene/
html -
<div id="container">
<div id="header">
<div id="header-content">
Hai der. I'm a header.
</div>
</div>
<div id="content">
<h1>Content here</h1>
<div id="footer">
<div id="footer-content">
I'm a footer lol
</div>
</div>
</div>
</div>
css -
html,body {
height: 100%;
margin: 0;
padding: 0;
text-align: center;
}
#header {
background: #0f0;
top: 0;
left: 0;
position: absolute;
width: 100%;
}
#header-content {
padding: 10px;
}
#container {
background: #ff0;
height:auto !important;
height:100%;
position:relative;
width: 1024px;
text-align: left;
margin: 0 auto;
min-height:100%;
}
#content { padding: 20px 10px; }
#footer {
background: #f00;
bottom: 0;
left: 0;
position: absolute;
width: 100%;
text-align: center;
}
#footer-content { padding: 10px; }
Hard to tell without the HTML, but I would try to add a min-height of %100 to #content
One solution would be this:
#content{
background-color:yellow;
position:absolute;
top:100px;
bottom:100px;
width:100%;
}
You could use absolute positioning on all three parts of the page (header, content, footer):
Live demo: http://jsfiddle.net/bBEJ6/
Perhaps a margin-bottom: 0 px could work?
Your question is worded very poorly, but from what I can see you want your content to fill up 100% of your page, yet you have specified a specific width on your #content section by using the width:1024px property.
Try width:100% and see if this solves your problem.
Related
Here is my HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>A+Tec</title>
<style type="text/css" >
* {
margin: 0px;
padding: 0px;
}
#wrapper {
width: 100%;
height: auto;
background-color: #ABEBC1;
position: fixed;
}
#nav {
width: 720px;
height: auto;
margin: auto;
}
.buttons {
height: 25x;
width: 150px;
background-color: #ABEBFF;
background-repeat: repeat-x;
float: left;
margin: 0px 10px;
text-align: center;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="nav">
<div class="buttons">
</div>
<div class="buttons">2</div>
<div class="buttons">3</div>
<div class="buttons">4</div>
<div class="buttons">5</div>
<div class="buttons">6</div>
</div>
</div>
</body>
</html>
I have the wrapper with the divs inside. There is clearly enough space for all the divs yet one of them overflows to next line as in picture:
I have no idea what is wrong but the div with 6 in it has overflowed onto the next line but the wrapper is plenty big enough to accomodate it. Can you please help me?
Thanks
I have met a problem that i don't know where is wrong. my code is here:
<html>
<head>
<style type="text/css">
#top{
width:100%;
height: 78%;
background-color: #ccc;
}
#left{
width: 45%;
height: 100%;
display: inline-block;
background-color: green;
}
#right{
width:50%;
height: 100%;
display: inline-block;
background-color: pink;}
</style>
</head>
<body>
<div id="top">
<div id="left">
<div id="inside">asd</div>
</div>
<div id="right"></div>
</div>
</body>
</html>
if I add nothing to the "inside" div, then the layout would be alright , just like this:
but if i add any tag or even a few words in the "inside" dev .the layout would get wrong.
I'm new to HTML,so I don't know the problem,who can tell me why this happens? I've been driven crazy!!!help~~~~:(
You can use float (see the other answers), but you don't have to if you don't want to.
#left, #right { vertical-align:top; }
will get you what you want.
Aside: You should add <!DOCTYPE html> to the top of your page. In which case, you'll also need to add
html, body { height: 100% }
to your CSS.
try this:
#right{
width:50%;
height: 100%;
display: inline-block;
background-color: pink;
float:right;}
demo
You can resolve the issue by adding a float attribute in css.
Find the updated html template below
<html>
<head>
<style type="text/css">
#top{
width:100%;
height: 78%;
background-color: #ccc;
}
#left{
width: 45%;
height: 100%;
float: left;
background-color: green;
}
#right{
width: 50%;
height: 100%;
float: left;
background-color: pink;}
</style>
</head>
<body>
<div id="top">
<div id="left">
<div id="inside">test new</div>
</div>
<div id="right">test</div>
</div>
</body>
</html>
I would recommand to you twitter bootstrap for the layout of your div.
Using their css sheet.
<div id=top class=row-fluid>
<div id=right class=span6><div>
<div id=left class=span6><div>
</div>
The placement of block is way easier than with inline-block. All you need to get what you show in example is to add the background color. And float can easily become hard to handle.
there is also way to gain it by giving float to an element
#left {
width: 45%;
height: 100%;
/* display: inline-block; */
background-color: green;
float: left;
}
You're having a problem with block and inline. When the text appears, the browser puts the inside div into block display which ruins the inline styling. I'm not sure if there's a neat way around that using inline-block - you'll have to use float, I reckon.
Here's the float solution applied to your markup:
<html>
<head>
<style type="text/css">
#top {
width:100%;
height: 78%;
background-color: #ccc;
}
#left {
background:green;
float:left;
height:100%;
width:45%;
}
#right {
background:pink;
height:100%;
margin-left:45%;
width:50%;
}
</style>
</head>
<body>
<div id="top">
<div id="left">
<div id="inside">asdf</div>
</div>
<div id="right"></div>
</div>
</body>
</html>
Further, be careful of CSS height. It's a headache waiting to happen.
I am brand new to CSS so please forgive me if this is a foolish problem.
I have created a footer with 3 embedded div's of 33.33% of the width inside of it. For some reason the text that I am putting into each div is half in and half out of the bottom of the div. This is driving me insane. Could someone please explain why this is happening?
Here is my XHTML:
<! DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 strict//EN" "http://www.3org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="EN" dir="ltr" xmlns="http://www.w3org/1999/xhtml">
<head>
<meta http-equiv="content-type"
content="text/xml; charset=utf-8" />
<title>www.BLeeOBS.com</title>
<link rel = "stylesheet"
type = "text/css"
href = "twoCol.css" />
</head>
<body background="images/brick.jpg">
<div id="body">
<div id="head">
<h1>B. Lee Oil Burner Service</h1>
</div>
<div id="head_right">
<h1></h1>
</div>
<div id="left">
<h2></h2>
</div>
<div id="right">
<h2></h2>
</div>
<div id="footer">
<div id="footer1">
<h3>Fully Insured</h3>
</div>
<div id="footer2">
<h3>HIC# PA088378</h3>
</div>
<div id="footer3">
<h3>©2013</h3>
</div>
</div>
</div>
</body>
</html>
Here is my CSS:
#body {
margin-left: auto;
margin-right: auto;
background-image: url("images/bggradient.jpg");
text-align: center;
background-repeat: repeat-x;
width: 768px;
height: 1024px;
}
#head {
background-image: url("images/horizontalpipe.png");
background-repeat: repeat-x;
float: left;
height: 90px;
width: 678px;
}
#head_right {
background-image: url("images/elbow.png");
float: left;
width: 90px;
height:90px;
}
#left {
float: left;
height: 904px;
width: 678px;
}
#right {
background-image: url("images/verticalpipe.png");
background-repeat: repeat-y;
float: left;
width: 90px;
height: 904px;
}
#footer {
background-color: gray;
color: white;
height: 30px;
width: 768px;
clear: both;
}
#footer1 {
height: 30px;
float: left;
width: 33.33%;
}
#footer2 {
height: 20px;
float: left;
width: 33.33%;
}
#footer3 {
height: 20px;
width: 33.33%;
float: left;
}
my page can be viewed here to see what's happening:
http://www.bleeobs.com/bricksswf.html
the white text should be entirely in the grey box (my div) but as you can see it is halfway out.
Also, I'd like to bring the text "B. Lee Oil Burner Service" a little bit higher in the header. Setting the padding doesn't seem to help at all.
Any help would be greatly appreciated.
I'm not sure why but the margins are being set by "user agent stylesheet" I see here:
THe immediate fix is setting
h3 { margin: 0 }
or however you want it. According to this Chrome user agent stylesheet overwriting my site style you might want to look into the correct fix. It may be having the desired at the top of your document (perhaps for html 5)or it might be broken css somewhere.
edit: Looks like Adrift might be correct about the default browser styles needing to be reset. You can use a reset.css like he's suggesting.
I want to make a one Column Layout with 3 section
Section 1: Header
Section 2: A Content Section that stretchs from beneth the header to the beginning of the footer, which has it's content centered vertically and horizontally within itsel
Section 3: Footer that always resides at the bottom of the browser window.
The Problem:
I can't get the content div to strech to the beginning of the footer/bottom div. If I enter height:100% it automatically stretches till the end of the whole page.
Also would like to center the content inside this middle div vertically and horizontally - though I have not yet attempted to do so.
Also don't understand why the background of the header text is not in color. even though the subheader divs are encapsulated by the header div which has background-color defined.
thanks!
http://jsbin.com/ixipug/1/edit
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html {
height: 100%;
}
body {
height: 100%;
margin-left: 20px;
margin-top:0px;
margin-bottom: 0px;
}
#containerHeaderContent {
min-height:100%;
height: auto;
height: 100%;
margin: 0 auto -1.5em;
}
.push {
height: 1em;
}
.header {
background-color: aqua;
padding-top:20px;
}
.subheader-left {
float:left;
font-family: serif;
font-size: 20px;
text-align: left;
}
.subheader-right{
float: right;
font-family: sans-serif;
font-size: 12px;
padding-right: 20px;}
.middleSection {
padding-top: 10px;
clear:both;
width:100%;
height auto;
background-color: #e8e7e7;
}
.bottom{
background-color: red;
position: absolut;
height: 1em;
font-size: small;
}
.bottom-left {
float: left;
font: sans-serif;
left: 20px;
}
.bottom-right {
float: right;
right: 15px;
font-style: italic;
color: #8e8e8e;
font-size: 11px;
}
</style>
<title>XYZ</title>
</head>
<body>
<div id="containerHeaderContent">
<div class="header">
<div class="subheader-left">XYZ</div>
<div class="subheader-right">LOREM</div>
</div>
<div class="middleSection">Content Vertical and Horizontally Centered inside DIV</div>
<div class="push"></div>
</div>
<div class="bottom">
<div class="bottom-left">
<span class="about">
<span class="bold">XYZ</span> is a project by XZY. |
<span="address">Website Information</span> — info#info.com
</span>
</div>
<div class="bottom-right">
<span class="openinghours">Open by Appointment</span><span class=""> sponsored by XYZ</span>
</div>
</div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
</body>
</html>
2018 update
use flexbox or css grid. Here is a flexbox example. Css grid could be even simpler, but support is pretty low still:
body, html { padding: 0; margin: 0; }
header { background: #faa; }
article { background: #afa; }
footer { background: #aaf; }
.page {
display: flex;
flex-direction: column;
height: 100vh;
width: 100vw;
}
article {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
<div class="page">
<header>header content</header>
<article>main content</article>
<footer>footer content</footer>
</div>
No need to use tables! Some simple css will do nicely.
DEMO: http://jsbin.com/azivip/2/edit
Html Markup:
<body>
<div id="content">
<div id="header">
This is the header
</div>
<div id="inner">
This is the body
</div>
<div id="footer">
this is the footer
</div>
</div>
</body>
CSS:
body{
height:100%;
padding:0px;
margin:0px;
}
#content{
position:relative;
bottom:0px;
width:100%;
height:100%;
}
#header{
position:relative;
bottom:0px;
width:100%;
height:100px; /* Edit for height of header*/
background:#f00;
}
#inner{
width:100%;
text-align:center;
position: absolute;
top: 50%;
display: table-cell;
vertical-align: middle;
}
#footer{
position:absolute;
bottom:0px;
width:100%;
height:100px; /* Edit for height of footer */
background:#0f0;
}
In order for #inner to stay centered vertically even with multi-line content, you'll need to use Javascript/jQuery. Below is an example script that "pulls up" #inner just the right amount to be centered.
var mrgntop = -Math.floor($("#inner").height() / 2);
$("#inner").css({"margin-top":mrgntop});
<table> is what you need to use in this case. The HTML will look like this, basically:
<table class = "wrapper">
<tr><td class = "header">I'm the header.</td></tr>
<tr><td valign = "middle" class = "content">Some content. Some content. More content. More content. Content is great. Content is a great thing to talk about when trying to insert random content to elaborate behavior. Content.</td></tr>
<tr><td class = "footer">I'm the footer.</td></tr>
</table>
Example CSS:
html, body, .wrapper {
height: 100%;
}
.header {
height: 100px; /*This value can be anything*/
}
.content {
text-align: center;
}
.footer {
height: 100px;
}
Demo: jsFiddle.
Note how the content is centered both vertically and horizontally.
Hope that helped!
i have been trying to implement a bottombar for my site, however the vision i have seems to me to be rather difficult. Maybe you can enlighten me?
I want to have a bottombar that sits at the bottom of the browser window if the content does not spill over the edge, but if the content does spill over i want the bottombar at the bottom of the content.
I would prefer if it was CSS solution but it might be better/easier in something else, i dont know. Also no PHP.
I hope you understand me.
And thanks in advance for any answers.
Have you looked at http://www.cssstickyfooter.com/
Assuming the height of the bottom bar is fixed it's fairly simple. eg.:
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<style type="text/css">
html, body { height: 100%; margin: 0; padding: 0; }
#content { min-height: 100%; }
* html #content { height: 100%; } /* IE6 hack */
#trailer { height: 2em; margin-top: -2em; background: yellow; }
#pad { height: 2em; }
</style>
</head><body>
<div id="content">
Content content content content content content content content content content content.
<div id="pad"></div>
</div>
<div id="trailer">
Bit at the bottom.
</div>
</body></html>
Something like this will do the trick, (note that the extra wrapping div with some padding-bottom is required in order to make sure the footer does not overlap the contents),
<html>
<head>
<title>Sticky Footer Test</title>
<style>
html, body {
height: 100%;
padding: 0px;
margin: 0px;
}
* {
margin: 0px;
}
#container {
min-height: 100%;
height: auto !important;
height/**/: 100%; /* for IE6 */
background: #ddd;
}
#footer {
position: relative;
background: #555;
margin-top: -100px;
height: 100px;
}
#content {
padding-bottom: 100px;
}
</style>
</head>
<body>
<div id="container">
<div id="content">
<p>Hello! I'm some content!</p>
</div>
</div>
<div id="footer">
<p>Hello! I'm a footer!</p>
</div>
</body>
</html>