Ryan:
the footer’s at the top of the page, but it’s a little hard to see because it is behind the abso-po’d top elements.
To the OP:
<div id=“bodyHolder” style=" display: block; clear:both; height:100%;">
bodyHolder can’t be 100% high… in the CSS specs they say a box can only have a % height if its parent has an explicit (non%) height. So bodyHolder is doing just height: auto actually.
While I think a sticky footer would make this layout work better, the point is, as you noticed, that you can’t be absolutely positioning your main content if you want the footer to be pushed down.
Hm…
<body id="body" >
<div id="bodyHolder" >
<div id="mainHolder" >
<div id="mainColumn">Here will be the main content</div>
<div id="leftColumn" > Left Column</div>
</div>
<div id="topLogoHolder">Site Logo</div>
<div id="topMenuHolder" > Top Menu</div >
[b]<div id="footerHolder"> Footer</div>
</div><!--bodyHolder-->
</body>[/b]
Not sure why the body has an id of “body” as that’s generally a bad idea (half the time your CSS may say “body” and the other half may say “#body” and that’s damn confusing), so I’m going to refer to it by its tag, not its id.
Notice I did move the closing div of bodyHolder and made the last div </body> as Ryan mentioned… you may not have had this on your site but it was a mistake in your example… anyway, if the footer’s inside teh bodyHolder then it can just get naturally centered inside bodyHolder… otherwise, there is no point to bodyHolder unless it exists as a background image hook, because it’s not doing anything that mainHolder isn’t, otherwise.
If this isn’t acceptable let us know.
Site Logo, Top Menu, Left Column, Main Column, Footer
ok… I measured the total height of the logo and menu area and I got 163px, so if you try this and something is off, my measurement might have been off…
* {
margin: 0;
}
img {
vertical-align: bottom;
border: 0;
}
body {
padding: 0;
background: #fff url('../imgs/bg.body.jpg') repeat-x;
}
#bodyHolder {
position: relative; /*for abso-po'd boxes*/
width: 1006px;
margin: 0 aut0;
padding: 163px 0 0; /*top padding pushes main content down without abso-po-ing it, so #footer behaves*/
}
#mainHolder {
width: 100%; /*redundant, but this sets Haslayout too, so you're good here*/
overflow: hidden; /*this'll wrap the floats in other browsers*/
}
#mainColumn {
float: right;
width: 810px;
}
#leftColumn {
float: left;
width: 180px;
margin-right: -6px; /*I forget, there's some neg margin to get around IE6, but I'm writing this outta my butt and not testing this...*/
}
#footerHolder {
clear: both;
background:url('../imgs/bg.footer.jpg') repeat-x;
}
#topLogoHolder {
position: absolute;
top: 0;
left: 6px; /*this is supposed to be top and left of positioned ancestor, #bodyHolder, however I vaguely remember an IE bug with non-direct parents being the positioned ancestor...*/
width: 1000px;
height: 112px;
}
#topMenuHolder {
position: absolute;
top: 113px; /*or whatever sets it under Logo*/
left: 6px;
width: 1000px;
height: 38px; /*you may not want a set height on a menu like this*/
background:url('../imgs/bg.top_menu.jpg') no-repeat;
}
I’d do something like that… basically the only absolutely positioned elements are the logo area and menu. I’d have the little ad thingie on the right just be in the logo box.
I noticed almost every major box on your page had this kind of code:
width:1006px; text-align:left; display:block; float:left; clear:both; background-color:#FFFFFF; height: 112px;
Text-align left is a default. display: block is a default. You can make your code more readable by not stating the obvious (unless you are trying to trigger Haslayout for IE). If your box is inside a container with a width: 1006px, then none of your static boxes need a width, because they will be that width. The Float left is not needed here at all. The clear: both is only necessary on boxes who are coming after a float in source, not something you need to put on floats themselves (unless you have a bunch of floats and want one to always start a new line).
Setting widths on boxes is usually ok but do it only when necessary. Setting heights on boxes can be dangerous (because height: auto accommodates the content). It’s maybe good to leave heights set on abso-po’d elements, but in the case of your menu, I’d still make it a min-height (and just set height for IE6 only, who doesn’t understand min-height) so that if your menu needs to grow, it can (though in this case, yes, a growing menu if someone enlarges text will not bump down the main content… however if bodyHolder’s top padding were set in em’s it could help).
I think when you’re trying all sorts of stuff to get a page to work, it’s a good idea to take stuff out when you know you don’t need it, to stop code clutter. Code bloat makes it harder for you to read it and see what’s going on.
My above code may also have some other IE bugs I’m forgetting (there’s a bug where an abso-po’d box is sammiched between two floats and it vanishes… the easy fix for this was an empty, non-floated div somewhere in the sammich too… but if I were going for that layout that’s the code I’d start out with.
*ps I noticed the form in the logo box is waaaaaay too huge for the box it’s in. The set height may be hiding it but I personally like my boxes to fit whether you can see it or not. Maybe cause it’s kinda like underwear to me… yeah, nobody sees my underwear but I want it sitting right anyway.
)
