|
|||||||
New to SitePoint Forums? Register here for free!
|
 |
|
|
Thread Tools | Display Modes |
|
|
Oct 17, 2008, 10:33
|
#1 |
|
SitePoint Zealot
 Join Date: Feb 2005
Location: sittin here on the Group W bench
Posts: 142
|
I'm building a 3 column layout based off of the 3colfixedtest_sourcenone demo, and I have some questions about how the css works:
Code:
body {
background:#d2da9c url(images/lcolbg.jpg) repeat-y left top;
color: #000;
position:relative;/* for ie7*/
}
#header {
position:absolute;
top:0;
left:0;
width:100%;
height:70px;
background:#304a00;
overflow:hidden;
color: #fff;
}
#right {
position:relative;/*ie needs this to show float */
width:140px;
float:right;
margin-right:-139px;/*must be 1px less than width otherwise won't push footer down in some browsers */
padding-top:71px;/* to clear header*/
color:#fff;
left:1px;
padding-bottom:52px;/* clear footer*/
}
.outerwrap {
float: left;
width: 100%;
padding-top:71px;/* to clear header*/
margin-right:-3px;/* to stop columns dropping*/
}
<body id="" class="">
<div id="top"></div>
<div id="outer">
<div class="outerwrap">
<div id="centrecontent">
<p><strong>3 column layout (This layout has content first (unlike my other demos) - and is based on an idea by <a href="http://www.positioniseverything.net/temp/piefecta-beta.html">BigJohn</a> which uses similar techniques to mine.)</strong></p>
<p>Any column can be the longest. Footer will stay at bottom of window unless content is greater then it stays at bottom of document. This layout is a little bit temperamental and the negative margins are the key to keeping it solid.</p>
<p>Only tested on PC (IE5, 5.5 , 6, Mozilla 1.3+ , Firebird 0.6.1, Opera7,Netscape 6.2). Opera doesn't like the footer but it's usable. ie5 mac will not like the footer either due to the 100% height on html,body .</p>
<p>The left and right column colours are the background showing through. A different left column background colour can be achieved by using a repeating image on the left side of the body as in this example.</p>
<p>There is nothing special about this demo as similar techniques have been used before, however they are not usually integrated into one example. The secret to this demo is the left and right columns which are floated negatively from the centre container. If you float them completely in the gaps at the side then they don't clear the footer. However
if you leave them overlapping the centre content by 1 pixel then the footer is pushed down as required. Or you can float them completely to the side and just add some padding bottom to the columns to clear the footer.</p>
<p class="expand"><a href="#">Expand</a></p>
</div>
<!-- end centrecontent -->
<div id="left">
<p>Left content goes here : Left content goes here : Left content goes here : Left content goes here : Left content goes here : Left content goes goes here : Left content goes here : </p>
<p class="expand"><a href="#">Expand</a></p>
</div>
<!-- end left -->
<div class="clearer"></div>
</div>
<!-- end outerwrap -->
<div id="right">
<p>Start Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : </p>
<p class="expand"><a href="#">Expand</a></p>
</div>
<!-- end right -->
<div class="clearer"></div>
</div>
<!-- end outer -->
<div id="footer">
<p>Footer - | Footer | - Footer </p>
</div>
<!-- end footer -->
<div id="header">
<p>Header - No column longest - footer at bottom of window </p>
<p><strong>Back to original main <a href="3colfixedtest_4.htm">3 column demo</a></strong></p>
.
</div>
<!-- end header -->
</body>
What is this for? To contain the absolutely positioned header, or something else? padding-top:71px;/* to clear header*/ The header height is 70px, so why isn't the padding for clearing the header 70 instead of 71? I looked and looked (honest  ) but could not see the reason for it..outerwrap Why is this a class and not an ID? If the outerwrap is changed to an ID will it continue behaving the same (in normal circustances)? |
|
|
|
Oct 17, 2008, 11:36
|
#2 | ||
|
CSS Advisor
    
