26 replies [Last post]
demoraalridder
Offline
Regular
Last seen: 16 years 7 weeks ago
Timezone: GMT+1
Joined: 2004-06-17
Posts: 33
Points: 0

I'm busy with a column problem and i don't seem to find the answer.

I've got a layout using 2 columns.

On the left side i've got a menu which can be enlarged (click on the red lines).
The problem is I don't know which of the two columns will be the tallest. I would like the footer pushed down by both the left and the right column. So far no luck for me.

How do i get the left and the right column to behave to my liking?

Thx in advance for your reactions

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

demoraalridder
Offline
Regular
Last seen: 16 years 7 weeks ago
Timezone: GMT+1
Joined: 2004-06-17
Posts: 33
Points: 0

2 stretching columns

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??

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

2 stretching columns

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

demoraalridder
Offline
Regular
Last seen: 16 years 7 weeks ago
Timezone: GMT+1
Joined: 2004-06-17
Posts: 33
Points: 0

2 stretching columns

result is uploaded.

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

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

2 stretching columns

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 Shock but then reloaded and it was fine :? anyway you got there and it looks like it is working fine, how stressful was it Smile

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

demoraalridder
Offline
Regular
Last seen: 16 years 7 weeks ago
Timezone: GMT+1
Joined: 2004-06-17
Posts: 33
Points: 0

2 stretching columns

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.

demoraalridder
Offline
Regular
Last seen: 16 years 7 weeks ago
Timezone: GMT+1
Joined: 2004-06-17
Posts: 33
Points: 0

2 stretching columns

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

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

2 stretching columns

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

demoraalridder
Offline
Regular
Last seen: 16 years 7 weeks ago
Timezone: GMT+1
Joined: 2004-06-17
Posts: 33
Points: 0

2 stretching columns

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

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

2 stretching columns

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

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

demoraalridder
Offline
Regular
Last seen: 16 years 7 weeks ago
Timezone: GMT+1
Joined: 2004-06-17
Posts: 33
Points: 0

2 stretching columns

i meant firefox when i said mozilla

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

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

2 stretching columns

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

demoraalridder
Offline
Regular
Last seen: 16 years 7 weeks ago
Timezone: GMT+1
Joined: 2004-06-17
Posts: 33
Points: 0

2 stretching columns

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:

Quote:
A float can overlap other boxes in the normal flow (e.g., when a normal flow box next to a float has negative margins). When an inline box overlaps with a float, the content, background, and borders of the inline box are rendered in front of the float and are only visible when the box is transparent. The content of the block box is rendered in front of the float

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.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

2 stretching columns

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

demoraalridder
Offline
Regular
Last seen: 16 years 7 weeks ago
Timezone: GMT+1
Joined: 2004-06-17
Posts: 33
Points: 0

2 stretching columns

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!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

2 stretching columns

Smile 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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

2 stretching columns

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

demoraalridder
Offline
Regular
Last seen: 16 years 7 weeks ago
Timezone: GMT+1
Joined: 2004-06-17
Posts: 33
Points: 0

2 stretching columns

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.

demoraalridder
Offline
Regular
Last seen: 16 years 7 weeks ago
Timezone: GMT+1
Joined: 2004-06-17
Posts: 33
Points: 0

2 stretching columns

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?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

2 stretching columns

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

demoraalridder
Offline
Regular
Last seen: 16 years 7 weeks ago
Timezone: GMT+1
Joined: 2004-06-17
Posts: 33
Points: 0

2 stretching columns

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: )?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

2 stretching columns

Ah new layout ,same problems, similar answers as before Smile
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

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

demoraalridder
Offline
Regular
Last seen: 16 years 7 weeks ago
Timezone: GMT+1
Joined: 2004-06-17
Posts: 33
Points: 0

2 stretching columns

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?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

2 stretching columns

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

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

demoraalridder
Offline
Regular
Last seen: 16 years 7 weeks ago
Timezone: GMT+1
Joined: 2004-06-17
Posts: 33
Points: 0

2 stretching columns

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!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

2 stretching columns

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me