473,322 Members | 1,188 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,322 software developers and data experts.

layoutgala and not happy (crosspost from CSS)

Hi,

I'm trying to make a two column site - or to be precise - a part of a
corporate intranet site.
I want to make this part in css, so that in the future, my part can be
reused and function properly. So no hacks or anything thats not quite
kosher.
What do I want: I want two columns, where the left one should have a
fixed width, and variable height, while the right one should have
relative width (down to a minimum size hopefully) width a variable
height.
Something like this:
http://blog.html.it/layoutgala/LayoutGala24.html
As you may see, this works quite well in Firefox and opera, but not so
good in IE (just resize the window). And I want to make IE renders this

page like Firefox.. the company policy is to suport IE, and not the
rest, but I want to make it crossbrowser compatible.
Any ideas? I have the sameproblem, but width a different stylesheet,
its mainly the wrapping of the float thats a problem.

Apr 5 '06 #1
7 1859
In article <11**********************@u72g2000cwu.googlegroups .com>,
Trashcan <la*****@gmail.com> wrote:
What do I want: I want two columns, where the left one should have a
fixed width, and variable height, while the right one should have
relative width (down to a minimum size hopefully) width a variable
height.
See here for a bare-bones example that also works in Netscape 4:

http://realworldstyle.com/2col.html

Be sure to notice that the right column has the following thingy
inside the end of the div block:

<div class="spacer">&nbsp;</div>

.... where "spacer" contains a clear:both. This forces both columns
to be the same height and forces the footer to start where the
columns end.

The only change I'd make to this example would be to express the
width of the left column, and the left margin of the right column,
in ems rather than pixels.
As you may see, this works quite well in Firefox and opera, but not so
good in IE (just resize the window).


The example above works fine in all the browsers I tested (Opera,
Firefox, IE).

-A
Apr 5 '06 #2
axlq wrote:

See here for a bare-bones example that also works in Netscape 4:


Does anybody really care if something works in Netscape 4 any more? I
think the 3 people in the world who might still be using it are probably
already accustomed to browsing with CSS disabled, dontcha think?

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.
Apr 6 '06 #3
In article <49************@individual.net>, kchayka <us****@c-net.us> wrote:
axlq wrote:

See here for a bare-bones example that also works in Netscape 4:
Does anybody really care if something works in Netscape 4 any more?


Yes.
I think the 3 people in the world who might still be using it are
probably already accustomed to browsing with CSS disabled, dontcha
think?


Ah, but it's nice to know that a simple attribute
"margin-left: -1px;" will allow NS4 to work well with a 2-column CSS
layout without breaking other browsers. It's an easy fix, adds only
20 bytes to a CSS definition, so why not add it in case some other
browser crops up with the same bug?

-A
Apr 6 '06 #4
ok axlq, I tried the link you gave me, and it works fine in FF and
Opera, but not IE ver 6, it still wraps the text down when you downsize
the window towards the left column. The only solution I've seen for IE
is through a hack like this -
(http://bluerobot.com/web/layouts/layout1.html) - but I do not want to
use hacks.

The only solution I can think of is to use the min-width property and
hope that next IE will support that. I want something like this
(http://portal.opera.com/startup/ - viewed in Opera, it even scales
down the picture!) I don't need the picture scaling, but I want
something like the first link without any hacks.

any ideas - i've searched high and low - doesn't seem like its
possible....?

Apr 7 '06 #5
In article <11**********************@i40g2000cwc.googlegroups .com>,
Trashcan <la*****@gmail.com> wrote:
ok axlq, I tried the link you gave me, and it works fine in FF and
Opera, but not IE ver 6, it still wraps the text down when you downsize
the window towards the left column.
Perhaps I don't understand what you're seeing. You initially wrote:

I want two columns, where the left one should have a fixed
width, and variable height, while the right one should have
relative width (down to a minimum size hopefully) width a
variable height.

The link you gave, http://blog.html.it/layoutgala/LayoutGala24.html
works identically for me in Opera, Firefox, and IE6. What behavior in
IE6 are you seeing that's different?

I provided a similar link, http://realworldstyle.com/2col.html which
also behaves identically for me in Opera, Firefox, and IE6, as well
as Netscape 4.
The only solution I've seen for IE is through a hack like this -
(http://bluerobot.com/web/layouts/layout1.html) - but I do not want
to use hacks.
I don't blame you, and I'd want to avoid position:absolute if possible
too.

Please state what, exactly, you are trying to achieve. I cannot see
any difference in behavior between Opera, IE6, and Firefox for the
example pages both you and I presented. Perhaps if you provide a
link to a screenshot showing what you're seeing wrong, would help.
The only solution I can think of is to use the min-width property and
hope that next IE will support that. I want something like this
(http://portal.opera.com/startup/ - viewed in Opera, it even scales
down the picture!) I don't need the picture scaling, but I want
something like the first link without any hacks.


Now THAT page doesn't work in IE6. It's fixed width and un-scalable
in IE6, but not Opera or Firefox. That wouldn't be what I want for
a web page. The picture scaling is interesting though. It even
works in Firefox.

-A
Apr 7 '06 #6
Trashcan wrote:
The only solution I've seen for IE
is through a hack like this -
(http://bluerobot.com/web/layouts/layout1.html) - but I do not want to
use hacks.
Without looking at that example in too much detail, I will guess that
the main reason they use so many hacks is because of all those px-sized
elements. That layout has absolutely no need for pixel precision.

Drop all the hacks, change all font sizes to % units, and change widths
and such to either % (of window) or em (that adjust with text size). I
bet the layout will work just fine, in just about any browser you use.

BTW, I did notice a "be nice to Opera 5" hack in the CSS. Opera 5 is
ancient history now. I wouldn't bother with anything that old.
The only solution I can think of is to use the min-width property and
hope that next IE will support that.


The latest IE7 beta does seem to support min/max-width. About time! ;)

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.
Apr 7 '06 #7
ok, sorry for the late reply, but in my defense, I blame easter..:)

Two screenshots from IE:
http://www.axehigh.com/pictures/406forum1.gif
http://www.axehigh.com/pictures/407forum2.gif

As you can see, when you minimize the width of ie, somehing funky
happens. What I want is for the effect you are wathcing not to happen.
Most pages I've seen that uses percentages or relative positioning in
some form have this problem. Even google groups has it, just drag it
down to a small width, and watch all those ads on the right hand side
cramp up the style.

kchayka - I'll try to do what you said with that "be nice to opera5"
version, and convert it to the proper syntax, ie kill all hacks and
switch to em and %. I'll see where that brings me.

Thanks!

Apr 18 '06 #8

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

11
by: anon | last post by:
Dear Microsoft: In your new ASP.NET 2.0 page model of being able to crosspost to another page, it would seem that if you were to type that word in Google, "crosspost" or "cross post", you will...
1
by: Viken Karaguesian | last post by:
Hello to all, Just wanted to wish everyone on these groups a happy and prosperous New Year. You have all been a helping hand for me whenever I've had questions, even those who occasionally...
9
by: DL | last post by:
Hi, I'm not entirely sure if it's an HTML question or CSS one (so I've also posted it to the HTML ng as well). Case here: <table> <tr><td bgcolor="black">bla bla</td<td>something...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.