Join Date: Jan 2003
Location: Hampshire UK
Posts: 27,436
|
Quote:
It's not for a stacking context, it's only needed to make ie7 behave as it has a bug that makes the page jump. Position:relative often stabilises IE in negative margin situations (both ie6 and ie7 often need position relative at times). Code:
padding-top:71px;/* to clear header*/ The header height is 70px, so why isn't the padding for clearing the header 70 instead of 71? I looked and looked (honest ;)) but could not see the reason for it. Quote:
 I usually like to have important structural elements as id's and the rest as classes and I guess I thought at the time that the outerwrap is basically a fix rather than semantic structure. Most of my demos are concerned with making things happen and showing what can be done and I leave them out there for people to improve on I should point out that the 1px overlap I mention in the demos is not really needed these days and was for older mozilla/firefox versions. It will do no harm to leave it in but if you need that extra 1px space then it can be removed and the negative margin should then match the width of the column exactly. |
||
|
|
|
|
Oct 18, 2008, 10:33
|
#3 | |
|
SitePoint Zealot
Join Date: Feb 2005
Location: sittin here on the Group W bench
Posts: 142
|
Thanks for the tips.
Quote:
Today a mystery popped up that has me stumped. I added a wrapper div (aka container) and adjusted the styles accordingly. The problem is that the footer does not clear the outer div properly -- the footer flows around it to the right side at certain window sizes. The outer contains a clearer, so everything inside it should be contained, but it looks like something might be sticking out of it causing the footer to flow to the right. In addition, the outer div does not stretch all the way to the bottom but I think that will be easy to solve after the clear is fixed. FYI, the layout I need is: header - first in source, fixed height navbar - second in source, fluid height 3 columns - source order: center,left,right (same as in demo), fixed width sides footer The markup outline I'm using: wrapper - header - navbar - outer - - outerwrap - - - center - - - left - - right footer Here's the code with the wrapper added and the clearing problem: Code:
<style type="text/css">
/* ============= */
/* Default Reset */
/* ============= */
* {margin:0;padding:0}
p {margin:0 0 1em 0;padding:2px}
/* ============= */
/* Layout Basics */
/* ============= */
/* height 100% */
/* ----------- */
/* commented backslash hack v2 \*/
html, body {height:100%;}
/* end hack */
#wrapper {min-height:100%;}
* html #wrapper {height:100%;} /*IE treats height as min-height anyway*/
/* width min,max,centered */
/* ---------------------- */
body {
}
#wrapper {
}
#footer {
}
/* 3col01 (side width fixed, center width fluid, content first, header height fixed, navbar height fluid) */
/* ------------------------------------------------------------------------------------------------------ */
body {
color: #000;
}
#wrapper {
position:relative;/* for ie7 to stabilize negative margins in child */
background:#d2da9c url(images/lcolbg.jpg) repeat-y left top;
color: #000;
}
#outer {
margin:0 140px;
background:#fff;
border-left:1px solid #000;
border-right:1px solid #000;
color: #000;
}
#header {
position:relative;/* put in flow (was absolute;) */
/* top:0; */
/* left:0; */
width:100%;
height:70px;
background:#304a00;
overflow:hidden;
color: #fff;
}
#header a {color:#fff;}
#left {
position:relative;/*ie needs this to show float */
width:140px;
float:left;
margin-left:-139px;/*must be 1px less than width otherwise won't push footer down in some browsers */
color:#fff;
left:-1px;
padding-bottom:52px;/* clear footer*/
}
#right {
position:relative;/*ie needs this to show float */
width:140px;
float:right;
margin-right:-139px;/*must be 1px less than width otherwise won't push footer down in some browsers */
/* padding-top:71px; to clear header*/
color:#fff;
left:1px;
padding-bottom:52px;/* clear footer*/
}
#footer {
width:100%;
clear:both;
height:50px;
background: #304a00;
color: #fff;
text-align:center;
position:relative;
margin-top:-50px;/*drag footer from below the fold*/
}
#centrecontent {
float:right;
width:100%;
position:relative;
padding-bottom:52px;/* clear footer*/
margin-left:-1px;
}
.outerwrap {
float: left;
width: 100%;
/* padding-top:71px; to clear header*/
margin-right:-3px;/* to stop columns dropping*/
}
p.expand a:hover {display:block;height:300px;background:red}
.clearer {
height:1px;
overflow:hidden;
margin-top:-1px;
clear:both;
}
/* ============= */
/* Layout Detail */
/* ============= */
/* ============= */
/* Layout Extras */
/* ============= */
</style>
<!-- Page specific css and scripts start here -->
<style type="text/css">
</style>
<script type="text/JavaScript">
</script>
<!-- Page specific css and scripts end here -->
</head>
<body id="" class="">
<div id="top"></div>
<div id="wrapper">
<div id="header">
<p>Header - No column longest - footer at bottom of window </p>
<p><strong>Back to original main <a href="3colfixedtest_4.htm">3 column demo</a></strong></p>
.
</div>
<!-- end header -->
<div id="outer">
<div class="outerwrap">
<div id="centrecontent">
<p><strong>3 column layout (This layout has content first (unlike my other demos) - and is based on an idea by <a href="http://www.positioniseverything.net/temp/piefecta-beta.html">BigJohn</a> which uses similar techniques to mine.)</strong></p>
<p>Any column can be the longest. Footer will stay at bottom of window unless content is greater then it stays at bottom of document. This layout is a little bit temperamental and the negative margins are the key to keeping it solid.</p>
<p>Only tested on PC (IE5, 5.5 , 6, Mozilla 1.3+ , Firebird 0.6.1, Opera7,Netscape 6.2). Opera doesn't like the footer but it's usable. ie5 mac will not like the footer either due to the 100% height on html,body .</p>
<p>The left and right column colours are the background showing through. A different left column background colour can be achieved by using a repeating image on the left side of the body as in this example.</p>
<p>There is nothing special about this demo as similar techniques have been used before, however they are not usually integrated into one example. The secret to this demo is the left and right columns which are floated negatively from the centre container. If you float them completely in the gaps at the side then they don't clear the footer. However
if you leave them overlapping the centre content by 1 pixel then the footer is pushed down as required. Or you can float them completely to the side and just add some padding bottom to the columns to clear the footer.</p>
<p class="expand"><a href="#">Expand</a></p>
</div>
<!-- end centrecontent -->
<div id="left">
<p>Left content goes here : Left content goes here : Left content goes here : Left content goes here : Left content goes here : Left content goes goes here : Left content goes here : </p>
<p class="expand"><a href="#">Expand</a></p>
</div>
<!-- end left -->
<div class="clearer"></div>
</div>
<!-- end outerwrap -->
<div id="right">
<p>Start Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : </p>
<p class="expand"><a href="#">Expand</a></p>
</div>
<!-- end right -->
<div class="clearer"></div>
</div>
<!-- end outer -->
</div>
<!-- end wrapper -->
<div id="footer">
<p>Footer - | Footer | - Footer </p>
</div>
<!-- end footer -->
</body>
</html>
Last edited by D9r; Oct 18, 2008 at 12:23. |
|
|
|
|
|
Dec 20, 2008, 12:06
|
#4 | |
|
SitePoint Zealot
Join Date: Feb 2005
Location: sittin here on the Group W bench
Posts: 142
|
This question relates to the 3colfixedtest_sourcenone demo (3 columns, content first, fluid width, fixed width sides).
Quote:
Code:
/* ============= */
/* Default Reset */
/* ============= */
* {margin:0;padding:0}
p {margin:0 0 1em 0;padding:2px}
p.expand a:hover {display:block;height:300px;background:red}
.clearer {
height:1px;
overflow:hidden;
margin-top:-1px;
clear:both;
}
.contain, .clearfix {
}
.offscreen {
}
/* ============ */
/* Layout Frame */
/* ============ */
/* equalizing columns */
body {
background:#999999 url(images/colsbg1240.jpg) repeat-y left top;
color: #000;
position:relative;/* for ie7 to stabilize negative margins in child */
}
#wrapper {
margin:0 180px 0 200px;
background:#fff;
border-left:1px solid #000;
border-right:1px solid #000;
color: #000;
}
/* 3 columns, content first, fluid width, fixed width sides */
#main {
float: left;
width: 100%;
margin-right:-3px; /* (no change, not sure what's needed) to stop columns dropping*/
}
#content {
float:right;
width:100%;
position:relative;
/* margin-left:-1px; (removed, may be required) */
}
#sidebar1 {
position:relative;/*ie needs this to show float */
width:200px;
float:left;
margin-left:-200px; /* (was -199px;) must be 1px less than width otherwise won't push footer down in some browsers */
color:#fff;
/* left:-1px; (removed) */
}
#sidebar2 {
position:relative;/*ie needs this to show float */
width:180px;
float:right;
margin-right:-180px; /* (was -179px;) must be 1px less than width otherwise won't push footer down in some browsers */
color:#fff;
/* left:1px; (removed) */
}
<body id="" class="">
<div id="top"></div>
<div id="wrapper">
<div id="main">
<div id="content">
<p><strong>3 column layout (This layout has content first (unlike my other demos) - and is based on an idea by <a href="http://www.positioniseverything.net/temp/piefecta-beta.html">BigJohn</a> which uses similar techniques to mine.)</strong></p>
<p class="expand"><a href="#">Expand</a></p>
</div><!-- end content -->
<div id="sidebar1">
<p>Left content goes here : Left content goes here : Left content goes here : </p>
<p class="expand"><a href="#">Expand</a></p>
</div><!-- end sidebar1 -->
<div class="clearer"></div>
</div><!-- end main -->
<div id="sidebar2">
<p>Start Right content goes here : Right content goes here : </p>
<p class="expand"><a href="#">Expand</a></p>
</div><!-- end sidebar2 -->
<div class="clearer"></div>
</div><!-- end wrapper -->
</body>
 Should the #main {margin-right:-3px;} be changed too? Should the #content {margin-left:-1px;} remain? (I'm still trying to wrap my head around how the negative margin technique works, and so I'm not fully aware of what potential pitfalls to look for.) |
