Okay so I asked a question earlier on:
How to make a div fill the remaning vertical space using css
got an answer which Ive now been playing around with:
<!DOCTYPE html PUBLIC "-//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>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
html, body{
padding: 0;
margin: 0 auto;
height: 100%;
}
#header {
float: top;
width: 100%;
height: 15%;
background-color: green;
}
#navbar {
float: left;
width: 20%;
height: 70%;
background-color: red;
}
#content {
float: right;
width: 80%;
height: 70%;
background-color: blue;
}
#footer {
float: bottom;
width: 100%;
height: 15%;
background-color: yellow;
}
</style>
</head>
<body>
<div id="header"> Header </div>
<div id="navbar"> Nav Bar </div>
<div id="content"> Body </div>
<div id="footer"> Footer</div>
</body>
</html>
Now ultimatley Id want to achieve this:
in which it covers 100% of the screen but I can choose how those percentages are spread i.e:
html, body{
padding: 0;
margin: 0 auto;
height: 100%;
}
#header {
float: top;
width: 100%;
height: 15%;
background-color: green;
}
#navbar {
float: left;
width: 20%;
height: 70%;
background-color: red;
}
#content {
float: right;
width: 80%;
height: 70%;
background-color: blue;
}
#footer {
float: bottom;
width: 100%;
height: 15%;
background-color: yellow;
}
As you can html and body have a height of 100% thus filling the screen. The header has a height percentage of 15% the nav bar and body have a percentage of 70% and the footer 15% which in total would make up the 100% of the visible screen...
Now everything seems fine except for my footer:
#footer {
float: bottom;
width: 100%;
height: 10%;
background-color: yellow;
}
if I remove height: 15% then I can see my background color of yellow:
if I dont its some greyish color. and looks to take up about 20% of the screen:
So basically how would I get my divs to take up the correct height percentage I assigned them?
I hope Im making sense.
Thanks in advance.
You can't float to top or bottom. That doesn't exist. So you have to remove that from your header and footer.
And clear the footer by doing:
footer {
clear: both;
}
your problem is that there is no:
float:top;
or
float:bottom;
What you need to do is make them both float:left;
here is a copy and paste of your code with the update:
<!DOCTYPE html PUBLIC "-//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>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
html, body{
padding: 0;
margin: 0 auto;
height: 100%;
}
#header {
float: left;
width: 100%;
height: 15%;
background-color: green;
}
#navbar {
float: left;
width: 20%;
height: 70%;
background-color: red;
}
#content {
float: right;
width: 80%;
height: 70%;
background-color: blue;
}
#footer {
float: left;
width: 100%;
height: 15%;
background-color: yellow;
}
</style>
</head>
<body>
<div id="header"> Header </div>
<div id="navbar"> Nav Bar </div>
<div id="content"> Body </div>
<div id="footer"> Footer</div>
</body>
</html>
Related
I have code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
html, body {
height: 100%;
}
.container {
min-height: 200px;
max-height: 500px;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
box-sizing: border-box;
max-width: 1440px;
margin: auto;
height: 100%;
}
header, footer {
height: 150px;
background: #ccc;
}
footer {
position: absolute;
width: 100%;
height: 50px;
bottom: 0;
}
</style>
</head>
<body>
<header></header>
<div class="container">
content blah blah blah
</div>
<footer>
fsdfsdfsdfsdfsdffdsadsfasd
</footer>
</body>
</html>
How I Can vertically align center this container, considering header height and footer (position: absolute and height). I think, what this we can do with display: flex, are how?
I use Bootstrap 3 grid
Example jsbin: http://jsbin.com/timatozuco/edit?html,output
Here try.. Just configure updated code based on your adjustment..
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
html, body {
height: 100%;
}
.container {
display: -ms-flexbox;
display: flex;
top: 10%;
left: 50%;
position: absolute;
box-sizing: border-box;
}
header, footer {
height: 150px;
background: #ccc;
}
footer {
position: absolute;
width: 100%;
height: 50px;
bottom: 0;
}
</style>
</head>
<body>
<header></header>
<div class="container">
content blah blah blah
</div>
<footer>
fsdfsdfsdfsdfsdffdsadsfasd
</footer>
</body>
</html>
If I understand your question correctly, then I guess you want to make the whole container in the center of the page on the basis of header and footer size.
So below code is the solution
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
font-family: arial, sans-serif;
font-size: 14px;
color: #000;
line-height: 22px;
text-decoration: none;
}
.wrapper {
width: 100%;
background: #fff;
margin: -128px auto 0;
height: 100%;
text-align: left;
clear: both;
display: table;
position: relative;
z-index: 1;
}
header {
width: 100%;
margin: auto;
background: #ccc;
height: 66px;
position: relative;
z-index: 2;
border-bottom: 20px solid #fff;
}
footer {
background: #ccc;
width: 100%;
margin: auto;
height: 22px;
clear: both;
border-top: 20px solid #fff;
position: relative;
z-index: 2;
}
.container {
vertical-align: middle;
display: table-cell;
padding: 128px 0 0;
}
.container .content {
text-align: center;
background: yellow;
padding: 0 10px;
width: 300px;
height: 200px;
margin: 0 auto;
}
</style>
</head>
<body>
<header>
Header content
</header>
<div class="wrapper">
<div class="container">
<div class="content">
Container content
</div>
</div>
</div>
<footer>
Footer content
</footer>
</body>
</html>
or you can also visit this link : Codepen - centered container based on header & footer
I have to do a project in school using HTML and CSS and so far all am trying to do is the page layout and for whatever reason when I put the footer for my webpage it pops up on the top of the page instead of the bottom and I'm also having a bit of trouble trying to resize it to fix the whole page.
#wrapper {
width: 1024px;
height: 768px;
background-color: #E1E0E0;
}
#banner {
width: 1024px;
height: 220px;
background-color: #6E6A6A;
}
#menuTop {
width: 1024px;
height: 35px;
background-color: #ACAAAA;
}
#columnLeft {
width: 220px;
height: 438px;
background-color: #CBCACA;
float: left;
}
#columnRight {
width: 220px;
height: 438px;
background-color: #CBCACA;
float: right;
}
#content {
width: 584;
height: 438;
background-color: #E1E0E0;
margin-left: 220px;
}
#footer {
width: 1024px;
height: 75px;
background-color: #6E6A6A;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="FinalHTML.css">
<title></title>
</head>
<body>
<div id="wrapper">
<div id="banner">
</div>
<div id="menuTop">
</div>
<div id="columnLeft">
</div>
<div id="columnRight">
</div>
<div id="content">
</div>
<div id="footer">
</div>
</div>
</body>
</html>
The height and width must have a unit, like px, dpi, etc.
#wrapper {
width: 1024px;
height: 768px;
background-color: #E1E0E0;
}
#banner {
width: 1024px;
height: 220px;
background-color: #6E6A6A;
}
#menuTop {
width: 1024px;
height: 35px;
background-color: #ACAAAA;
}
#columnLeft {
width: 220px;
height: 438px;
background-color: #CBCACA;
float: left;
}
#columnRight {
width: 220px;
height: 438px;
background-color: #CBCACA;
float: right;
}
#content {
width: 584px; // here you frogot the unit (px in this case)
height: 438px;
background-color: #E1E0E0;
margin-left: 220px;
}
#footer {
width: 1024px;
height: 75px;
background-color: #6E6A6A;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="FinalHTML.css">
<title></title>
</head>
<body>
<div id="wrapper">
<div id="banner">
</div>
<div id="menuTop">
</div>
<div id="columnLeft">
</div>
<div id="columnRight">
</div>
<div id="content">
</div>
<div id="footer">
</div>
</div>
</body>
</html>
You forgot to type px after your height and width on the content div.
width: 584;
height: 438;
should be
width: 584px;
height: 438px;
#content {
width: 584;
height: 438;
background-color: #E1E0E0;
margin-left: 220px;
}
You forgot the "px"
I need your help,
How can the existing code below be modified such that the height of my css boxes are then liquified (as it needs to be this way to adjust to the height of my users screen resolution)?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
* { margin:0; padding: 0 }
#container {
width: 100%;
margin: 0 auto;
}
#primary {
float: left;
width: 10%;
background: red;
height: 600px;
}
#content {
float: left;
width: 80%;
background: blue;
height: 600px;
}
#secondary {
float: left;
width: 10%;
background: green;
height: 600px;
}
</style>
</head>
<body>
<div id="container">
<div id="primary">
<p>left</p>
</div>
<div id="content">
<p>center</p>
</div>
<div id="secondary">
<p>right</p>
</div>
</div>
</body>
</html>
Equal height columns can easily be achieved by using the table* display properties.
http://cssdeck.com/labs/2iy6anjy
#container {
display: table;
width: 100%;
margin: 0 auto;
}
#primary {
display: table-cell;
width: 10%;
background: red;
}
#content {
display: table-cell;
width: 80%;
background: blue;
}
#secondary {
display: table-cell;
width: 10%;
background: green;
}
Have a look at the jQuery Equal Heights plugin by Filament:
https://github.com/filamentgroup/jQuery-Equal-Heights
Initialise it:
$('#container div').equalHeights();
remove fixed height and give overflow:hidden
I need help in extending my div to the bottom of the page when there is not enough content to do so, when I add a height of 100% to the content and container nothing changes and when I add it to the body everything messes up. I am trying to give as much information as possible and so have provided the CSS and HTML below.
CSS:
(all of it, a lot of it is probably unnecessary in regards to this problem sorry)
body {
background-color: #111014;
background-image: url("images/bg.png");
background-repeat: repeat-x;
color: #dad8df;
font-family: tahoma;
overflow-y: scroll;
}
#container {
height: 100%;
width: 1000px;
margin-left: auto;
margin-right: auto;
}
img{
border-style: none;
}
#banner {
margin-top: 45px;
margin-bottom: 38px;
height: 68px;
width: 1000px;
background-image: url("images/bannerbg.png");
}
#navigation {
height: 36px;
width: 1000px;
margin-left: 49px;
}
#content {
background-image: url("images/contentbg.png");
background-repeat: repeat-y;
height: 100%;
width: 850px;
padding-left:80px;
padding-bottom: 20px;
margin-bottom: -8px;
padding-right: 50px;
overflow: hidden;
}
#title {
height: 90px;
width: 542px;
padding-left: 60px;
padding-top: 36px;
background-image: url("images/titlebg.png");
background-repeat:no-repeat;
font-family: tahoma;
font-size: 2.5em;
color: #dad8df;
margin-left: -80px;
}
#slideshow {
height: 285px;
width: 840px;
margin-left: auto;
margin-right: auto;
background-color: #2e2c35;
float: left;
margin-bottom: 20px;
}
#slideleft {
height: 38px;
width: 23px;
background-image: url("images/slideleft.png");
float: left;
margin-left: -60px;
margin-top: 104px;
}
#slideright {
height: 38px;
width: 23px;
background-image: url("images/slideright.png");
float: right;
margin-right: -50px;
margin-top: 104px;
}
#emailform {
color: #dad8df;
font-family: tahoma;
overflow: hidden;
}
.inputs {
float: right;
width: 200px;
font: .9em tahoma;
}
#largemessage {
float: right;
clear: both;
width: 700px;
height: 150px;
resize: none;
font: .9em tahoma;
}
#submit {
margin-top: 20px;
clear: both;
float: right;
}
hr {
border-width: 3px 0 0 0;
border-style: dotted;
}
.contacterror {
margin-right: 180px;
height: 20px;
width: 300px;
color: red;
float: right;
padding-left: 20px;
}
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" xml:lang="en" lang="en">
<head>
<title>About :: Lesley Robb Fine Art and Design</title>
<link rel="icon" type="image/png" href="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" href="design.css" type="text/css"/>
<script src="" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="banner">
</div>
<div id="navigation">
<img src="images/nav_home.png" alt="Home" /><img src="images/nav_portfolio.png" alt="Portfolio" /><img src="images/nav_about.png" alt="About" /><img src="images/nav_contact.png" alt="Contact" />
</div>
<div id="content">
<div id="title">
About
</div>
You can edit this section after you Log In to the Control Panel. :)</div>
</div>
</body>
</html>
The Page As it Currently Is
An image of it for future reference once I have fixed the problem
Thanks in advance for your time,
Callum
Try using a technique called Faux Columns.
Usually, if you add
body, html{
height:100%;
}
the container div will inherit from it.
Try setting the height on your #container div to auto.
#container {
height:auto;
That should do it!
As the doc said:
The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'
http://www.w3.org/TR/CSS2/visudet.html#the-height-property
If adding html,body { height:100%; } mess up, it's certainly because browsers set default margin/padding for these elements.
The simpler solution for your problem is to set for #container min-height the viewport height and set it a background which will fake #content reaches the bottom. Faux columns as Nathaniel said.
How to do to avoid having the scroller with a sticky footer to the bottom of the page (not bottom of window)?
When I remove height=100% from content and sidebar, I'm no more getting the scroller. However, when doing so, my content and sidebar do not fill all the space down to the footer.
<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 13</title>
<style media="all" type="text/css">
* {
margin: 0;
padding: 0;
}
html, body, #wrap, form {
height: 100%;
}
#wrap, #footer {
width: 750px;
margin: 0 auto;
}
#wrap {
background: #cff;
}
html, body {
color: #000;
background: #a7a09a;
}
body > #wrap {
height: 100%;
min-height: 100%;
}
form {
/*height: auto;*/
min-height: 100%;
}
#main {
background: #000;
height:100%;
min-height:100%;
height: auto !important; */
}
#content {
height:100%;
float: left;
padding: 10px;
float: left;
width: 570px;
background: #9c9;
}
#sidebar {
height:100%;
float: left;
width: 140px;
background: #c99;
padding: 10px;
}
#footer {
position: relative;
margin-top: -100px;
height: 100px;
clear: both;
background: #cc9;
bottom: 0;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
#header {
/*padding: 5px 10px;*/
background: #ddd;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="wrap">
<div id="main" class="clearfix">
<div id="header">
<h1>header</h1>
</div>
<div id="sidebar">
<h2>sidebar</h2>
</div>
<div id="content">
<h2>main content</h2>
</div>
</div>
</div>
<div id="footer">
<h2>footer</h2>
</div>
</form>
</body>
</html>
Here is finally one solution (I don't remember where I get this code .... it's not mine ;-) ) :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="Content-Type">
<title>CSS Layout - 100% height</title>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
height: 100%; /* needed for container min-height */;
background: gray;
font-family: arial,sans-serif;
font-size: small;
color: #666;
}
div#container {
position: relative; /* needed for footer positioning*/;
margin: 0 auto;
/* center, not in IE5 */ width: 750px;
background: #f0f0f0;
height: auto !important; /* real browsers */;
height: 100%; /* IE6: treaded as min-height*/;
min-height: 100%; /* real browsers */
}
div#header {
padding: 1em;
/*background: #ddd url("../csslayout.gif") 98% 10px no-repeat;*/
border-bottom: 6px double gray;
}
div#content {
padding: 1em 1em 5em; /* bottom padding for footer */
}
div#footer {
position: absolute;
width: 100%;
bottom: 0; /* stick to bottom */;
background: #ddd;
border-top: 6px double gray;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
entete </div>
<div id="content">
contenu </div>
<div id="footer">
pied de page
</div>
</div>
</body>
</html>
I've done this using a container div with a 100% min-height. Then, I have the page content and footer div's in the container. Here's my HTML:
<div id="MainContainer">
<div id="FullPage">
</div>
<div id="Footer">
</div>
</div>
And here's my corresponding CSS:
html, body, #MainContainer
{
min-height: 100%; /*Sets the min height to the height of the viewport.*/
height: 100%; /*Effectively, this is min height for IE5+/Win, since IE wrongly expands an element to enclose its content. This mis-behavior screws up modern browsers*/
margin: 0;
padding: 0;
}
html > body #MainContainer
{
height: auto; /*this undoes the IE hack, hiding it from IE using the child selector*/
}
#MainContainer
{
position: absolute;
top: 0;
left: 0;
width: 100%;
}
#FullPage
{
height: auto;
width: 100%;
min-height: 100%;
margin: 0;
padding: 0 0 25px 0;
overflow: hidden;
}
#Footer
{
clear: both;
left: 0;
width: 100%;
height: 20px;
position: absolute;
bottom: 0;
}