CSS control Content Positioning


I not very good at CSS and I need to create a page that shows divs in other order that are in the script:

in my page i want to be something like this:

<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 id="topLogoHolder">Site Logo</div>
      <div id="topMenuHolder" > Top Menu</div > 
   <div id="footerHolder"> Footer</div>

but I want to be displayed in the following order:

Site Logo, Top Menu, Left Column, Main Column, Footer

My problem is with Footer. I can’t get to put it at the bottom of page (not at the window) because the Main Column is not fixed.

The CSS code is :

body {margin:auto; background:url('../imgs/bg.body.jpg') repeat-x; font-family:Arial, Helvetica, sans-serif; font-size:12px; background-color: #FFFFFF;}
#bodyHolder {margin:auto; width:1006px; text-align:left;} 
#mainHolder {width:1006px; text-align:left; display:block; float:left; clear:both; background-color:#FFFFFF; margin:0px; padding:15px 0px 15px 0px; position:absolute; top:150px;}
#mainColumn {text-align:left; display:block; float:right; margin-right:10px;  width:810px;} 
#leftColumn {text-align:left; display:block; float:left; width:180px; } 
#topLogoHolder {width:1000px; text-align:left; display:inline; margin-left:6px; float:left; clear:both; height:112px; position:absolute; top:0px;}
#topMenuHolder { text-align:left; display:block; margin:0px 0px 0px 6px; padding:0px; background:url('../imgs/bg.top_menu.jpg') no-repeat; width:1000px; height:38px;position:absolute; top:112px;}
#footerHolder {margin:auto; background:url('../imgs/bg.footer.jpg') repeat-x; height:234px; font-family:Arial, Helvetica, sans-serif; padding:0px;width:100%; display: block;  position: absolute; bottom:0px; height:100%; clear:both;}

I do not know what to try anymore (google gives me no clue… all my attempts failed :confused: )

I’ll appreciate any help! Thanks a lot in advance :blush:


Check out that sticky footer :). You will need to place #footerHolder outside of #mainHolder and then apply the CSS in that page

But #footerHolder it’s already outside of #mainHolder. Is directly on <body id=“body” >

And i’m not looking for a sticky footer. I want the user get to the Footer after they scroll down to the end of the page

P.S. Before I put “position:absolute; top:ypx” for #mainHolder, #topLogoHolder, #topMenuHolder the Footer was on the bottom of the page

Then you have an extra </div>. I wasn’t counting at all I just visually looked how you lined things up :).

Perhaps a visual representation of what the end result is to look like (along with what it looks like now) would help :).

If you could provide a link to your current code that would be helpful, if not, then provide full HTML and CSS.

At least I need the visual reference :slight_smile:

this is the testing-link: new.onestop.ro

And if you look carefully, you’ll see that is not any extra </div> :wink:

Look at your code you posted. You have a </div> where it should be </body> ;). That’s why it confused me. I don’t care (personaly) if hte page has enough closing divs, I’m just saying the example you posted didn’t have the tags match up :slight_smile:

There’s alot of absolute positioning going on there, you use it for containers…when it shouldn’t be :).

Ok, so that’s your current page, however whta exactly is wrong with it? What’s the end result supposed to look like? I need those answered :). The latter with a visual graphic please.

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.


<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 id="topLogoHolder">Site Logo</div>
      <div id="topMenuHolder" > Top Menu</div > 
      [b]<div id="footerHolder"> Footer</div>

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.


These points have already been covered above but to get your footer to the bottom remove the absolute positioning from the footer styles and form the mainHolder styles. Just set a margin-top:150px for mainholder instead.

Remove the 100% height from bodyHolder because it will get height from the body element and will not expand.

<body id="body" style="height:100%; ">
        [B]<div id="bodyHolder">
            <div id="mainHolder"  style="margin-top:150px;">[/B]

<div id="footerHolder"[B]style="width:100%; display: block;clear:both;">[/B]
        <div id="footer">

Remove the 100% height from bodyHolder because it will get height from the body element and will not expand.

I thought in order for bodyHolder to be able to do that height: 100%, not only the body but also the html element had to have height: 100%… I thought otherwise, with only a height: 100% on the body, the bodyHolder div would collapse to height: auto;

I only did a quick look through the code but I looked for height set on the html element.

Yes you are right the html also need to be 100% except for IE6 (which is what I was thinking about) but of course as IE6 treats height as min-height anyway the issue wouldn’t arise.

However, I hate to see height:100% in pages because it’s a problem just waiting to go wrong. :slight_smile:

However, I hate to see height:100% in pages because it’s a problem just waiting to go wrong.

Agreed; or it makes someone think there’s a height set when it’s auto, which can confuse.

Hi guys,

Thanks for your answers. I managed to solve this problem by making these changes:

	<div id="bodyHolder">
		<div id="mainHolder" style="margin-top:150px;">
			<div id="mainColumn">Here will be the main content</div>
			<div id="leftColumn" >Left Column</div>
		<div id="topLogoHolder" style="position:absolute; top:0px;">Site Logo</div>
		<div id="topMenuHolder" style="position:absolute; top:112px;">Top Menu</div >
	<div id="footerHolder">Footer</div>

The problem was “mainHolder” div. So, I replaced “position:absolute; top:150px;” just with “margin-top:150px;” and now the footer is at the bottom of page.

Thank you very much :slight_smile:

Just like I said :slight_smile:

Glad it’s sorted now.