|
|
|
|
|
Oct 18, 2008, 12:53
|
#5 |
|
SitePoint Zealot
Join Date: Feb 2005
Location: sittin here on the Group W bench
Posts: 142
|
I just noticed that the original demo has the same clearing problem as my modified version, so the cause must be that I'm using an old browser (mozilla suite 1.7.13).
I saw in another demo the use of a #clearfooter meant for IE, and it's placed just inside the end of the wrapper. Maybe that would work here as well. Code:
#clearfooter {
width: 100%;
height: 102px; /* footer height + 2 */
clear: both
} /* to clear footer */
<wrapper>
<div id="stuff"></div>
<div id="clearfooter"></div><!-- ie needs this -->
</div><!-- end wrapper -->
<div id="footer">
</div>
|
|
|
|
|
Oct 18, 2008, 16:42
|
#6 |
|
CSS Advisor
Join Date: Jan 2003
Location: Hampshire UK
Posts: 27,436
|
Sorry I missed your post today, I'll have a look back in the morning and see what the problem is
|
|
|
|
|
Oct 19, 2008, 04:59
|
#7 | |
|
CSS Advisor
Join Date: Jan 2003
Location: Hampshire UK
Posts: 27,436
|
Quote:
Edit: Just downloaded an archived version of moz 1.7 and I'm not seeing any clearing issues with this demo. |
|
|
|
|
|
Oct 19, 2008, 05:42
|
#8 |
|
CSS Advisor
Join Date: Jan 2003
Location: Hampshire UK
Posts: 27,436
|
OK, I just looked at your page and i can see your error straight away.
You have broken the "Golden Rule" on 100% height and that is you can only have one 100% high element on the page and that element must be used to make everythng work. You have added a wrapper with 100% height which means that my original outer now has no height. It is this original #outer with the negative margins that provides the bsasis for the equal columns. It is not possible to add a wrapper around #outer or the effect is lost as the height collapses to auto on #outer. You have to use #outer as the main page wrapper and work from there. To have a fluid header you place it inside #outer and then just drag the negative side margins to the right and left to fill the original 100% width. Something like this. Code:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
/* ============= */
/* Default Reset */
/* ============= */
* {
margin:0;
padding:0
}
p {
margin:0 0 1em 0;
padding:2px
}
/* ============= */
/* Layout Basics */
/* ============= */
/* height 100% */
/* ----------- */
/* commented backslash hack v2 \*/
html, body {
height:100%;
}
/* width min,max,centered */
/* ---------------------- */
body {
color: #000;
}
body {
position:relative;/* for ie7 to stabilize negative margins in child */
background:#d2da9c url(images/lcolbg.jpg) repeat-y left top;
color: #000;
}
#outer {
margin:0 140px;
background:#fff;
border-left:1px solid #000;
border-right:1px solid #000;
color: #000;
min-height:100%;
}
/* end hack */
* html #outer {
height:100%;
} /*IE treats height as min-height anyway*/
#header {
position:relative;/* put in flow (was absolute;) */
background:#304a00;
color: #fff;
margin:0 -141px;
min-height:0;
}
* html #header {
height:1px
}
#header a {
color:#fff;
}
#left {
position:relative;/*ie needs this to show float */
width:140px;
float:left;
margin-left:-139px;/*must be 1px less than width otherwise won't push footer down in some browsers */
color:#fff;
left:-1px;
padding-bottom:52px;/* clear footer*/
}
#right {
position:relative;/*ie needs this to show float */
width:140px;
float:right;
margin-right:-139px;/*must be 1px less than width otherwise won't push footer down in some browsers */
/* padding-top:71px; to clear header*/
color:#fff;
left:1px;
padding-bottom:52px;/* clear footer*/
}
#footer {
width:100%;
clear:both;
height:50px;
background: #304a00;
color: #fff;
text-align:center;
position:relative;
margin-top:-50px;/*drag footer from below the fold*/
}
#centrecontent {
float:right;
width:100%;
position:relative;
padding-bottom:52px;/* clear footer*/
margin-left:-1px;
}
.outerwrap {
float: left;
width: 100%;
/* padding-top:71px; to clear header*/
margin-right:-3px;/* to stop columns dropping*/
}
p.expand a:hover {
display:block;
height:300px;
background:red
}
.clearer {
height:1px;
overflow:hidden;
margin-top:-1px;
clear:both;
}
#nav {
margin:0;
padding:5px;
background:green;
list-style:none;
text-align:center;
}
#nav li {
display:inline;
margin:0 10px;
}
/* ============= */
/* Layout Detail */
/* ============= */
/* ============= */
/* Layout Extras */
/* ============= */
</style>
<!-- Page specific css and scripts start here -->
<style type="text/css"></style>
<script type="text/JavaScript">
</script>
<!-- Page specific css and scripts end here -->
</head>
<body>
<div id="outer">
<div id="header">
<p>Header - No column longest - footer at bottom of window </p>
<p><strong>Back to original main <a href="3colfixedtest_4.htm">3 column demo</a></strong></p>
<ul id="nav">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
<div class="outerwrap">
<div id="centrecontent">
<p><strong>3 column layout (This layout has content first (unlike my other demos) - and is based on an idea by <a href="http://www.positioniseverything.net/temp/piefecta-beta.html">BigJohn</a> which uses similar techniques to mine.)</strong></p>
<p>Any column can be the longest. Footer will stay at bottom of window unless content is greater then it stays at bottom of document. This layout is a little bit temperamental and the negative margins are the key to keeping it solid.</p>
<p>Only tested on PC (IE5, 5.5 , 6, Mozilla 1.3+ , Firebird 0.6.1, Opera7,Netscape 6.2). Opera doesn't like the footer but it's usable. ie5 mac will not like the footer either due to the 100% height on html,body .</p>
<p>The left and right column colours are the background showing through. A different left column background colour can be achieved by using a repeating image on the left side of the body as in this example.</p>
<p>There is nothing special about this demo as similar techniques have been used before, however they are not usually integrated into one example. The secret to this demo is the left and right columns which are floated negatively from the centre container. If you float them completely in the gaps at the side then they don't clear the footer. However
if you leave them overlapping the centre content by 1 pixel then the footer is pushed down as required. Or you can float them completely to the side and just add some padding bottom to the columns to clear the footer.</p>
<p class="expand"><a href="#">Expand</a></p>
</div>
<!-- end centrecontent -->
<div id="left">
<p>Start Left content goes here : Left content goes here : Left content goes here : Left content goes here : Left content goes here : Left content goes goes here : Left content goes here : </p>
<p class="expand"><a href="#">Expand</a></p>
</div>
<!-- end left -->
<div class="clearer"></div>
</div>
<!-- end outerwrap -->
<div id="right">
<p>Start Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : </p>
<p class="expand"><a href="#">Expand</a></p>
</div>
<!-- end right -->
<div class="clearer"></div>
</div>
<!-- end wrapper -->
<div id="footer">
<p>Footer - | Footer | - Footer </p>
</div>
<!-- end footer -->
</body>
</html>
|
|
|
|
|
Oct 19, 2008, 13:14
|
#9 | |
|
SitePoint Zealot
Join Date: Feb 2005
Location: sittin here on the Group W bench
Posts: 142
|
Quote:
This morning I did a simple test, starting with the body element and working inward one level at a time to see if the two 100% heights could be made to work. The outer (the 2nd 100% height) does not work in Mozilla (although it does in IE6). So you're saying it isn't possible to nest two 100% heights? OK. I'll make do with one then.  The reason for the two nested 100% heights is because I was trying for a min-max width/centered layout, which would use a contrasting bg-color on the body seen at large resolutions. The body would take one background color, the wrapper would take a second background color and background image for the side columns, and the outer would take the background color for the center column: Code:
/* height 100% */
/* mac hide \*/
html, body {height:100%;}
/* end hide */
#wrapper {min-height:100%;} /* for good browsers */
* html #wrapper {height:100%;} /* for IE6 and under. treats height as min-height, expands as needed */
#outer {min-height:100%;} /* for good browsers */
* html #outer {height:100%;} /* for IE6 and under. treats height as min-height, expands as needed */
/* width min,max,centered */
body {
text-align: center;
padding: 0 10px;
background-color: #666666;
}
#wrapper {
min-width: 600px;
max-width: 1200px;
margin: 0 auto;
text-align: left;
}
#footer {
min-width: 600px;
max-width: 1200px;
margin: 0 auto;
text-align: left;
}
/* 3col01 (side width fixed, center width fluid, content first, header height fixed, navbar height fluid) */
body {
color: #000000;
}
#wrapper {
background:#d2da9c url(images/lcolbg.jpg) repeat-y left top;
color: #000;
position:relative;/* for ie7 to stabilize negative margins in child */
}
#outer {
margin:0 140px;
background:#fff;
border-left:1px solid #000;
border-right:1px solid #000;
color: #000;
}
<body id="" class="">
<div id="top"></div>
<div id="wrapper">
<div id="outer">
<p>test filler text</p>
</div>
<!-- end outer -->
</div>
<!-- end wrapper -->
</body>
Is it possible to make this work with a min-max width, centered layout? I don't see how, but will think on it and see. Should I just forget trying to have a max width, centered layout? It seems that max-width is almost a requirement these days with so many folks using humongous screens. Maybe as a compromise it could be left-aligned instead of centered at large resolutions - then it wouldn't need the 3rd bg-color. That isn't too much to give up I suppose, although centered would be cool to have if it were possible. |
|
|
|
|
|
Oct 19, 2008, 15:51
|
#10 | |
|
SitePoint Zealot
Join Date: Feb 2005
Location: sittin here on the Group W bench
Posts: 142
|
Quote:
The code was changed from: Code:
background:#d2da9c url(images/lcolbg.jpg) repeat-y left top; Code:
background:#d2da9c url(images/lcolbg.jpg) repeat-y 50% top; * make the width of the image the same as the max-width, * make the left half of the image the color for the left column, * make the right half of the image the color for the right column, * position the image in the center of the body, and let the ends run offscreen. If there's nothing wrong with that, then the body could handle 3 colors, the wrapper the 4th, and the min-max width centered layout would work like this: Code:
/* height 100% */
/* mac hide \*/
html, body {height:100%;}
/* end hide */
#outer {min-height:100%;} /* for good browsers */
* html #outer {height:100%;} /* for IE6 and under. treats height as min-height, expands as needed */
/* width min,max,centered */
body {
text-align: center;
padding: 0 0;
background-color: #666666;
}
#outer {
min-width: 600px;
max-width: 1200px;
margin: 0 auto;
text-align: left;
}
#footer {
min-width: 600px;
max-width: 1200px;
margin: 0 auto;
text-align: left;
}
/* 3col01 (side width fixed, center width fluid, content first, header height fixed, navbar height fluid) */
body {
background:#d2da9c url(images/lcolbg-1200px-wide.jpg) repeat-y 50% top;
color: #000;
position:relative;/* for ie7 to stabilize negative margins in child */
}
#outer {
margin:0 140px;
background:#fff;
border-left:1px solid #000;
border-right:1px solid #000;
color: #000;
}
<body id="" class="">
<div id="top"></div>
<div id="outer">
<p>test filler text</p>
</div>
<!-- end outer -->
</body>
(I'm just trying to explore all possibilities with this negative-margin technique first before trying your absolute technique. Thanks for suggesting it.) |
|
|
|
|
|
Oct 20, 2008, 15:28
|
#11 | |
|
SitePoint Zealot
Join Date: Feb 2005
Location: sittin here on the Group W bench
Posts: 142
|
Quote:
In the following excerpt, the min-height:0; on #header, followed by height:1px; for ie -- is that for haslayout? It fixes a problem I was having in IE where the div stops short of the right side of the screen. I tried giving it the height:1% but that didn't work. Thankfully, your solution does. Code:
#header {
position:relative;/* */
background:#304a00;
color: #fff;
margin:0 -141px;
min-height:0;
}
* html #header {
height:1px
}
|
|
|
|
|
|
Oct 19, 2008, 14:43
|
#12 | ||
|
CSS Advisor
Join Date: Jan 2003
Location: Hampshire UK
Posts: 27,436
|
Quote:
Here is a 3 column all fluid example. http://www.pmob.co.uk/temp/equal-col...id-centred.htm The technique is explained in the article link on that page. It basically overlays the column colors using an absolute positioning technique just for the background colors. Don't get confused with this as the absolute columns aren't for content they just keep track of the main wrapper and provide the background color for each column. It's virtually hack free but needs an extra div for each column color and a little bit of maths to work out the positions. Quote:
You can use display:table and specify 100% height and as usual with tables the height can still increase but unfortunately this doesn't work in Ie7 and is a little buggy anyway. |
||
|
|
|
|
Oct 19, 2008, 16:09
|
#13 |
|
CSS Advisor
Join Date: Jan 2003
Location: Hampshire UK
Posts: 27,436
|
Hi,
If you are going to use an image for all the columns then you don't need the negative margin layout at all. Just use a normal layout using the 100% height technique. The image should provide all column colours but you still need to center it on the outer as the body has a 1px jog and the layout will mis-align at every odd pixel size width as the page is resized. Here is a fixed width centered layout using that uses a background image for all columns and borders and shadows in one go. You would just use the same format for your min/max width except your image would need to be ta the center position and be as wide as the max-width. http://www.pmob.co.uk/temp/3col-centred-template10.htm |
|
|
|
|
Oct 20, 2008, 16:10
|
#14 | |
|
CSS Advisor
Join Date: Jan 2003
Location: Hampshire UK
Posts: 27,436
|
Quote:
You can't use the height:1% fix for ie7 to force haslayout because IE7 obeys height and you would only get 1% height and no more. IE6 treats height as a minimum and therefore the height:1% hack is safe for ie6. |
|
|
|
|
|
Oct 21, 2008, 10:21
|
#15 |
|
SitePoint Zealot
Join Date: Feb 2005
Location: sittin here on the Group W bench
Posts: 142
|
The height:1% hack does not work for me on IE6 in this situation (applying haslayout to the fluid header). I gave it the standard code:
Code:
/* mac hide \*/
* html #header {height:1%}
/* end hide*/
Code:
#header {min-height:0;}
* html #header {height:1px}
|
|
|
|
|
Oct 21, 2008, 10:23
|
#16 |
|
CSS Consultant/Ninja-I'm fast
  
