milov.nl: forum

milov.nl : forum : coding : 'floating 3 col design'

floating 3 col design	da dog, 030312 01:23
Hi: I am experimenting with a 3-col float design for my weblog and I am at a loggerheads on how to make it work. I used glish.com/css float 3 columns design.... with fluid columns it works perfectly in opera = floatmain.css but not in IE, hence the conditional iefloatmain.css How do I make it work in IE: the 2nd and 3rd column line up with the last div in col 1 (I put body in col 1, sidebars in col 2 and 3: all are percentage widths) http://radio.weblogs.com/0107233/categories/dcDogNews/ I haven't switched over my main weblog's page yet... it uses greymain.css I can send the template code (it runs through the radioland grinder and cranks out the web pages) Thank you.
user-uivenp6.dsl.mindspring.com

floating 3 col design

da dog, 030312 01:23

Hi:
I am experimenting with a 3-col float design for my weblog and I am at a loggerheads on how to make it work. I used glish.com/css float 3 columns design.... with fluid columns
it works perfectly in opera = floatmain.css
but not in IE, hence the conditional iefloatmain.css
How do I make it work in IE: the 2nd and 3rd column line up with the last div in col 1 (I put body in col 1, sidebars in col 2 and 3: all are percentage widths)
http://radio.weblogs.com/0107233/categories/dcDogNews/
I haven't switched over my main weblog's page yet...
it uses greymain.css
I can send the template code (it runs through the radioland grinder and cranks out the web pages)
Thank you.

user-uivenp6.dsl.mindspring.com

Re: floating 3 col design	Drake+S, 030312 10:24
hmm... Try setting the width for center to 33 instead of 34.... just to let you know why I mention this..try this. Open the file before changing the width...now hit the F11 key. Notice how the divs arrange themselve correctly now... I'm guessing using 100% of the webpage size makes the last div to large and so IE sends it down... or something like that... post back if this doesn't fix it.
px4ar.ed.shawcable.net

Re: floating 3 col design	Drake+S, 030312 10:53
by open file i meant view it as a webpage...sorry for any misunderstanding.
px4ar.ed.shawcable.net

Re: floating 3 col design	da dog, 030313 03:25
Thanks. No, that doesn't do it either. mainfloat.css works correctly in Opera and not in MSIE 6.0 so I have a different css for MSIE: greymain.css (and I'm experimenting with iemainfloat.css). In the "Visual Formatting Model" at http://www.w3.org/TR/CSS2/vusuren.html (section 9.5), there are 9 precise rules that govern the behavior of floats: The left outer edge of a left-floating box may not be to the left of the left edge of its containing block. An analogous rule holds for right-floating elements. If the current box is left-floating, and there are any left floating boxes generated by elements earlier in the source document, then for each such earlier box, either the left outer edge of the current box must be to the right of the right outer edge of the earlier box, or its top must be lower than the bottom of the earlier box. Analogous rules hold for right-floating boxes. The right outer edge of a left-floating box may not be to the right of the left outer edge of any right-floating box that is to the right of it. Analogous rules hold for right-floating elements. A floating box's outer top may not be higher than the top of its containing block. The outer top of a floating box may not be higher than the outer top of any block or floated box generated by an element earlier in the source document. 5. The outer top of an element's floating box may not be higher than the top of any line-box containing a box generated by an element earlier in the source document. A left-floating box that has another left-floating box to its left may not have its right outer edge to the right of its containing block's right edge. (Loosely: a left float may not stick out at the right edge, unless it is already as far to the left as possible.) An analogous rule holds for right-floating elements. A floating box must be placed as high as possible. A left-floating box must be put as far to the left as possible, a right-floating box as far to the right as possible. A higher position is preferred over one that is further to the left/right. I think my css violates rule 5 (if I understand it correctly): 5. The outer top of a floating box may not be higher than the outer top of any block or floated box generated by an element earlier in the source document. However, Opera allowed me to place a float to the right of column 2 at the top and column 2 is a bunch of floats stacked on top of each other. (hmmm... am I exploiting a bug in Opera 7.02?) What I have to do is sit down once more and go through the css and the template to see if golden rule 5 shoots down floating the 3rd column next to a bunch of floats stacked on top of each other for MSIE (maybe MSIE adhers to this rule... ) However each column is in its own container. so I had several ideas, which I'll try out: 1. make 3rd column absolute position and don't float it, make it definite width too... then it won't eat into the other columns when the window is shrunk... a cop out, but it works... however it ruins the effect of having nice margins between floats... I could make the 3rd column a precise width too... (I've done that, but it isn't satisfactory) 2. I could float the top most container of middle col (col 2) and then relative position each container beneath it... that might work... that way I could float col 3 at the top because col 3 would then not violate golden rule no. 5 (so I'll try again with another css -- should be easy). I'm a neophyte at this, so I went to Barnes & Noble and snooped through the css books: only 3 there: 1 was Eric Meyers... and it wasn't the one I wanted (one of his books explores 'float' in detail). your idea was one I tried (great minds think alike ... heh heh... okay, so I don't have a great mind... ) tomorrow my dog goes to visit his therapy friends (he's a therapy dog), so I won't get back to this until Friday. chow ciao! da dog.
user-2ivelgc.dialup.mindspring.com

