css is not playing footer!

[fleetwood]

I'm using a tableless css outerlayout, and am having a bit of trouble getting my footer to appear where I want it.

url removed (updating)

(please ignore the yellow and blue backgrounds - they are just there to help me see the page divs, and are not part of the finished design).

As you can see, the footer is slipping in below the innerlayout, instead of where I want it, which funnily enough is at the foot of the page!

Basic layout is as follows:

<div header> </div>

<div main>
<div sidebarleft></div>
<div middle> </div>
<div sidebarright> </div>
</div>

<div footer> </div>

sidebars have absolute positioning to allow middle to be fluid.
The middle div floats left

I had assumed that the longest sidebar - the left - would define the height of the main div, and the footer - positioned after the main div closes - would be pushed down this far.

Any ideas?

This is a css rather than strict Act question, but there dosen't appear to be a better forum (on these boards) to post, as its not really 'any other business'.

I wonder if its worth having a seperate html/css forum?
What do you think?

[dscontroller]

Hi Martin,

I would tend to float the divs to the left and then also the footer. Make the footer bar either 100% or the width of your layout. This should clear the footer below your lowest column.

hth,
David

[fleetwood]

Hi David

I have tried with a float:left on the main div, and float:left on the footer.
Width: 100% on both main and footer.

tried both with and without clear: floats after the main, but still the same.

have also tried rearranging the order of left middle right (although that shouldn't have any effect as left and right have absolute/fixed postioning from top)

I'm sure I'm missing a trick somewhere (been through the layout many times - maybe a fresh pair of eyes in the morning will help!).

The odd behaviour is that the footer runs under the right hand side nav, indicating that it recognises that the inner layout has closed, but is not recognising the fact that the left hand nav should be making the main div the full depth.

[leehack]

Approach it slightly different. Create an outer div and position this accordingly, you then float the divs within this outer div. This removes all need for absolute positioning, as it is the spawn of satan.

So you have:

<div id="outerLayout">
<div id="header">this is the header area</div>
<div id="leftSidebar">this is the left sidebar</div>
<div id="mainContent">this is the main content</div>
<div id="rightSidebar">this is the right sidebar</div>
<div id="footer">this is the footer</div>
</div>

Style these divs using:

#outerLayout {
width: 95%;
margin: 20px auto;
}
#header {
width: 100%;
background-color:#CCCCCC;
}
#leftSidebar {
width: 20%;
float: left;
background-color:#999999;
}
#mainContent {
width: 60%;
float: left;
background-color:#666666;
}
#rightSidebar {
width: 20%;
float: left;
background-color:#999999;
}
#footer {
width: 100%;
background-color:#CCCCCC;
}

That gives you a 3 column layout (20% sidebars and 60% main content), 95% width, centred on screen with a header above and a footer below. Rather than trying to control the elements within, control the outerLayout. You can put this outerLayout where you like, fix it's size and then do whatever you want within it.

REMEMBER that each div is it's own entity. Just because the leftSidebar is 2 pages long, the mainContent and rightSidebar will still act independently and not size to the same. THIS IS THE PROBLEM, with this approach. There are ways around it, but it is a totally pointless exercise. You are introducing headaches for the sake of being trendy and in vogue. Would you ever wear a pair of shoes for a night that are a size too small, so you could feel the relief when you took them off?

Simplify the process and use the best assets of both tables and css together.

The below uses exactly the same stylesheet, yet it gives you the fluidity between the three columns, they are tied together via the tables natural attributes.

<table id="outerLayout" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="3" id="header">this is the header area</td>
</tr>
<tr>
<td id="leftSidebar">this is the left sidebar</td>
<td id="mainContent">this is the main content</td>
<td id="rightSidebar">this is the right sidebar</td>
</tr>
<tr>
<td colspan="3" id="footer">this is the footer</td>
</tr>
</table>

You have probably heard me say a number of times that i love CSS, it is fantastic at providing the power to style elements and define ID's. It is piss poor at laying out without having to do far more than is sensible. Often i find coders hacking left right and centre to stick to a CSS layout, with the resulting code being far bigger than the table code.

Tables will be around forever and a huge percentage of websites will use them for as long as you and I are alive, keep things simple and use both aspects to the best of their abilities. For cross browser simple layouts, it is impossible to beat tables, so don't even try IMO.

The code and css of the above is available here, if you would like to see it in real time. Feel free to download and do what you want with it. My site is also laid out using <td>'s with ID's, feel free to take a look.

The best things in life are simple things.

[fleetwood]

Thanks for the help Lee.
I will take a good look as soon as I have come to.

