Topic: Liquid design problem(s)

ok....now i'm trying to see how different bits of my layout will work....and for whatever reason (i'm sure it my doing) it's not.
when i resize the window in ie6 it jitters and wraps the last column (sometimes), in ns7and mozilla it just wraps the last column and in opera7 it does everything fine, but there's a space between the edge of the columns and the window where you can see the background.
also, how do i get it off the top of the page? do i use top:xxx to place them??
also, if you're using opera7....if you'll notice the right side...the green/blue is a px longer than the rest.....why is that??
i plan on having all of my css on a seperate style sheet, but i figured for the sake of learning, i'd leave it where everyone could see it
any and all help is greatly appreciated!!!

Click here!

Cool effect. I'm taking some guesses here.

For IE, try taking removing the float: left from #rightmain.

For Moz, the width of borders is supposed to be *included* in an element's width. With leftmain, centermain and rightmain taking up 100%, Mozilla may be trying to add the 15px to the width calculation rather than including it in rightmain's 20%. Then it may think "So where am I supposed to put this 15px right border?" then deciding that since there's no room it should put rightmain beneath.

Admittedly, that sounds more like IE5Win behavior--Moz usually gets it right--but it could be some weird interaction with the fixed-width border on a percentage-width div.

Then again, I could be wrong...

edit: typos



[This message has been edited by brucew (edited 02-18-2003).]

Oh, another thing. The float: left isn't required in #head. Since it's width is 100%, there's nothing to float it left of. Maybe that's confusing Opera?

thanks bruce...i didn't even think about the head thing
as you suggested i removed the float left and that REALLY messed it up...it took it out all together actually.
i also changed the 20% to 18% and it kept it up there, but then you could see a space between the two columns then as soon as i resized the window too small it wrapped the last column. what a pain!


[edit] after quite a bit of work (for me anyways) and calling my computer nasty names...it IS the border that's screwing that up. so, that's a good thing to know....it's still awfully jittery and wraps in ie6 though....it only wraps at certain window widths. i dunno that that's something that can be fixed. but at the same time i don't know that people are going to be yanking their windows around like i did either lol. now to figure out how to move it down the page [/edit]

[This message has been edited by Lacuna (edited 02-18-2003).]

Okay, how about putting the three colums inside a wrapper div which itself contains the top and right borders?

Something like:

#wrapper {
width: 100%;
border-top: 15px solid #B17CA4;
border-right: 15px solid #B17CA4;}

Remove the borders from left, center and right mains, then put the columns inside the wrapper div:

<div id="wrapper">
<div id="leftmain">olangoiwrh</div>
<div id="centermain">owighnoign</div>
<div id="rightmain">olijhgiophjga</div>
</div>

Might work...

yeah, that's what i was kinda thinking also. but i read somewhere that that wasn't a way to go because....i can't remember why (and i just woke up so my brain hasn't had enough coffee yet). i'll give it a try though
thanks bruce, you've been very helpful.

[edit] ok...i did that...it's still wrapping in ie6 at certain widths. for now, not a big deal. also, in ns, the #foot doesn't show up. it's up behind the other divs. if i try to specify where it should be for netscape, then it's out of wack in ie and opera. is there something in the code that i'm not doing right??[/edit]

[This message has been edited by Lacuna (edited 02-18-2003).]

All righty!

Have a look at this: http://www.brucew.com/ozone/main.htm

In order to see what was happening, I put some test in each div. That helped troubleshooting tremendously. I commented out things rather than remove them so that you can uncomment them to see why I took them out.

It's not perfect, there's still some random weirdness and IE6, Moz 1.3 and Opera 7.01 each have their own ideas on the sort of random weirdness to introduce. But it's a starting point.

Now, if true liquidity is your goal, then you'll have to remove all the height constraints. As you narrow the window, stuff moves down and the page wants to get longer. Again, each browser has its own ideas of how to handle that.

If you truly want fixed heights no matter what the width, you'll need to do something with overflow.

HTH!

wow bruce! thank you SO much!
ok....i'll have a look at all that! i gave them a fixed height because of the background in the center one. i am not sure if i 'had' to do that or not. will give it a go without and see how it works.