[Solved] Fluid 2 Column Equal height

I am have tried applying padding and margins of diefferent values to overcome this. I have tried to set margin-bottom: 0px; to both columns without any luck. I have also tried to set margin-bottom: 0px; to the footer, hoping it would line up correctly with the bottom blue part from the two blue columns. Nothings help.

What you will see is that #Footer and #ws is both wanished in IE, and in FF they are both having a blue part below. Below the red should be only the border of wrapper. Nothing more.

any tips?

Try to always avoid padding on main elements of the layout if you need to pad then pad on the inner elements or use an extra nested div with margins to simulate space it's safer. If you remove the padding on the leftnav IE should be ok.

For the footer you may want to look up the man in blue footerStickAlt technique for footer at bottom of page.

With file names always avoid spaces (your stylesheet)it's not an accepted convention and can cause problems, Unix does not allow them and has to convert your spaces to '%20'
It's a Windows (and I believe Mac too) bastardization that allows for spaces and whilst it will work on local machines can cause problems when transferred to Unix systems (90% of the web)

Hugo.

yet IE does not display things correct. The filenames are changed and will be reflected on the server as well shortly. Removed any padding and margins
on the content and leftnav. Still it dipslays incorrect in IE and in FF.

Will try the maninblue now.

I have now done what you suggested, but I am still struggling to make the
layout behave the way I would like it to. Now there is a new css file attached to the second link, and here I have used nested div's for both columns.

The trick in one true layout is to use large bottom padding+margins to allow the flow of the background color the stretch far further the the actual content. Yet I would expect the footer div to be placed correctly.
But something is abviously still wrong.

The important part of the equal height trick is the overflow hidden on the parent element, I've used the technique a few times but it's a problematical one.

The footer technique relies on the footer element coming after the #wrapper element in the flow, whereas at the moment it's within it.

You may be better off just trying to extend the left nav instead of trying to extend both columns, make the wrapper background blue height 100% overpad the leftnav and just give it a white right border.

Hugo.

I am sure that I am not seeing all that clearly.
If you look at this link; http://mytestserver.50megs.com/curved.html
this is somewhat what it should look like. This is just a js I added to make both columns equal length.

And then I you have a go here;
http://mytestserver.50megs.com/2ColEqHeight.html

you will see the the layout in the first link here is actually broken also, but because I added the jave script and made changes to background color in ws+wrapper so that they matches the body. This makes it all look ok, but actually I am having the problems as before.

As you might see the curved page will not even show in IE, yet in FF it looks the way it is supposed to look.

Keep in mind that I still need to figure out a way to force footer to reach all the way to the bottom. Like it is now it is not correct.

The footer technique relies on the footer element coming after the #wrapper element in the flow, whereas at the moment it's within it.

Hugo.

I fixed it now, http://mytestserver.50megs.com/hugo.html
So now I have the footer outside the wrapper, and not where I would like it
attached to the bottom of the blue columns. any tips?

You probably should loose the extra wrapper you have introduced I don't think it's going to be useful at this stage. footer is now outside #wrapper so you need to give footer a height, for the sake of argument 2.5em then apply a margin-top:-2.5em which will bring it into the wrapper but you will need to loose the bottom margin on the #wrapper the inner content of the two main areas will probably need a little padding to ensure that the footer can't slide over them but you should be able to work that out with a little trial and error.

Hugo.

Hugo.

Thx a lot. You really have help me out a lot here. Would never pulled this if without help here. I am getting closer.

Now it displays correctly in both FF and IE, but I can not understand why I can not control the height for the #ws in IE? It appears to be higher in IE then in FF.

Ooops. For some reasson layout breaks in IE. It seems it is not fluid.
When I resize browser in IE the leftnav get pushed away. Can this be because I changed the padding in the innerleftnav+inner content?
http://mytestserver.50megs.com/hugo.html

It will be as IE will be reserving line height to match the font-size that that element is picking up so if font-sizes are defaults it will try and hold to ~16px. Set font-size:0; on that element, however I'm not sure why you need that element (if it's the one I saw in the footer)

Hugo.

You are Great Hugo. Thx a lot!
Now we are talking

I must now only gain control over the padding, at least I belive that is what is causing IE to push #leftnav down below #content if windows is too small.

Thx

you will likely run into problems with fixed widths and fluid at some point, IE has the bad behavior of expanding dimensions if child content is going to exceed the parent instead of overflowing, you may need to think about setting some min widths.
Hugo.