Join Date: Oct 2008
Location: Whiteford, MD
Posts: 10,079
|
Yes, %'s take the parents width and takes the percent of it of whatever you did. The 1px would work because it doesn't rely on the parent elements height.
|
|
|
|
Oct 21, 2008, 10:50
|
#17 | |
|
CSS Advisor
Join Date: Jan 2003
Location: Hampshire UK
Posts: 27,436
|
Quote:
Yes you need height:1px in some cases especially with negative margins. |
|
|
|
|
|
Nov 1, 2008, 04:04
|
#18 |
|
SitePoint Zealot
Join Date: Sep 2007
Location: Wiltshire, UK.
Posts: 104
|
Paul. I'm having difficulty getting to your site to upload one of your templates. Is there a problem with the site?
|
|
|
|
|
Nov 1, 2008, 05:28
|
#19 |
|
CSS Advisor
Join Date: Jan 2003
Location: Hampshire UK
Posts: 27,436
|
Seems to be working now so try again. If not tell me what you want and I'll get it for you
|
|
|
|
|
Nov 1, 2008, 06:13
|
#20 | ||
|
SitePoint Zealot
Join Date: Sep 2007
Location: Wiltshire, UK.
Posts: 104
|
I've just tried again with both IE7 and Opera and still can't get a connection.
Opera gives me: Quote:
Quote:
 I'm looking for a fluid 2 column with header and footer template. Thanks. |