Having slept on it (or rather tried to sleep - usual problem ), I have come to the conclusion that it is the absolution positioning on the sidebars, which is throwing everything else out.
These are from a 3 column layout that I found whilst googling (fixed width sides, fluid centre), which all seemed fine, until I tried to place the footer below.

I am getting to the stage of reluctantly agreeing that I need some tables.
Tableless css layout is great in theory, but the real world simply isn't ready.

<this is your cue Malcolm )

Until the browsers settle on interpretation of styles, and old browsers disappear into the ether, trying to get complex layouts to work cross browser is just a nightmare.

The amount of times I have rewritten parts of my site is getting beyond a joke now, and I am getting very frustrated.

I shall take another look at restructuring the 3 col layout (including looking at your suggestions Lee), and let you know how I get on.

EDIT (additional comments):

I have used the 20% 60% 20% type layout before.
This current attempt was for fixed width sidebars, so they remained constant width across all displays, and a fluid centre.
Looks neater on larger displays IMO.

BUT I have to agree that I may be driving myself mad in the pursuit of a layout that isn't really workable, and will have to take a step back and fit my design into what works.

[leehack]

Martin, i think the problem with your code as you have it is the "clearFloat" <div> on line 1114 of your code is written like this:

<div class="clearFloat"></div>

The closing div needs to be at the bottom, that div above will do nothing. Move the </div> to the bottom of the code, leaving just the "<div class="clearFloat">" as the opening tag. It should then clear everything and give you what you want.

<div class="clearFloat"> </div>

<div id="footerX">

<div id="footerNav">
<ul>
<li><a href="GraphicNovels.html" target="_self">Graphic Novels</a>&nbsp;|&nbsp;</li>
<li><a href="Comics.html" target="_self">Comics</a>&nbsp;|&nbsp;</li>
<li><a href="Merchandise.html" target="_self">Merchandise</a>&nbsp;|&nbsp;</li>
<li><a href="BagsBoards.html" target="_self">Bags & Boards</a>&nbsp;|&nbsp;</li>
<li><a href="Sale.html" target="_self">Sale</a></li>
</ul>
</div> <!-- end footerNav -->

<div id="creditCardList">

We accept the following cards:<br />
<img src="http://www.megacitycomics.co.uk/acatalog/cc_delta.gif" width="51" height="34">
<img src="http://www.megacitycomics.co.uk/acatalog/cc_mastercard.gif" width="51" height="34">
<img src="http://www.megacitycomics.co.uk/acatalog/cc_solo.gif" width="51" height="34">
<img src="http://www.megacitycomics.co.uk/acatalog/cc_maestro.gif" width="50" height="29">
<img src="http://www.megacitycomics.co.uk/acatalog/cc_visa.gif" width="51" height="34">
<img src="http://www.megacitycomics.co.uk/acatalog/cc_electron.gif" width="51" height="34">

</div> <!-- end creditCardList -->


<div id="footerTools">
<ul>
<li><a href="../index.html" target="_self">Home</a>&nbsp;|&nbsp;</li>
<li><a href="sitemap.html" target="_self">Site Map</a>&nbsp;|&nbsp;</li>
<li><a href="http://www.comicwarehouse.co.uk/cgi-bin/ca000001.pl?ACTION=SHOWCART" target="_self">View Cart</a>&nbsp;|&nbsp;</li>
<li><a href="http://www.comicwarehouse.co.uk/cgi-bin/os000001.pl?ACTION=Start" target="_self">Checkout</a>&nbsp;|&nbsp;</li>
<li><a href="http://www.comicwarehouse.co.uk/cgi-bin/mf000001.pl?ACTION=SHOWFORM" target="_self">Contact Us</a>&nbsp;|&nbsp;</li>
<li><a href="../index.html" target="_self">Help</a></li>
</ul>
</div> <!-- end footerTools -->

</div> <!-- end footer -->
</div>

Remove the above closing div to just above here where shown, it needs to wrap the content you want to clear other content.

[fleetwood]

I'm not sure that I agree.

As far as I understood it (taken straight from my textbook!):

<div class="clearFloat"> </div>

is used to introduce:

.clearFloat { clear: both; }

from the css, as it can't be put straight into the html.

clear: both = clear all the above floats - anything below no longer floats

I will try and wrap the footer as suggested though - always happy to learn.

I do think that I may need to restructure (see my edit to pervious post), as quite frankly, I don't like the absolute positioning on the sidebars - it was taken from one of those "here's the perfect css 3 col layout across all browsers" type sites, that just never work completely!!

[george]

I am getting to the stage of reluctantly agreeing that I need some tables.
Tableless css layout is great in theory, but the real world simply isn't ready.

