Hello Paul,
How are you man? I have one strange problem in Firefox 1.0. Please take a look of this page in Firefox 1.0 and you’ll see some big space below categories. I can’t find solution for this and this bug make me a little nervous because I need to finish beta version of this project today. So if you have some free time please take a look of this page and see if you can help me with this. I’ll appreciate that Paul;)
thanks in advance,
Jazz
It would take a lot to help you out I’m afraid 
You have made a lot of basic errors and design flaws in that small amount of code that it will be difficult to point you in the rght direction without re-designing everything for you and would be little point as you would not learn anything along the way
First of all the FAQ thread explains in detail how to position a footer so there is no need to go over it here. However it will not work in your layout because you have absolutely placed everything. Absolutely placed elements are removed from the flow and exert no pressure on other elements in the document. This means you cannot place a footer underneath them because there is nothing to hold the footer down as far as its concerned.
You need to have static content to maintain the flow of the document so that it pushes elements down in a logical order. Side columns would need to be floated to get them alongside content and still to remain in the flow of the document.
My 3 col demo is and advanced technique and does need a good understanding of normal rules of css in order to apply it. I suggest you read through the FAQ section on floats and positioning before you go any further and then re-read them again
100% height is also another complicated concept and again is explained in the FAQ as to what you can and can’t do. You need to have a valid page with a valid doctype to use the techniques in my demo as you need to take into account the broken box model of ie (see faq) and design accordingly.
This might seem a lot to learn before you can start using css but its worth understanding the basics and how they should be applied.
heres a basic example using some of your code to show howe to posision using floats and static placed content. This uses the 100% footer but does not utuilise equalising columns which are best implementwed using a repeating bbackground gif on the main container instead.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd](http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd)">
<html xmlns="[http://www.w3.org/1999/xhtml](http://www.w3.org/1999/xhtml)">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style>
/* commented backslash hack v2 \\*/
html, body{height:100%;}
/* end hack */
html, body {
background-color: #dedbbd;
margin: 0px ;
padding:0;
text-align: center;
}
#base {
width: 760px;
min-height: 100%;
background-color: red;
margin: 0px;
margin-left:auto;
margin-right:auto;
margin-bottom: -45px;
text-align: left;
}
* html #base {height:100%}
#header {
background-color: pink;
height: 75px;
border-bottom: 15px solid #000000;
position:relative;
}
* html #header {height:90px;he\\ight:75px}/*box model fix*/
img.logo {
position:absolute;
top: 10px;
left: 10px;
}
#left {
float:left;
width: 172px;
}
#navigation {
background-color: #333fff;
padding-bottom:15px;
}
#theme {
width: 588px;
height: 188px;
border: 0px;
background-color: #acacac;
}
#navextra {
background-color: #bade34;
}
#content {
float:left;
width: 588px;
border: 0px;
background-color: #5312dc;
}
#footer {
text-align:center;
position:relative;
height: 45px;
background-color: #aafe22;
clear:both;
width: 760px;
margin-left:auto;
margin-right:auto;
}
#clearfooter{height:45px;clear:both}
.clearer{
height:1px;
overflow:hidden;
margin-top:-1px;
clear:both;
}
p{margin-top:0}
</style>
</head>
<body>
<div id="base">
<div id="header"><img class="logo" src="../images/alltraveltailorlogo.png" border="0" height="51" width="296">
</div>
<div id="left">
<div id="navigation">
<p>left text</p>
<p>left text</p>
<p>left text</p>
<p>left text</p>
</div>
<div id="navextra">
More text</p>
<p>More text</p>
<p>More text</p>
<p>More text</p>
</div>
</div>
<div id="content">
<div id="theme">Theme </div>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
<div id="clearfooter"></div>
</div>
<div id="footer"> </div>
</body>
</html>
Hope that helps.
Paul
Hi jasmanac,
Your link isnt working - I just get a load of junk displayed.
Have you got the link to a working page
Paul
PS if you are experiencing the new firefox 1.0 clearing behaviour. Then you need to wrap the content in a float itself to stop clearing other floats. However I can’t see your page so I’m just guessing.
Thanks Paul and yes I not await and want the ready meal from you without having the learning curve.
Thinking about the boxes in my bad example. The image one is better to let it float within the content box?
I thought that unique boxes where named with ‘id’ . In some example in the faq I see you are using ‘class’ [ . instead of #]
Thinking about the boxes in my bad example. The image one is better to let it float within the content box?
If you want an image alongside text (or othe images then float it). I couldb’t see any reference to an image in your example.
I thought that unique boxes where named with ‘id’ . In some example in the faq I see you are using ‘class’ [ . instead of #]
Id’s are unique on the page which means you can’t re-use them again on the same page. Classes can be used over and over agin. Sometimes you don’t know if you will need an element again so its easier to make it a class.
However for structured content you should name all the main areas with id’s e.g, #header,#footer,#maincontent as they identify the structure of the page. As to whether every unique element should be an id is debatable as you lose the sense of structure that you just created.
In reality it’s up to you and what you feel comfortable with. In my demos I probably use id’s for the main sections and classes for other stuff. I will use id’s when I think theres a danger of the class being overwritten because id’s carry more weight than classes and will win out.
Paul
For the image I planned this ‘theme’ box and there I want to put the image (and only the image).
Now I think to make one big ‘content’ box 100% width and have the left bar (navigation) floating and also the imagebox(theme) floating. As I see it now, the navigation float left and the image float right.
HI,
If you follow my code above you will see how to float a column so just work with that code if you are not sure.
Remember that floated content must come before the static content (in the html) that it is floating alongside. If you hev a fixed width site then you can float all columns but if its fluid then float left and then right and then your content comes next 
Paul
- html #header
Can you explain me what the * html means in front of the #id boxes?
thanks
Can you explain me what the * html means in front of the #id boxes?
The short answer is that its a means of passing styles only to IE so that no other browsers see it. The long answer is already in the FAQ under the broken box model thread so I won’t repeat it here
Paul
#container {
position: relative;
top: 0px;
width: 780px;
left: 50%;
margin-left: -390px;
}
Why they put a left 50% and make a negative margin left as well (which is 50%)
the same is for the footer.
Hi,
This is another way of centering a fixed with element.
50% moves the left corner of the element to horizontally centre on the screen. However the element then stretches for 780px from the centre to the right, To make it central you drag it back using half the elements width (780/2=390px) so the element is now central on the page.
If you have a look at the faq you will see some other ways to centre elements as well.
Paul
Hi Paul,
Here is a good link for my page . You’ll see there this space which is a really huge:( And the problem is with clearing float but I can’t solve. I tried to wrap this section itself but in that case my layout is all broken. Can you help me with this Paul?
thanks in advance,
Jazz
Hi jazz,
This might be more complicated than it looks 
First of all just try clearing left instead of clear:both.
Opcija3<br />
<input type="hidden" name="broj_ankete" value="50" />
<input type="submit" name="submit" id="submit" value="glasaj" />
</form>
<a href="#" onclick="window.open('http://www.yuyellowpages.net/testiranje/anketa.php','myExample4','width=620,height=395');">Rezultati
ankete</a> </div>
[b]<div style="clear:left"></div>
[/b] </div>
<div id="separator_bottom"></div>
<!-- HELP MENU END HERE -->
<!-- LEFT COLUMN START HERE -->
<div id="top_left_column"></div>
You might be lucky Otherwise I can’t see a simple way without re-organising everything.
Paul
Huh I was very sad after reading this your sentance “Otherwise I can’t see a simple way without re-organising everything.”. Heh in that moment I wished to go home and get some sleep in a next few years:) But I was noticed a little smile on my face after clear: left; implementation:) Now everything works perfect! Thanks Paul!
best,
Jazz
Hi Paul, the site I have been working on has finally gone live, thanks for all the help with the 3 column header and footer layout. The site is now at this url http://www.stanleyparkecology.ca/ . All is well, except one problem I am now experiencing with Firefox (not IE for a change!). I added a background image in the top right corner of all of the content areas of the main sections. To do so, and make the whole image visible, I had to add a height for IE and a min-height for firefox which I originally placed on the main content div, but I had some problems with that so moved those rules to the divs I created to position the background image which wrap the main content div. I am not sure why, but on two of the pages the footer was not being pushed to the bottom of the page on firefox. It is happening on this page http://stanleyparkecology.ca/volunteer/ and this page http://stanleyparkecology.ca/jobs/ but not this page http://stanleyparkecology.ca/contact/ and I can’t figure out why it is being so selective. It is obviously something I have done in the code, but I just can’t find my error, once again, help would be greatly appreciated. The styles I added to wrap each main content area are like so:
#volunteer {
background:url(/images/design/bgVolunteer.jpg) 100% 0 no-repeat;
min-height:422px;
height:auto;
\\height:422px;
}
#jobs {
background:url(/images/design/bgJobs.jpg) 100% 0 no-repeat;
min-height:422px;
height:auto;
\\height:422px;
}
#contact {
background:url(/images/design/bgContact.jpg) 100% 0 no-repeat;
min-height:422px;
height:auto;
\\height:422px;
}
I have gone over and over the placement of the divs on the pages and cannot see that I misplaced any tags, and the pages validate so I am not sure what else may be the cause. I can simply remove the height restrictions on the pages that have lots of content, but as the content on the jobs page will be changing from lots of text to only one sentence or so, the background image wouldn’t show completely, and since it is working on some pages and not on others, that leaves me to believe that I am doing something wrong somewhere, but I am tapped out for solutions.
Help greatly appreciated.
Thanks.
Hi,
You have used set min-height and heights for mozilla in a way that it understands both. Therefore the element will not grow.
\\height:500px
Firefox understands the backslash. I think you meant to do this:
_height:500px
Ie parses the above but moz doesn’t. However i think it more reliable to hide your hacks from other browsers using the star selector hack instead.
* html #elementname {height:422px}
I’m away for the weekend now - back monday
Paul
Paul, first, thx very much for your helpful site/thread.
I’m new, so I apologize if this is quite elementary.
Among the obvious stylistic things I’m working on, I need to get the deadspace areas figured out first.
Secondly…I have fudged the padding to get the white area to extend - there must be a better way that I am not familiar with.
Suggestions?
You have this in your code:
he\ight:50px;/* for ie6 */
Can you please explain how this works?
You have this in your code:
he\ight:50px;/* for ie6 */
Can you please explain how this works
There is an explanation in the faq under broken box model
Basically ie5 and ie5.5. don’t parse the backslash when its in the middle of a style (as above). Therefore only ie6 reads the style correctly and the others just ignore it. It is often used for rectifying the broken box model.
The backslash mustn’t come before the letters a-f or numbers 0-9 or it gets treated as hex. Hence the reason the slash comes before the i in the code above.
The backslash hack is usually combines with the star selector hack which only ie parses and is used to supply styles only to ie.
See the faq for a complete example and description
Paul
Hi,
Sorry for the delay in replying but there don’t seem to be enough hours in the day anymore:)
I’m not quite sure what you are asking for. If you want your columns to extend full height then you will need to study the demo that started this thread as that is one of the few ways to axchieve this. However if you want columns separate and full length then you are out of luck as only tables do this properly.
I’d be inclined to jyst give the page a background colour and let the columns finish where they will. You can of course make them look pretty but equalising columns isn’t what css is good at even though it can be co-oerced sometimes as my examples show.
have a look at the examples to see what can be done so you get a feel for it.
If your columns are all to be the same length then you can cheat in a fixed with layout by using a repeating background gif to imitate the columns. The gif is repeated on the container and is stretched by content to provide the illusion of columns.
This example just does that.
http://www.pmob.co.uk/temp/3colcentred_2a.htm
Hope that helps.
paul