Fantastic -that example looks perfect! Did I miss this one from your homepage?
Thanks Paul 
Did I miss this one from your homepage?
No - I’m afraid I’ve got examples scattered everywhere lol.
I can’t seem to find the time to update them all and put them in some logical order. I will get around to it some time
Paul
i’ve seen this post, but i don’t get it but i think this is a simular thing of my problem:
am i right?
Hi Robcau,
I have replied in the other thread.
As a rule of thumb its best not to double post as it may upset some members
Paul
Hi Paul,
Here I am:) I was working on my Yellow Pages project and right now it’s pretty done but I have one problem with expanding divs which I can’t solve myself. Here is a link to my page with expandings divs so if you have some free time to look at this code I’ll appriciate that. Just take a look on the bottom of the page and you’ll see this olive links which represents comments. The problem persist when you click on this link to expand desired comment. I tried to fix this but without anu success:(
thanks in advance,
Jazz
Hi,
This looks like a js problem where the absolute footer isn’t being re-drawn after you’ve toggled the element on.
You could hide the footer when you toogle the element and then turn it back on afterwards which should cure the problem.
Check my JS - but this seems to work:
<script type="text/javascript" language="javascript">
function Toggle(item) {
obj=document.getElementById(item);
[b]document.getElementById("footer").style.display="none";
[/b] visible=(obj.style.display!="none")
if (visible) {
obj.style.display="none";
} else {
obj.style.display="block";
}
[b]document.getElementById("footer").style.display="block";
[/b]}
</script>
In firefox your expanding comments have been restricted to a height of 20px which is not enough. Take the height out altogether.
.komentarOff {
display: block;
margin-top: 10px;
background-image: url([http://www.yuyellow.com/temp/yp/images/icon_komentar.gif](http://www.yuyellow.com/temp/yp/images/icon_komentar.gif));
background-repeat: no-repeat;
background-position: 0em 0em;
margin-left: 50px;
padding-left: 20px;
}
.komentarOn {
display: block;
margin-top: 10px;
background-image: url([http://www.yuyellow.com/temp/yp/images/icon_komentar.gif](http://www.yuyellow.com/temp/yp/images/icon_komentar.gif));
background-repeat: no-repeat;
background-position: 0em 0em;
margin-left: 50px;
padding-left: 20px;
}
Hope that helps.
Paul
Thanks man;) Now all works perfect 
I have editied my original post quite a bit…
Hi again Paul,
I just downloaded and installed Firefox 1.0. Then I went to the site i am developing and using your 3-col layout. A while back and a fair bit of tinkering later I finally got four divs that contained text and a thumbnail image to line up in two by two layout. They were different sizes so minimum height would have helped if IE supported it… but aside from that I finally had it floating and clearing properly in IE and Firefox.9 When I recently went back to that page and viewed it in the new Firefox 1.0, it was applying the clear rules to the content in the left column so the four divs now flow way down below the left columns navigation as opposed to sitting where they should under the main content, clearing only the last paragraph of the center content div. Since my original post I have been attempting many different ways of achieving this but it doesn’t seem to want to work in both browsers…
I have set the four divs up with the first floating left, the second floating left and clearing right, the third floating left and the fourth floating left. I thought that would get them to all float in a 2x2 format… but they are not the same heights and ie doensn’t deal with minheight so… next up I grouped them in 2 divs. So the top two in one div, with a float left and a clear right and the bottom 2 in another div with a float left. That seemed that worked but Firefox1.0 pushed the div way down next to the bottom of the left column navigation. So I assume that clear left was applying to it…
So then I removed it and now just have them floating left, and it seems to be the best option, but in IE if the widow is expanded enough, they just don’t sit in 2X2, it ends up being a 3X1…
Any ideas on what I am doing wrong here? I am quite sure it was sitting properly in both IE and Firefox0.9, and am arroganlty thinking that it is the new Firefox1.0 which is causing the problem as opposed to my own bad grasp of all this css voodoo…
here is where you can see the issue:
[http://stanley.server309.com/programs/urbanWildlife/coyotes/](http://stanley.server309.com/programs/urbanWildlife/coyotes/)
The same thing is occurring on this page as well
http://stanley.server309.com/programs/public/index.php#sunday
Thanks.
Hi,
Sorry for the late reply
The page seems to look ok in Firefox 0.9 and ie6 now (I haven’t had time to download firefox 1.0 yet). Is it the 4 images in the centre column that you are talking about?
When you cleasr a float you are telling the float to clear any other floats above it in the document. This could mean that the float will try to clear your left column because that is a float (opera will occasionally do this as will some other browsers). Just beacuse your centre floats are in a different div makes no difference.
The usual solution is to include the floated elements in an element that is itself floated and this seems to contain the clearing of the floats to within that element.
I’m not sure if this was the problem you were experiencing in firefox 1.0.
Ie6 looked ok and if you want to keep the floats 2 abreast then you will need to a clear:left to the third float to stop it going up alaongside the second on wide screens.
If you want a consistent height then you can wrap each pair of loats in an element and apply a min-height to it. Then for ie use * html #elementname{height:300px) or whatever height you want. IE treats height almost as min-height anyway and will expand when required, but you need to hide it from the other browsers (and iemac so also use the double backslash mac hididng hack).
Hope thats given you some ideas
Paul
If you want a consistent height then you can wrap each pair of loats in an element and apply a min-height to it. Then for ie use * html #elementname{height:300px) or whatever height you want. IE treats height almost as min-height anyway and will expand when required, but you need to hide it from the other browsers (and iemac so also use the double backslash mac hididng hack).
If you want a consistent height then you can wrap each pair of loats in an element and apply a min-height to it. Then for ie use * html #elementname{height:300px) or whatever height you want. IE treats height almost as min-height anyway and will expand when required, but you need to hide it from the other browsers (and iemac so also use the double backslash mac hididng hack).
That looks like a direct quote (almost word for word) from one of my posts lol [edit](It is a direct quote from the post above - sorry I didn’t notice)[/edit]
(However don’t confuse that technique with equalising columns as its not the same;) )
Paul
Hi Kmurphy (and anyone else who’s interested),
I’ve downloaded firefox 1.0 now and it does have a problems with float clearing.
The solution is exactly as posted in my previous reply.
Firefox is clearing all floats in the document which means it clears the side columns whenever you clear an element in the centre. The solution is simply to wrap the centre content in a n element that is itself floated and the float clearing is constrained within that element as it can’t really clear itself.
Hope that helps.
Paul
Hi Paul,
I have a a problem with my yellow pages project.
When page load for the first time, firefox don’t show all items or show them in some strange flow? And after refreshing all looks great. Where is a problem?
Please Paul help me with this if you have some free time…
thanks in advance,
Jazz
Hi,
The problem with the blue line is just the text decoration on the anchor.
Turn it off with this:
ul#dodaj_preporuke li a{text-decoration:none}
You have a problem in the new Firefox 1.0 with float clearing. You need to wrap your centre content in an inner float to avoid the bug/problem.
e.g.
html>body div#innercentrecontent{float:left;width:99.9%}
<div id="centrecontent">
<div id="innercentrecontent">
....
....
...
<!-- PRIKAZI KOMENTARE NA PREPORUKU HOLDER END -->
<br style="clear:both" />
</div>
</div>
I couldn’t see the refreshing problem on my firefox but I have seen it before where javascript is loading stuff after the page has loaded. The only thing you could try is turning the elements off until the script has loaded and then redisplaying them.
However that will require some script which in not my area.
The other thing you can do is try to work out exactly which element (or elements) are causing the problem and then try some other ways of positioning them.
As I couldn’t see the problem its hard for me to offer much help
Paul
Thanks man! I solved this blue line but I forgot to update version of my page on internet;) Anyway, thanks for helping me!
About this first time loading page. I found some Flash of Unstyled Content (FOUC) bug which appear if you using @import command. But as you can see I use just link tag and still can’t find a solution for this. I must review my code and as you said go through all elements and find an error if exist.
Anyway, once again, thanks for your help Paul!
stay well,
Jazz
Hi man,
I made this Website for one company here. Everything looks great in Firefox and Opera but, as always, Explorer crash whole layout. What hacks I need to write to make this Website visible in Explorer.
ps: I really hate IE :mad:
thanks dude,
Jazz
Hi,
You need to account for the three pixel jog and the default body margin.
[b]body {margin:8px 0 0 0;padding:0}
div#header {
text-align: right;
display: block;
margin: 0px;
padding: 35px 0px 0px;
}
[/b]
add theses styles below at the end of the stylesheet/
* html div#left_column{margin-right:-3px;}
* html div#main_content {margin-left: 212px;}
Paul
Thanks Paul!
This work great;) But I have just one small problem and I can’t find a solution for it. Please take a look of this page . As you can see space beetwen text list items and images list item is too big. Where I made a misteake?
thanks in advance,
Jazz
Hi,
Not sure what you mean it looks ok to me 
I started to make a site in only css without using tables. I only cannot figure out how to position the footer in such way that it stays at the bottom and moves with growing content in the content box. Also i not saw (understood) all in the postings?
#body {
background-color: #dedbbd;
margin: 0px 0px 0px 0px;
text-align: center;
height: 100%;
}
#base {
width: 760px;
height: 95%;
background-color: #dedbbd;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
margin-bottom: -50px;
text-align: center;
}
#header {
position: absolute;
background-color: #dedbbd;
top: 0px;
left: 5px;
width: 760px;
height: 75px;
border-bottom: 15px solid #000000;
}
img.logo { position: absolute;
top: 10px;
left: 10px;
}
#navigation { position: absolute;
top: 90px;
left: 5px;
width: 172px;
height: 265px;
border: 0px;
background-color: #333fff;
}
#theme { position: absolute;
top: 90px;
left: 177px;
width: 588px;
height: 188px;
border: 0px;
background-color: #acacac;
}
#navextra { position: absolute;
top: 355px;
left: 5px;
width: 172px;
height: 200px;
border: 0px;
background-color: #bade34;
}
Content { position: absolute;
top: 278px;
left: 177px;
width: 588px;
height: 200px;
border: 0px;
background-color: #5312dc;
}
#footer {
text-align:center;
position:relative;
left: 5px;
width: 100%;
height: 45;
border: 0px;
background-color: #aafe22;
}
the html:
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv=“Content-Type” content=“text/html; charset=windows-1251”>
<link rel=“stylesheet” href=“http://www.tailormadeperfection.com/Css/newpagedesign.css” type=“text/css” />
</head>
<body>
<div id=“base”>
<div id=“header”><img class=“logo” src=“…/images/alltraveltailorlogo.png” border=“0” height=“51” width=“296”>
</div>
<div id=“navigation”>adfadfadfafadf
</div>
<div id=“theme”>
</div>
<div id=“navextra”>
</div>
<div id=“content”>
</div>
<div id=“footer”>
</div>
</div>
</body>
</html>
If you can help me out with it?
Some other question is that I see the header has moved a couple of pixels to the right. I not changed anything. Maybe someone who sees what i did wrong?