I added min-width:200px; to the #inlaftnav div after first trying it on the
#leftnav div. The first try broke the fluidness even in FF. When I have min-width:200px; set to #inleftnav I would excpect to see the layout not break when rezising windows.

But again, the fluidness of the layout only works in FF. Surely there must be workarounds?

I have also tried to set a fixed pixel width for #leftnav, but that made it almost impossible to control the layout and amount of space between the divs, and a fixed width for leftnav caused layout to break in FF also. Could not get around that one, so I have gone back to width 21%. At least I then see a working layout in one browser, and can think that all the hours of tweaking is paying off

Edited:
Been playing around with different values for min-width, padding and margins and I have yet to find a 100 % truely fluid crossbrowser way to
fix this. I have re-read the box-model article and sliding doors to see if that might give me any new tips. I have even pulled out the menu in order to see if that is whats causes layout to break in IE.
http://mytestserver.50megs.com/nomenu.html

This too looks good in FF, but as "always", IE will not play correctly.
When screen is made smaller the #leftnav is as before pushed below #content. So it might not be the menues fixed width the causes this, rather I think it is something to do with the way IE interpet Css.
If that is the case, more likely there does excist some fix for this, but I then must know what to look for. So if anyone knows what this behavior is called, or the name of the bugfix pls let me know.

As I said earlier the 'bug' is that IE insists on expanding elements to fit content contrary to the proscribed behavior.

The layout collapses when you reach this word in the left nav 'consectetuer'; look in FF this word which cannot break slides over the right content area.

One thing you could try with the nav menu ul is to give it a % width, remove the fixed width on the ul anchor and replace that with height:100%; this would give you a fluid nav.

Ultimately floated layouts will break if not controlled at some point with FF that's easy as it understands min-width, IE naturally doesn't (at least not <IE7 )there are workarounds one of which is to use the rather ugly and non-validating MS expression statements to set min width.

Hugo.

So even if I use another menu, or fix the menu to use % width rather then a fixed width the layout will still break in IE?

I have on link on the page to a page where I removed the menu, but still the layout breaks. I was so sure this goal of any column order and fluid layout would be possible.

Should I make the leftnav wider? Will that help?

When they make it work with three columns it should be possible to get it to work with 2 columns as well?

Edited: Try to view the pages with smaller screen width. Works all the way down to 800x600 in FF, but breaks any smaller then 1280x1024 in IE.
Like this the layout is useless, but I would like to be able to get it to work. It must scale down to at least 1024x768 screen resolution. Will that be possible?

I haven't looked real close at your code, and I might be way off here, but you have a width of 78.5% for content and 21% for leftnav areas... then you also have margins and padding on those areas... sounds like a recipe for disaster to me?

Why not try removing those margins and padding on the structural elements and use margins or padding where needed on the html tags that go into those elements?

Just a thought

Sort of what I said earlier.
trond.rud I think it may make sense if you followed the actual 'one true layout' principle closer in other words try their approach of floating both main elements left, margining the main content from the left by the width of the left nav column and then giving the left nav a negative left margin 99%, in fact there is a generator for the 'one true layout' (sorry link not to hand)that can produce this for you.

Hugo.

First I will try to remove all margins and paddings and set the widths to different values. If none of that takes me further I will look up the onetruelayout generators.

Thx 4 the help u all.

Thx u guys. This looks great in IE now, check this links, as this is the css I have played with.
http://mytestserver.50megs.com/nomenu.html

Haven't checked FF yet, must switch pc.

I belive staying closer with the original made the difference. Now I am sure I will get to work.

Thx 4 all the help.

Thx u guys. This looks great in IE now, check this links, as this is the css I have played with.
http://mytestserver.50megs.com/nomenu.html

Haven't checked FF yet, must switch pc.

I belive staying closer with the original made the difference. Now I am sure I will get to work.

Thx 4 all the help.

Ooops, just checked it in FF, disaster. Need more work.
But I am sure this is the way to go.

Clearly I do not understand the concept 100%. What comes to play in order to decide what margins to give content and leftnav? As for now I have just played along with the values, sort of trial and error, but there must be a rule to all of this?

Do you ba any chance have bookmarked the generator? I googled and found a few, but none that will do what I need.

Fix layout in one browser and it breaks in the first browser

Man css is hard.

Is this
close to what you want?

This is the link to the 'one true layout' generator

http://www.fu2k.org/alex/css/onetruelayout/example/interactive

