2 stretching columns

As your dealing with a blog you have the general problem of generated content and not knowing how long either menu or posts will be. With the menu as you have it, set to absolute you will allways have the problem of the menu running of the screen over anything else and you can't clear absolutes I think that with blogs the only real solution is to set both columns to floats with a clearing div or fix on the container that way it doesn't matter which is longer it will allways take the container down with it and the footer is set at the bottom of the container and cleared:both.

Hope thats of some help.

Hugo.

thx alot HUGO, your idea worked.

the updated work is not uploaded yet, hopefully during this day.

my new layout

<div id=archivecontainer>
  <div id=leftcol>
  </div>
  <div id=rightcol>
  </div>
</div>
<div id=foot>
</div>

only one of the cols is floated, otherwise they would've been below eachother.
and the footer has a clear: both.

still can't seem to get the float rules all clear in my head.
Is there anywhere where it is described CLEARLY??

You can get both columns floated, the best approach is the negative margin layout where the content comes first in the order of markup with the menu div following on after, good for text only readers etc otherwise you can have a whole load of links, archive, menu bumph ahead of the content that you want to read, have a go at following this guide
http://www.alistapart.com/articles/negativemargins/

Persevere, floats can be tricky!

Hugo.

result is uploaded.

thx again for the advice! this problem was bugging me for quite some time now.

Hi there, great looks fine. the amusing thing was just started a reply about how it wasn't working in FF as when I loaded the site it laid out the divs in block level order but then reloaded and it was fine :? anyway you got there and it looks like it is working fine, how stressful was it

Hugo.

fortunately it's not the only problem i'm strugling with

got many more css chalenges on my hands.

But you won't see my main problem unless you are registred & logged in.

sorry to bother you guys again :S

I've improved the css of my site (even less tables and the negative margins you guys suggested) and i've added another stylesheet.

but now the problem:

the problem of the footer not being pushed down has reappeared. But it has reappeared in only one of the two stylesheets.

I can't figure out the difference between the stylesheets which causes this problem, you help is once again needed you noble knights.

stylesheet 1: (not pushed down)
http://www.madvies.nl/moraalridder/archive.php?stylesheetid=1

stylesheet 2: (pushed down)
http://www.madvies.nl/moraalridder/archive.php?stylesheetid=2

demoraalridder, it looks to me as though both footers are at the bottom so not sure what the problem is here but in the first "stylesheet1" example in the css there are no rules for #maincontent which is relying on #wrapper to push it down, could be a problem might be an idea to use a height:100% on it?

Hugo.

oh i'm sorry i didn't notice the probem only occurs in mozilla and not in IE.

Is that Mozilla rather than Firefox? as FF seems fine! afraid I don't have a Mozilla browser.

Hugo.

i meant firefox when i said mozilla

but the problem only occurs when you EXPAND the menu by clicking on the month names

You will need a clearing fix to expand the container around the archive column, Tony's solution on this forum is a good choice as it requires no markup and can be set in the css, the other style that does seem to expand when you click on the archive link seems to have a couple of images at it's base which may account for things at any rate if you sort out a clearing fix or div on the problem sheet you will get a better understanding of the problem and probably be able to decipher what the difference is between the two.

Hugo.

i'm sorry hugo but i don't seem to be able to follow what kind of solution you are talking about. maybe you could give a short code example of what you mean? or point me to the solution to which you are refering

I've found the following text in a css resource:

It seems to me that my footer div needs to be displayed in such a fashion that it won't overlap. The float seems to extend over it's containing div (maincontent) and over the footer div.

The floated columns are breaking out of their parent div when they are increased in length this is the the correct way for floats to behave it's IE that has implemented the float model incorrectly to allow containing divs to expand along with the floats.
Try putting this clearing rule in your css

#wrapper:after{display:block; 
	       content: "."; 
	       height:0; 
	       clear:both; 
	       visibility:hidden; 
	  }

This should force the container to expand. I may have selected the wrong div in which case you may need to adjust the selector until you hit the right one! it needs to be the div that's holding the float menus
and is the one preceding the footer so that it pushes the footer down as well.
Hope this sorts it out as long as I haven't missed something else along the way :roll:
Let us know if it does work,
Hugo.

I tried it Hugo but unfortunately it didn't work..

Maybe a little naughty/too-forward(in search of better word) of me to ask, but maybe you could copy the entire source code from the page together with the stylesheet. Then test locally for a sollution so you can be more sure it works.

Not telling you to do anything here, just a thought.

Thx in advace for you help!

just slightly cheeky, I have to say that it's not really me that needs to be sure that it really works!
my comments were meant as pointers to hopefully give you an idea as to what possibly to tackle for a solution, as it is I did test it out localy
and after a rather long time with it find myself stumped and rather tired; for reasons that elude me at this time the wrapper will not expand around the floats I'll try and have another look at it tomorow.
in the meantime you have a few parse errors on the page that are throwing the page into quirks mode.

