I want to create fixed footer but , is it possible with 960 gs , because I am having trouble with height of container div . I can no set it to %100.
<div class="container_12" >
<div class="grid_3" id="side-space"></div>
<div class="grid_6">
<div id="content-box"></div>
</div>
<div class="grid_3" id="side-space"></div>
</div>
I don't believe 960.gs has much to do with height.. it just deals with columns and clearing. Nice framework to start with. Try setting body to 100% and then setting #content-box to 100%. Here is a random example I came across
<!-- IE in quirks mode -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<title>Fixed footer</title>
<style type="text/css">
body{
margin:0;
padding:0 0 <length> 0;
}
div#footer{
position:absolute;
bottom:0;
left:0;
width:100%;
height:<length>;
}
#media screen{
body>div#footer{
position: fixed;
}
}
* html body{
overflow:hidden;
}
* html div#content{
height:100%;
overflow:auto;
}
</style>
<div id="footer"> footer </div>
<div id="content"> content </div>
Related
I'm building a 1 column responsive blog site.
I have a fixed position header with navigation, content section with x amount of blog posts (as excerpts) and a footer containing a contact form.
<div id="header">Navigation & Branding</div>
<div id="content">Blog Content</div>
<div id="footer">Contact Form</div>
Everything is working as required apart from the height of the footer.
I would like to make the footer height match the height of the browser window, so that (apart from the fixed header) when you scroll to the bottom of the page the only the footer is visible and fills the browser window entirely.
How do I achieve this with css?
You can do this by setting the #footer as position:absolute; then setting both the width & height to 100%.
As long as your footer div is a direct descendant of the body, and the body has the margin and padding set to 0, setting the height of your footer to 100% should do.
This example should demonstrate:
<html>
<head><title>title</title><head>
<body style="margin:0; padding:0;">
<div id="header" style="height: 300px; background-color: blue;">Navigation & Branding</div>
<div id="content" style="height: 500px; background-color: red;">Blog Content</div>
<div id="footer" style="height:100%; background-color: yellow;">Contact Form</div>
</body>
</html>
you want some thing like this ??
HTML:
<div id="mainbody">
<div id="header">Navigation & Branding</div>
<div id="content">Blog Content</div>
<div id="footer">Contact Form</div>
</div>
CSS:
html, body{
width:100%;
height:100%;
}
#header{
position:fixed;
top:0;
height:50px;
width:100%;
background:red;
color:white;
}
#mainbody{
padding-top:50px;
background:blue;
color:white;
width:100%;
}
#footer{
background:green;
position:absolute;
height:100%;
width:100%;
color:white;
}
DEMO
I have this code
<!-- <body> (automatically added by jsFiddle) -->
<header id="header">
<h1>Title</h1>
</header>
<div id="mainContent">
Some text. End.<br />
</div>
<!-- </body> -->
How can I stretch #mainContent to fill all the available space below #header ?
That's for a Windows 8 app, so I can use CSS 3 (including -ms-grid-*) and JavaScript without worrying about browser support!
You can use display:table property for this:
HTML
<div class="parent">
<header id="header">
<h1>Title</h1>
</header>
<div id="mainContent">
Some text. End.<br />
</div>
</div>
CSS
body,html{
height:100%;
}
.parent{
display:table;
height:100%;
box-sizing:border-box;
width:100%
}
#header, #mainContent {
background:red;
display:table-row;
}
/* How can I make #header to fill the full available left space */
#header {
height:10%;
background:green;
}
Check this http://jsfiddle.net/cD2RK/3/
My code was working when
<!DOCTYPE html>
<html>
<body style="position:fixed; top:0px; left:0px;bottom:0px; right:0px; margin:0px;">
<div style="height:100%; width:100%; border:solid;"></div>
</body>
</html>
But not working when i added display:table-cell; to div for using vertical-align
<!DOCTYPE html>
<html>
<body style="position:fixed; top:0px; left:0px;bottom:0px; right:0px; margin:0px;">
<div style="height:100%; width:100%; border:solid; display:table-cell;vertical-align:middle;"></div>
</body>
</html>
I want the div to cover the whole white space in body
Your code should work now.
<html>
<body style="position:fixed; top:0px; left:0px;bottom:0px; right:0px; margin:0px;">
<div style='display : table; width : 100%; height : 100%'>
<div style='display : table-row;'>
<div style="border:solid; display : table-cell;">
</div>
</div>
</div>
</body>
</html>
Example
Rule of thumb : Always have a proper markup whenever display : table-cell is concerned.
You have to set the height to 100% for all parent elements then...
html, body {
height: 100%
}
Give it a try, it worked for me. And better remove all the CSS properties you set to the body-element before.
Having div.table > div.table-row > table.table-cell with height of its container is a bit tricky thing. One of the easiest way is that you can add
.table {
position: absolute;
}
in this case if you will add
.table {
height: 100%;
}
That will fit its parent height.
I have a center aligned with 1060px width. Within this, I have two more divs as and with different background color/images and width of 260px and 800px respectively.
Now I need to make the height of the two child divs same, irrespective of the content inside them. If “child1” has huge content and we need to scroll down the browser to see it and “child2” has less content, then also “child2” should have the height extended to match with the “child1”. On the other hand if both “child1” and “child2” has less content and does not produce browser scroll, then both of the should occupy the height of the browser window. The code snippet is given below.
<html>
<head>
<style type="text/css">
* { margin:0; padding:0; }
.parent { clear:both; margin:auto; width:1060px; }
.child1 { background-color:#999999; float:left; width:260px; }
.child2 { background-color:#99CC00; float:left; width:800px; }
.child1a, child2a { float:left; width:100%; }
.child2a { border-bottom:1px solid #000000; height:500px; }
</style>
</head>
<body>
<div class="parent">
<div class="child1">
<div class="child1a">1</div>
<div class="child1a">2</div>
<div class="child1a">3</div>
</div>
<div class="child2">
<div class="child2a">1</div>
<div class="child2a">2</div>
<div class="child2a">3</div>
</div>
</div>
</body>
</html>
Is it possible to solve it using only CSS, or need to use JavaScript?
You can do using 'display:table-cell' .
http://jsfiddle.net/sWHKs/
If i am right display:inline should display div on the same line without any line break. This is my web page where display:inline simply makes my div invisible:
<html>
<head>
<style type="text/css">
.body{
max-width:3072px;
min-width:3072px;
margin:0px auto;
background:#293231;
}
.page1{
background:url('Main.jpg') no-repeat;
width:1024px;
height:211px;
}
.page2{
background:url('Page2.jpg') no-repeat;
width:1024px;
height:211px;
display:inline;
}
.page3{
background:url('Page3.jpg') no-repeat;
width:1024px;
height:211px;
display:inline;
}
.wrapper{
display:block;
width:100%;
height:auto;
}
</style>
</head>
<body class="body">
<div class="wrapper">
<div class="page1">
</div>
<div class="page2">
</div>
<div class="page3">
</div>
</div>
</body>
</html>
I can see divs with class = page1, but page2 and page3 are invisible.
A non-block element can't have height/width specified like that (and with no content inside, it'll have nothing to give it size) - instead you want inline-block, like this:
display: inline-block;
You can see a full list of options for display here
Unfortunately, display: inline-block is not supported by older versions of IE. You can do this by floating your three inner div tags left, and undoing the float on the containing element. Here is the complete example (see my comments for the relevant changes):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
.body { max-width:3072px; min-width:3072px; margin:0px auto; background:#293231; }
.page1{ background:url('Main.jpg') no-repeat; }
.page2 { background:url('Page2.jpg') no-repeat; }
.page3{ background:url('Page3.jpg') no-repeat; }
/* These next two lines are my changes. */
/* Float these guys left */.page1, .page2, .page3 { width:1024px; height:211px; float: left; }
/* Add overflow: hidden to "undo" the floating */.wrapper{ overflow: hidden; width:100%; height:auto; }
</style>
</head>
<body class="body">
<div class="wrapper">
<div class="page1">
</div>
<div class="page2">
</div>
<div class="page3">
</div>
</div>
</body>
</html>