||
|
|
|
|
Nov 1, 2008, 06:36
|
#21 |
|
CSS Advisor
Join Date: Jan 2003
Location: Hampshire UK
Posts: 27,436
|
Hmm, yes it seems to be down now, I guess there's some maintenance going on.
Here's one example. Code:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
height: 100%;
margin:0;
padding:0;
}
body {
background:#ffffcc;
}
#header {
height: 60px;
border-top:40px solid #fff;/* preserve footer space*/
margin-left:-41%;
position:relative;
min-height:0;
background:#d2da9c;
z-index:999;
}
#outer {
position: relative;
min-height: 100%;
margin-top:-40px;/* make room for footer*/
margin-left:29%;
background:#304a00;
z-index:1;
}
#sidebar{
float:left;
width:40%;
position:relative;
margin-left:-40.9%;
left:-.1%;
display:inline
}
#content{
float:right;
width:100%;
margin:0 0 0 -1px;
position:relative;
z-index:1;
}
#footer {
height:40px;/* must have a known height*/
clear:both;
background:#d2da9c;
}
.clearer{
height:1px;
overflow:hidden;
margin-top:-1px;
clear:both;
}
</style>
<!--[if IE ]>
<style type="text/css">
* html #sidebar{margin-left:-40.5%;left:0}
* html #content{margin:0}
* html #outer {height: 100%;}
* html #wrap{height:1%;position:relative;}
</style>
<![endif]-->
</head>
<body>
<div id="outer">
<div id="header">Header Stuff </div>
<div id="wrap">
<div id="sidebar">
<p> Side bar stuff - Side bar stuff - Side bar stuff - Side bar stuff - Side bar stuff - Side bar stuff - Side bar stuff - Side bar stuff - Side bar stuff - Side bar stuff - Side bar stuff - Side bar stuff - Side bar stuff - Side bar stuff - Side bar stuff - Side bar stuff - Side bar stuff - Side bar stuff - Side bar stuff - Side bar stuff - Side bar stuff - Side bar stuff - Side bar stuff - Side bar stuff - Side bar stuff - Side bar stuff - Side bar stuff - Side bar stuff - Side bar stuff - Side bar stuff - Side bar stuff - Side bar stuff - Side bar stuff - Side bar stuff - Side bar stuff - Side bar stuff - Side bar stuff - Side bar stuff - Side bar stuff - Side bar stuff - Side bar stuff - Side bar stuff - Side bar stuff - Side bar stuff - Side bar stuff - Side bar stuff - last</p>
</div>
<div id="content">
<p><img src="images/volcano-1.jpg" width="500" alt="Volcano" /></p>
<p>content goes here: content goes here: content goes here: content goes here: content goes here: content goes here: content goes here: content goes here: content goes here: content goes here: content goes here: content goes here: content goes here: content goes here: content goes here: content goes here: content goes here: content goes here: content goes here: content goes here: content goes here: content goes here: content goes here: content goes here: </p>
</div>
</div>
<div class="clearer"></div>
</div>
<div id="footer"> Footer stuff here (about 40px high) </div>
</body>
</html>
|
|
|
|
|
Nov 1, 2008, 06:59
|
#22 |
|
SitePoint Zealot
Join Date: Sep 2007
Location: Wiltshire, UK.
Posts: 104
|
Thanks a lot. I'll go away and play with it.
|
|
|
|
|
Nov 3, 2008, 12:44
|
#23 |
|
SitePoint Enthusiast
Join Date: Dec 2002
Posts: 74
|
Sorry if this has been asked earlier in the thread, but what do I do if I don't know the height of the footer? I know the initial height, but the footer-area may sometimes contain a sub menu, and I have to take into consideration that this sub menu can contain an unknown number of items that can span over 1-2 rows..
Do I have to check for the footer height with javascript after the page has loaded, and then set the negative margin accordingly, or can it be done with pure css? |
|
|
|
|
Nov 3, 2008, 13:12
|
#24 |
|
In memoriam
 
Join Date: May 2006
Location: Aurora, Illinois
Posts: 15,648
|
As far as I know, you'll have to know the height of the footer. If it's going to change with dynamic content, then you'll have to use JavaScript to detect the changes and apply the updated heights dynamically as well.
|
|
|
|
|
Nov 3, 2008, 17:14
|
#25 |
|
CSS Advisor
Join Date: Jan 2003
Location: Hampshire UK
Posts: 27,436
|
Hi,
As Dan said you have to have a fixed height for the footer to work otherwise you can't account for the space exactly. If the footer is going to be changing height frequently then perhaps you would be better off with just a normal footer. The sticky footer is only useful on small pages where you want the footer at the bottom but most sites are usually higher than the viewport anyway so it doesn't really matter. |
|
|
|
|
| Bookmarks |
«
Previous Thread
|
Next Thread
»
| Thread Tools | |
| Display Modes | |
Hybrid Mode
|
|
|
All times are GMT -7. The time now is 18:09.