You're getting as paranoid about `tableless` as some people are about their Google listing.

Don't you have a meditation cd you can listen to ComicMan? Whales or something similar?

[leehack]

I'm not sure that I agree.

Try it, you will then .

As far as I understood it (taken straight from my textbook!):

<div class="clearFloat"> </div>

is used to introduce:

.clearFloat { clear: both; }

from the css, as it can't be put straight into the html.

clear: both = clear all the above floats - anything below no longer floats

I will try and wrap the footer as suggested though - always happy to learn.

<divs> are self collapsing if they have sod all in them, in other words they will do jack unless something is within them. If you put a bit of text in between, you would end up with a line (with the text) clearing to the bottom as you want the footer to. However why include an extra <div> when by adding the "clear: both;" style to the "<div id="footerX">" would do the same job.

I hope my brain is clear this morning lol, this is dicey with no code to work on

[leehack]

You have me doubting myself lol. I've grabbed your source and used it here to see.

You have a few of these <div>'s in the source, they will all be doing nothing IMO as they contain nothing.

[fleetwood]

Don't you have a meditation cd you can listen to ComicMan? Whales or something similar?

My mantra for today is... tables are my friend....tables are my friend....

Try it, you will then

I will Lee (I'm not as stubborn as I may seem )
Had to dive out of the house (away from development PC, and the constant nagging (err....help) of Mrs F), so will look again tomorrow (I've promised to do about 300 jobs later today!!!!).

[RuralWeb]

I am getting to the stage of reluctantly agreeing that I need some tables.
Tableless css layout is great in theory, but the real world simply isn't ready.

<this is your cue Malcolm )

Glad you agree - until browsers support css in a standard way then tables are the simplest option.

[leehack]

EDIT (additional comments):

I have used the 20% 60% 20% type layout before.
This current attempt was for fixed width sidebars, so they remained constant width across all displays, and a fluid centre.
Looks neater on larger displays IMO.

BUT I have to agree that I may be driving myself mad in the pursuit of a layout that isn't really workable, and will have to take a step back and fit my design into what works.

The 20/60/20 is just an example, you can replace those percentages with exact px figures, to get rigid layouts, there is no requirement to just use percentages. To use fixed px widths, its important to understand how the widths are created and added together, once you grasp that, you can just as easily do fixed widths.

If i want the leftSidebar to be 250px wide, with padding all round of 25px, then the width i specify is 200px as padding is added to the size. Borders further add to the deductions required.

[fleetwood]

Lee

I think the problem was with fixed width sidebars and floats.

I'm not seated at the right PC to check right now (where I have my stash of design bookmarks etc), but as far as I remember it, the reason I was using absolute positioning on the sidebars, was because you couldn't float left (fixed width), middle, right (fixed width) without fixing left and right to an absolute position, because the middle width needed a width definition as well.
I can't remember the exact reason off top of my head, but without the sides being fixed in position xpx from top, they simply didn't float correctly (with the middle not having a defined width).

With a fluid middle, and fixed width sides, the middle can't have a defined width (else it wouldn't expand and contract). You can do this with percentages, but not fixed widths.

If I'm talking out of my a** again, please let me know

Just so you know - I'm not arguing for the toss , and will be trying out your suggestions, as soon as I'm back at the right PC.

For the record, I believe this may have been the advice I followed originally:
http://glish.com/css/7.asp

and this is one I had bookmarked, but can't remember if I've tried it yet:

http://www.pixy.cz/blogg/clanky/css-3col-layout/

[leehack]

My initial reaction when i read your post is that you want fixed left column, fixed right column and fluid middle column. If you want to control in this way, my immediate thought is left column floated:left and rightcolumn floated:right. All within an outer layout div, which controls the position on the screen. If all of your divs are within this outerlayout div, you should be able to get rid of any absolute positioning.

To offer any reliable advice or help, i could really do with knowing what layout ideas you have. Are you saying "sod ya" to 800 screens and then catering for 1024 and 1280?

To get the relationship between the 3 floated left divs is a pain, especially if these are background colored differently, you will have probably seen that "you can use this layout, BUT your centre column must be the longest" also.

Let me know what you are trying to achieve and i will give a honest answer on how i would approach it. I am sure Jonty will jump in at some stage also (has he died?) and between us it will work. For the time being on what you have now, it is just your application of the clear style that is wrong, it is easy to misinterpret. A div MUST have something within it to act upon the styles you apply to it. Yours at the moment is effectively including a pointless line of code. The link above (post#10) shows you that just by moving that </div> to the correct place (bottom of page), it immediately puts it where you want it.