Re: floating 3 col design

da dog, 030313 03:25

Thanks. No, that doesn't do it either.
mainfloat.css works correctly in Opera and not in MSIE 6.0
so I have a different css for MSIE: greymain.css
(and I'm experimenting with iemainfloat.css).

In the "Visual Formatting Model" at http://www.w3.org/TR/CSS2/vusuren.html (section 9.5), there are 9 precise rules that govern the behavior of floats:
The left outer edge of a left-floating box may not be to the left of the left edge of its containing block. An analogous rule holds for right-floating elements.
If the current box is left-floating, and there are any left floating boxes generated by elements earlier in the source document, then for each such earlier box, either the left outer edge of the current box must be to the right of the right outer edge of the earlier box, or its top must be lower than the bottom of the earlier box. Analogous rules hold for right-floating boxes.
The right outer edge of a left-floating box may not be to the right of the left outer edge of any right-floating box that is to the right of it. Analogous rules hold for right-floating elements.
A floating box's outer top may not be higher than the top of its containing block.
The outer top of a floating box may not be higher than the outer top of any block or floated box generated by an element earlier in the source document.
5. The outer top of an element's floating box may not be higher than the top of any line-box containing a box generated by an element earlier in the source document.
A left-floating box that has another left-floating box to its left may not have its right outer edge to the right of its containing block's right edge. (Loosely: a left float may not stick out at the right edge, unless it is already as far to the left as possible.) An analogous rule holds for right-floating elements.
A floating box must be placed as high as possible.
A left-floating box must be put as far to the left as possible, a right-floating box as far to the right as possible. A higher position is preferred over one that is further to the left/right.
I think my css violates rule 5 (if I understand it correctly):
5. The outer top of a floating box may not be higher than the outer top of any block or floated box generated by an element earlier in the source document.

However, Opera allowed me to place a float to the right of column 2 at the top and column 2 is a bunch of floats stacked on top of each other. (hmmm... am I exploiting a bug in Opera 7.02?)

What I have to do is sit down once more and go through the css and the template to see if golden rule 5 shoots down floating the 3rd column next to a bunch of floats stacked on top of each other for MSIE (maybe MSIE adhers to this rule... )
However each column is in its own container.

so I had several ideas, which I'll try out:
1. make 3rd column absolute position and don't float it, make it definite width too... then it won't eat into the other columns when the window is shrunk...
a cop out, but it works... however it ruins the effect of having nice margins between floats... I could make the 3rd column a precise width too... (I've done that, but it isn't satisfactory)

2. I could float the top most container of middle col (col 2) and then relative position each container beneath it... that might work... that way I could float col 3 at the top because col 3 would then not violate golden rule no. 5 (so I'll try again with another css -- should be easy).

I'm a neophyte at this, so I went to Barnes & Noble and snooped through the css books: only 3 there: 1 was Eric Meyers...
and it wasn't the one I wanted (one of his books explores 'float' in detail).

your idea was one I tried (great minds think alike ... heh heh... okay, so I don't have a great mind... )

tomorrow my dog goes to visit his therapy friends (he's a therapy dog), so I won't get back to this until Friday.
chow ciao! da dog.

user-2ivelgc.dialup.mindspring.com

Re: floating 3 col design	Drake+S, 030313 05:17
hmmm... ok. check this webpage out..it talks about boxes and stuff...you might find it interesting: http://www.thenoodleincident.com/tutorials/box_lesson/index.html
px4ar.ed.shawcable.net

Re: floating 3 col design : need help testing	da dog, 030313 16:08
thanks -- I read that yesterday too. great resource. Can you test my blog at: http://radio.weblogs.com/0107233/categories/dcDogNews/ I need help testing with: IE 5.5, Mozilla, Opera 6, It works now with Opera 7.02, MSIE 6 (I think...) If it works, I'll put it on the main Dog News page While not perfect, I like the design better. opinions, suggestions and testing, please. Thank you... da dog
user-uiveq5j.dsl.mindspring.com

Re: floating 3 col design	da dog, 030313 16:13
oops, it doesn't work w. 800x600. I need to figure out how to make the content column the topmost z-index (hmmm... thought I did...) it's z-index 3, sidebars are z-index 2 and 1. oh, you can't use z-index with float, can you? suggestions... needed thank you...
user-uiveq5j.dsl.mindspring.com

The mother lode of designs for 3 col design	da dog, 030318 23:03
http://css-discuss.incutio.com/?page=ThreeColumnLayouts a very comprehensive list of floated 3 col templates which work in almost all browsers. One resource EVEN has an online template generator, so you can customize your 3 column float. get it at: http://www.fu2k.org/alex/css/layouts/3Col_OrderedAbsolute.mhtml woof!
user-2iniggt.dialup.mindspring.com

Pages: 1