Hugo.

I'm not really sure how your getting this wrong but you seem to be changing properties without due care both browsers break on the last link.

This adjustment to your rules gets both browsers working it's back to a fluid layout though.

#wrapper{
width: 100%;
margin: 25px auto 0px;
background-color: #fff;
color: #333;
/*border: 1px solid gray;*/
line-height: 130%;
overflow: hidden;
}

#header{
background-color:#ccc;
width:100%;
height:  100px;
margin: 0 auto 4px auto; padding: 5px;
}

#content
{
float: left;
width: 80%;
margin-left: 20%;
background-color: #A0AFCB;

}

#incontent{
/*padding: 0.5% 0.5% 3% 0.5%;*/ 

}
* html #content
	{
	display: inline;
	}
#leftnav
	{
	float: left;
	width: 19%;
        margin-left: -100%;
	background-color: #A0AFCB;
        border: 1px solid gray;
	}
#inleftnav{
/*padding: 1% 0.5%; */
/*min-width:200px;*/
}
#footer
{
width:100%;
background-color: #cc0000;
clear: both;
margin:-2.5em auto 0px auto;
height: -2.5em;
/*border: 0px 1px 1px 1px solid gray;*/
}

When I suggested the footer properties I think for a working example I said set height to 2.5em and margin-top to -2.5em yet you mixed pixel height with relative ems it's best tyo stick to matched units and pixels are not a great idea for heights.

I would give that layout generator a try though, also don't get too hung up on source ordered elements it's largely a load of nonsense.

Hugo.

Well for this particular project I can not drop the ordered source, neither the fluid layout. So I am much stucked finding a way around this problem.
Also the design like it stands must remain, even though it will lokk totally different when all styling is completed. But the basic like I have posted must stand.

I will check if I might use a js styleswitcher to control the width, then I do not need to pay as close attention to getting one layout to fit all screens.

Tomorrow I will start from scratch with a working 3 column layout, made exactly as in the examples, and then remove a column as I get the 3 col working. I have worked with that for an hour now, but when I add the #infoot and the spacing between #leftnav #center and rcolumn it does not look to good. Sure that is possible to overcome though.

I know for a fact I saw a site using ordered source with 2 column, but I must have forgotten to bookmark that very site. Will try to see if I can find it back.

Do not have time to work more on this tonight, but I will start over early in the morning, to see if this problem can be oversome.

Playing around with the generator I realizes what a lame approach I have made to the layout. To much previous work with tables and spacer gifs must be the reasson I should have stayed within closeness of the original examples, and even if I am going for a 2 column, I should have used the 3 column. It makes perfectly sense to use the generator and the 3 column layout, yet to achieve the whitespace between leftnav and content, a better way is to use a div rather then padding.
Here is my new css + markup;

http://rud.notlong.com

Following the link makes better sense the posting the markup and css, the thread will grow too long too quick, as there is lots of comments in the css fixes.

Add the footer and header from my previous work, and it is all working.
And when I am done polishing this a bit, I will upload a working example
and put a link here.

EDITED:
ALL WORKING
Ok, now I got it. It is all good as far as I can see. I will go to my neighbour to view page in different browsers and screen res later. Ohh and I moved host, so not all is working as of this moment, but will fix tonite.
http://mytest.com.85.seekdotnet.com/ok3col.html

Just food for thought:

An often overlooked technique for creating visual division is using borders; perhaps your whitespace separating the elements could in fact be a white border instead of physical separation.

Hugo.

An often overlooked technique for creating visual division is using borders; perhaps your whitespace separating the elements could in fact be a white border instead of physical separation.

Hugo.

Damn, and now you tell me Just as I uploaded a working example *lol*
You are so right it hurst. Of course, only left side boder 4px #fff;
Simplicity is King!

Dang!

I must rewrite this tonight. It will be much more clean, and everything.
Pluss it will give me the benefit of excact control of the widt of the whitespace. I feel as smart as a pair of old shoes.

Well, I will get on with it later tonight.

Thx for all the help. Will try to write a tutorial on the matter as well. So others don't need to spend hours on the matter like I have wasted.

Thx for the time spend guiding me here Hugo. I am now done with the final design. This is much cleaner, with less divs, and yet Fluid. Scales well all the way down to 800x600.

The first link is to the css generator, with the values I used. It will o/c
also be in the markup.

http://pinnocchio.notlong.com

http://mytest.com.85.seekdotnet.com/2col.html