I have changed the footer's background color to yellow but the code just is not working.
I have been working on this for past 2 hours. Please don't bash me out!
Just help. Thanks.
<!DOCTYPE html>
<html>
<head>
<style>
#footerMain{
min-width: 1000px;
background-color: yellow;
}
.footerLeft{
position: absolute;
height: 20px;
width: 80px;
}
.footerRight{
position: absolute;
margin-left: 800px;
height: 20px;
width: 80px;
}
</style>
</head>
<body>
<footer id="footerMain">
<div class="footerLeft">
<h1>Hello</h1>
</div>
<div class="footerRight">
<h1>Bye</h1>
</div>
</footer>
</body>
try this , HTML
<footer id="footerMain" class="clearfix">
<div class="footerLeft">
<h1>Hello</h1>
</div>
<div class="footerRight">
<h1>Bye</h1>
</div>
</footer>
CSS:
.clearix{
zoom:1;
}
.clearfix:after, .clearfix:before{
line-height: 0;
content: '';
display: table;
}
.clearfix:after{
clear:both;
}
#footerMain{
background-color:yellow;
}
div.footerLeft{
width:50%;
float:left;
}
div.footerRight{
width:50%;
float:right;
}
Because you are using position absolute; so basically #footerMain has no height, but still, you better not use position absoute, more robust way would be floating property
#footerMain{
min-width: 1000px;
background: yellow;
height: 100px; /* add height & add more height, because h1 has margin */
}
.footerLeft{
float: left; /*remove position: absolute;*/
height: 20px;
width: 80px;
}
.footerRight{
float: right; /*remove position: absolute;*/
height: 20px;
width: 80px;
}
<footer id="footerMain">
<div class="footerLeft">
<h1>Hello</h1>
</div>
<div class="footerRight">
<h1>Bye</h1>
</div>
</footer>
Your #footerMain element contains only absolute-positioned elements. Therefore, it is considered empty as far as layout goes. Consequently, its height is zero, making it invisible.
Add some height to it - probably 20px to match the height of the elements.
Add a height rule to footerMain like 40px
Related
I want my navigation text to be displayed at the bottom right of the header div but no matter what I try it only wants to align at the bottom of the page or some other position I do not want. I don't understand why this is happening, absolute should refer to the header div, correct?
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
margin: 0;
padding: 0;
font-size: 14px;
font-family: Arial;
scroll: overflow;
}
.header {
margin: auto;
width: 100%;
display: flex;
background: gray;
height: 60px;
}
.header-navigation {
position: absolute;
bottom: 0px;
right: 0px;
}
.container {
margin: auto;
width: 100%;
display: flex;
height: calc(100vh - 60px);
}
.left {
background: #e8edf0;
flex-basis: 45%;
}
.right {
background: grey;
flex-basis: 55%;
}
.content {
margin: 20px;
padding: 20px;
background: white;
}
</style>
</head>
<body>
<div class="header">
<div class="header-navigation">
test
</div>
</div>
<div class="container">
<div class="left">
<div class="content">
</div>
</div>
<div class="right">
<div class="content">
</div>
</div>
</div>
</body>
</html>
You should add position: relative; to header. This will make the .header-navigation consider position from .header when you make it absolute.
.header {
position: relative;
}
.header-navigation {
position: absolute;
}
Now .header-navigation will use position according to .header
absolute should refer to the header div, correct?
Only if header div itself has a position.
When you set the position of one of its children to absolute as you have in this case, the system hunts back up the page to find the first ancestor element that has a position and then it positions the element you are trying to position relative to that.
I'm having many issues regarding the positioning of div boxes in HTML and CSS. I have got a wrapper and 2 boxes. I want one box on the left and the other on the right, however the box on the right appears under the others. Why is this? I don't want to use "top" as it messes with a few other things. What do I do?
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Harry Kitchener - Home</title>
</head>
<body>
<div id="wrapper">
<div id="navbar"></div>
<div id="newsbar"></div>
</div>
</body>
</html>
#wrapper
{
position: relative;
height: 100%;
min-height: 100%;
min-width: 1000px;
background-color: #ccc;
}
#navbar
{
position: relative;
height: 100%;
width: 15%;
background-color: #A13927;
}
#newsbar
{
position: relative;
margin-left: auto;
height: 100%;
width: 15%;
background-color: #A13927;
}
FIXED:
#wrapper
{
height: 100%;
min-height: 100%;
min-width: 1000px;
background-color: #ccc;
}
#navbar
{
float: left;
height: 100%;
width: 15%;
background-color: #A13927;
}
#newsbar
{
float: right;
height: 100%;
width: 15%;
background-color: #A13927;
}
The default display for a div is: "display: block".
Blocks don't obey "width" style and span as 100%. The following elements are put below the block-displayed div.
Try adding the style to your divs as "display: inline-block" (i.e. to those divs you want to see consecutive).
EDIT: did not fully understand the question fully. BESIDES doing what i told, you can put "float: left" and "float: right" to those divs if you want them to stick to the left and right respectively.
add Float:left and float:right:
#navbar
{
position: relative;
height: 100%;
width: 15%;
background-color: #A13927;
float:left;
}
#newsbar
{
position: relative;
margin-left: auto;
height: 100%;
width: 15%;
background-color: #A13927;
float:right;
}
The answer to your question is because the elements are position relative to each other.
You have multiple "solutions":
1) float your elements. See JSFiddle
E.g.
#newsbar
{
float: right;
width: 15%;
background-color: #A13927;
}
2) Change your positioning to be fixed, but likely you want absolute. See JSFiddle
E.g.
#newsbar
{
position: absolute;
right:0;
width: 15%;
background-color: #A13927;
}
3) Other options as well (display: table-cell, et cetera)
You have a ton of solutions for this one. Here are three ways of doing it, each method will produce slightly different results. jsFiddle
HTML:
<div class="method-1">
<div class="left">
</div>
<div class="right">
</div>
</div>
<div class="method-2">
<div class="left">
</div>
<div class="right">
</div>
</div>
<div class="method-3">
<div class="left">
</div>
<div class="right">
</div>
</div>
CSS:
div div {
height: 10em;
width: 15%;
border: 1px solid red;
}
div.method-1 div {
display: inline-block;
}
div.method-2 {
height: 10em;
}
div.method-2 div {
position: absolute;
display: block;
}
div.method-2 div.right {
left: 15%;
margin-left: 1em;
}
div.method-3 {
display: table;
width: 30%;
}
div.method-3 div {
display: table-cell;
}
I am trying to make 3 div's in row design. Where the header and footer have fixed height.
The center div expands to fill the empty space. I have tried but the closest I got is the code below. Still having problems with the center div which expands over the footer div.
html:
<div id='container'>
<div id='rowOne'>row 1</div>
<div id='rowTwo'>row 2</div>
<div id='rowThree'>row 3</div>
</div>
css:
#rowOne {
width: 100%;
height: 50px;
background: green;
}
#rowTwo {
width: 100%;
background: limegreen;
height:100%;
overflow:hidden;
}
#rowThree {
width: 100%;
position: fixed;
clear: both;
background: green;
position:absolute;
bottom:0;
left:0;
height:50px;
}
#container {
height: 100%;
}
Three Row pure CSS
I know this post is getting on a bit, but despite claims to the contrary, you can do this very simply with CSS. No need for JavaScript, jQuery, CSS 3 hacks etc.
Here's a couple of jsf's that show fixed header and footer and dynamic body div.
This first one shows fixed pixel height header and footer and dynamic body EXACTLY as you wanted in your image
http://jsfiddle.net/LBQ7K/
<body>
<div class="header"><p>Header</p></div>
<div class="cssBody"><p>Hello World</p></div>
<div class="footer"><p>Footer</p></div>
</body>
html, body, {
height: 100%;
}
.header {
position: absolute;
top: 0px;
height: 50px;
width: 100%;
background: #f00;
}
.footer {
position: absolute;
bottom: 0;
height: 50px;
width: 100%;
background: #00f;
}
.cssBody {
position: absolute;
top: 50px;
bottom: 50px;
width: 100%;
background: #0f0;
}
The second shows you can use the same technique to have dynamic headers & footers.
http://jsfiddle.net/reqXJ/
<body>
<div class="header"><p>Header</p></div>
<div class="cssBody"><p>Hello World</p></div>
<div class="footer"><p>Footer</p></div>
</body>
html, body, {
height: 100%;
}
.header {
position: absolute;
top: 0px;
height: 15%;
width: 100%;
background: #f00;
}
.footer {
position: absolute;
bottom: 0;
height: 15%;
width: 100%;
background: #00f;
}
.cssBody {
position: absolute;
top: 15%;
bottom: 15%;
width: 100%;
background: #0f0;
}
This is a very common problem, one of the solutions that worked for me is from the following website:
http://ryanfait.com/sticky-footer/
with the code:
http://ryanfait.com/sticky-footer/layout.css
and another popular choice:
http://www.cssstickyfooter.com/
If this does not meet your needs, let us know, we can help more.
Seems like you are try to do a sticky footer, well... you will need a few hacks:
HTML:
<div id='container'>
<div class="header">
<h1>Sticky Footer!</h1>
</div>
<div id='rowOne'>row 1</div>
<div id='rowTwo'>row 2</div>
<div id='rowThree'>row 3</div>
<div class="push"></div>
</div>
<div id='footer'></div>
CSS
.container {
min-height: 100%;
height: auto !important;height: 100%;
/* the bottom margin is the negative value of the footer's height */
margin: 0 auto -142px;
}
.footer, .push{
height: 142px; /* .push must be the same height as .footer */
}
Note: Replace the footer and push height for your fixed height and don't forget to insert the push div after the rows in the container.
You can fake this by absolutely positioning the rows, and adding padding to top and bottom for the middle row. You cannot do this like you were doing with tables
#container { position:relative; height:800px } // needs height
#rowOne, #rowTwo, #rowThree { position:absolute }
#rowOne { top:0; left:0 }
#rowThree { bottom:0; left:0 }
#rowTwo { left:0; top:0; padding:50px 0; } // top and bottom padding 50px
could this line of code help?
DEMO
Try this:
#container{
...
position:relative;
}
#content{
min-height: xxx;
}
This should exactly do what you want:
html code:
<div id="header">
header
</div>
<div id='container'>
<div id='rowOne'>one</div>
<div id='rowTwo'>two</div>
<div id='rowThree'>three</div>
</div>
<div class="clearfix"></div>
<div id="footer">
footer
</div>
CSS code:
.clearfix {
clear: both;
}
#header, #footer {
background-color: red;
}
#container {
width: 100%;
}
#rowOne {
width: 25%;
background: green;
float: left;
}
#rowTwo {
width: 55%;
height: 100px;
background: limegreen;
float: left;
}
#rowThree {
width: 20%;
background: green;
float: left;
}
You can also test it on jsFiddle
Have you tried looking at a CSS framework? They come with default classes you can use to set up something like that within a few short minutes. They also help producing cleaner html and interfaces that you can easily redesign at a later time.
http://twitter.github.com/bootstrap/index.html
I hope you are looking like this :- DEMO
CSS
#container {
height: 100%;
}
#rowOne {
height: 50px;
background: green;
position:fixed;
left:0;
right:0;
}
#rowTwo {
background: limegreen;
min-height:500px;
position:absolute;
left:0;
right:0;
top:50px;
}
#rowThree {
position: fixed;
background: green;
bottom:0;
left:0;
right:0;
height:50px;
}
HTML
<div id='container'>
<div id='rowOne'>row 1</div>
<div id='rowTwo'>row 2</div>
<div id='rowThree'>row 3</div>
</div>
In response to your comment on jedrus07's answer:
all this sollutions expand the center div behind the footer div. I want a solution with each div having only his own space.
The only way to do that is with CSS 3 calc(). If you don't need to support very many browsers, that's an option, and here's a demo of it in action:
http://jsfiddle.net/5QGgZ/3/
(Use Chrome or Safari.)
HTML:
<html>
<body>
<div id='container'>
<div id='rowOne'>row 1</div>
<div id='rowTwo'>row 2</div>
<div id='rowThree'>row 3</div>
</div>
</body>
</html>
CSS:
html, body, #container {
height: 100%;
}
#rowOne {
height: 50px;
background: #f00;
}
#rowTwo {
height: -webkit-calc(100% - 100px);
background: #0f0;
}
#rowThree {
height: 50px;
background: #00f;
}
If you want wider browser support, you're going to have to go with a sticky footer solution like the ones jedrus07 mentioned, or Tom Sarduy's answer.
One way would be using Jquery to set the minimum height of the middle div to be the height of the screen, minus the height of the other two divs (100px)
something like this should work:
$(document).ready(function() {
var screenHeight = $(document).height() - 100px;
$('#rowTwo').css('min-height' , screenHeight);
});
I would like to try to build a clean and nice piece of code where I can accomplish the result you see in the image below. It's ok in Firefox, Chrome or Safari, but not in IE.
I created a JSFiddle with the code.
Basically all I want a 100% width of the red bar (edge to edge in the window) but the content (including the navigation) should be limited in width.
So I'm looking for a nice, clean snippet to make this work in all browsers (including IE...)
<style>
body{
background-color: #fff;
margin: 0;
padding: 0;
}
#subtopContainer{
background-color: #f00;
}
#subtop, #header, #content{
width: 980px;
margin-left: auto;
margin-right: auto;
}
#header{
height: 150px;
}
#subtop{
height: 50px;
}
</style>
<div id='container'>
<div id='headerContainer'>
<div id='header'></div>
</div>
<div id='subtopContainer'>
<div id='subtop'></div>
</div>
<div id='contentContainer'>
<div id='content'></div>
</div>
</div>
<style>
body { background-color: #fff; margin: 0; padding: 0; }
div.wrapper { margin: 0 auto; width: 980px; background: lime}
div.header { height: 70px; margin-bottom: 40px;}
div.content { height: 400px; }
div.bar { height: 40px; background: #f00; overflow: hidden; position: absolute; top: 70px; width: 100%;}
</style>
<body>
<div class="bar"></div>
<div class="wrapper">
<div class="header">
Header Stuff
</div>
<div class="content">
In order for this to work,
div.bar 'top' = div.header 'height'
div.header 'margin-bottom' = div.bar 'height'.
</div>
</div>
</body>
Again me with my divs =(.
I have this:
<div id="header"></div>
<div id="body">
<div id="..."></div>
<div id="..."></div>
<div id="content"></div>
</div>
<div id="footer"></div>
and css:
#body { width: 100%; margin 0 auto; }
#content { position: absolute; height: 200px; width: 100%; }
#footer { height: 63px; clear:both; }
Now result:
content div with much text and footer under text.
How can I make my footer under all content-area?
I've encountered this situation several times. I've been using sticky footers. It's widely compatible with several browsers and just seems to work.
If you use this styling you will see the (blue) #footer under the (red) #content as you requested:
#body {width: 600px; margin 0 auto; }
#content {position: relative; height: 200px; width: 600px; background-color: red; }
#footer {height: 63px; clear:both; width: 600px; background-color: blue; }