Hugo.

Ok now feeling refreshed ,have looked at this again and having played around with it quite a bit have managed to get FF to play ball the problem lies with the way you have set up your two floats and the very large negative margin you placed on the #column_2 float this is how I have dealt with the problem; float the #column_1 to the right, remove the padding and give it a left negative margin equal to it's width with the #column-2 leave it floated left with just it's width and some left margin to just pull it of the edge of it's parent this should now give you a column that when expanded pushes it's parent down
although not strictly needed I would leave the #maincontent:after rule in place as it's needed to expand the div .
I would say that I'm not too sure that this is the final solution and would suggest that you have a think about the overall layout as you will find that it probably can be simplified . This is a complex layout and I am still confused by certain aspects that I can't quite get my head around, but feel that there is possibly a fundamental flaw with the main layout divs flow. Give what I have suggested a go and test in as many browsers as possible as I have only checked in FF and IE6 and let us know if it seems to work or whether you find other problems.

Hugo.

thx hugo for spending even more time on my noobness..

i'm sorry to have to tell you that the development is going slow now-adays because i'm graduating from school and it takes up quite some time.

All i wanna say is i haven't forgotten about this topic and will come back with a reaction in a few weeks.

so that you know your time wasn't in vain.

ok, thank you very much Hugo!

changing the floats as you suggested worked. I needed to pull some stunts in order to make it visual appealing in both IE and FF, but it got the job done.

look here for the result

http://www.madvies.nl/moraalridder/archive.php

could you maybe explain WHY changing the float direction caused the containing div to expand, it doesn't really sound logical.

What error/bug have you exploited here?

That looks alright, seems fine now.

I only wish that I could explain how the fix worked but it's been that long since I looked at it and it was rather complicated that I have forgotten what the issues were :oops: which I am sorry for as it would help to know what the original problem was.
Floats are very tricky little things it helps to read as much info as you can find on the issues .
It's also a case that there are many ways of using them and in this instance floating one right and one left was the answer.

Have a look at these links, if you can master the vagaries associated with floats then you have cracked one of the essential layout tools in CSS.

http://www.positioniseverything.net/articles/float-bugs-1.html

http://css.maxdesign.com.au/floatutorial/

http://www.positioniseverything.net/explorer/escape-floats.html

One last thing you may want to add text-align:center; to the body and text-align:left; to the first child div of the body, just to center the page in IE5.5

Regards,

Hugo.

ok, new layout, same problem.

http://www.madvies.nl/moraalridder/archive.php?bid=237&stylesheetid=7

I've read the article Hugo suggested from positioning is everything but can't seem to get my head around this.

May i be so bold to ask you guys if you can help me (again :oops: )?

Ah new layout ,same problems, similar answers as before
I understand that floats are a bit of a nightmare to get to grips with but keep reading tutorials as they are essential to understand otherwise you will never master your layouts, your in good company as I still pull my hair out at times with them!

I say similar answers as before as a cursory look at your styles shows you are floating both columns left with some very large and odd margins in place

The layout is broken completely in IE and this is due to that huge negative margin on column 2 ? I would suggest that you remove all margins from the columns for a start and then as before float the right hand column to the right and proceed from there (one of the problems is that column 1 comes first floated left in the markup then column 2 also floated left yet your trying to get them to cross over each other for screen position).

As before in Firefox you will need to put in place a clearing fix on the container to stop the expanding menu from breaking out of the main container, you should have details on how to achieve that from before.

One other little point I would run your graphics through an optimizer as file sizes of 139kb are far too large and very slow loading on a 56k dialup, but this is a something to worry about once you have your layout working.

Hugo

thanks for helping out again.

I'm telling you, I tried using your solution from last time, but didn't get it right, so i changed the whole thing back to wat it was before.

Now it works like a charm, but only in IE the margins i set seem larger. This throws the layout off.

I'm trying to use a solution for the IE-PNG transparancy prolbem found here but i have not been able to get it working.

The filter tag just doest't make png's translucent.

Anybody got any experience with this IE solution?

Could you try adding display inline to the floats then, just to ensure your not suffering from the IE "Double Margin Bug".

Hugo.

ok, that helped.

Didn't know that solution could be that simple. thx again!

also i narrowed the width of the #footerstats since it was sticking out in firefox and didn't do anything there. In IE it pushed my containers with to a larger value causing a right-padding thingy to appear.

That's fixt too now.

I wouldn't know where to go if i didn't have you guys, thx alot!

No problem,

It's worth bearing in mind that with floats on the extreme edges left or right and having margins that go in the same direction as the float that IE will double those margins, which can break a tight layout and sometimes if the margins are small to start with one can easily overlook the doubling, but display inline sorts it out.

Hugo.