Two DIV with 50% width each = problem?

[Terry]

I'm trying to have two divs side-by-side, each taking up 50% of the
body. Sounds simple enough, right?
http://novodom.net/div.html

The code validates as XHTML 1.1 Strict.
Looks fine in Firefox, but in IE 6.x, the second DIV is below the
first one! Using 49% for each resolves the problem but I wouldn't call
that a 'solution'.

Is there something wrong with my CSS? Can anyone suggest something?
Thanks.

[brucie]

In comp.infosystems.www.authoring.stylesheets Terry said:

I'm trying to have two divs side-by-side, each taking up 50% of the
body. Sounds simple enough, right?
http://novodom.net/div.html
Looks fine in Firefox, but in IE 6.x, the second DIV is below the
first one!
IE cant do maths. you'll come across it every now and then with
different things.
Using 49% for each resolves the problem but I wouldn't call
that a 'solution'.

if your design cant tolerate a 2% variance you're in deep shit

--

v o i c e s o f t h e l i t t l e

[Terry]

My design can definitely tolerate it, don't worry.
But I'd like to have some feedback from the 'tables-for-layout-must-die'
crowd ... how do you suggest getting around that kind of problem? This
is exactly why I've stuck with tables until now: some things that take
me 2 minutes to do with tables take me hours of fidgeting to achieve
with css... arrrgh.
Original :: brucie :: 2004-10-30 02:02

In comp.infosystems.www.authoring.stylesheets Terry said:

I'm trying to have two divs side-by-side, each taking up 50% of the
body. Sounds simple enough, right?
http://novodom.net/div.html
Looks fine in Firefox, but in IE 6.x, the second DIV is below the
first one!

IE cant do maths. you'll come across it every now and then with
different things.

Using 49% for each resolves the problem but I wouldn't call
that a 'solution'.

if your design cant tolerate a 2% variance you're in deep shit

[brucie]

In comp.infosystems.www.authoring.stylesheets Terry said:

My design can definitely tolerate it, don't worry.
good but please don't toppost, it upsets the little voices.

How do I quote correctly in Usenet? - Quoting and Answering
http://www.netmeister.org/news/learn2quote2.html

The advantages of Usenet's quoting conventions
http://homepage.ntlworld.com/g.mccau...ks/uquote.html

Why is Bottom-posting better than Top-posting
http://www.caliburn.nl/topposting.html

Rules for posting to Usenet
http://www.faqs.org/faqs/usenet/posting-rules/part1/

Bottom vs. top posting and quotation style on Usenet
http://www.cs.tut.fi/~jkorpela/usenet/brox.html

What do you mean "my reply is upside-down" ?
http://www.i-hate-computers.demon.co.uk/quote.html
But I'd like to have some feedback from the 'tables-for-layout-must-die'
crowd ... how do you suggest getting around that kind of problem?

what problem? its not worth worrying about. how many people are going to
come across your page and run away in horror because they notice the
halves are 49 and not 50%?

you'll probably have margins/padding on the halves so just reduce them
to compensate or present 49 to IE and 50 to other browsers.

stop trying to be a control freak.

--

v o i c e s o f t h e l i t t l e

[brucie]

In comp.infosystems.www.authoring.stylesheets brucie said:

you'll probably have margins/padding on the halves so just reduce them
to compensate or present 49 to IE and 50 to other browsers.
or use 49.9%. if you have issues with 0.2% you need several fatal
beatings.
stop trying to be a control freak.

yeah, what brucie said
--

v o i c e s o f t h e l i t t l e

[Invalid User]

Once upon a time *Terry* wrote:

My design can definitely tolerate it, don't worry.
But I'd like to have some feedback from the 'tables-for-layout-must-die'
crowd ... how do you suggest getting around that kind of problem? This
is exactly why I've stuck with tables until now: some things that take
me 2 minutes to do with tables take me hours of fidgeting to achieve
with css... arrrgh.
Original :: brucie :: 2004-10-30 02:02

In comp.infosystems.www.authoring.stylesheets Terry said:

I'm trying to have two divs side-by-side, each taking up 50% of the
body. Sounds simple enough, right?
http://novodom.net/div.html
Looks fine in Firefox, but in IE 6.x, the second DIV is below the
first one!

IE cant do maths. you'll come across it every now and then with
different things.

Using 49% for each resolves the problem but I wouldn't call
that a 'solution'.

if your design cant tolerate a 2% variance you're in deep shit

Set the width to 50% only for the floating div. Then the other div takes
up what's left of the screen, should be close enough to 50% even in IE

--
/Arne
http://w1.978.telia.com/~u97802964/

[Gus Richter]

Terry wrote:

I'm trying to have two divs side-by-side, each taking up 50% of the
body. Sounds simple enough, right?
http://novodom.net/div.html

The code validates as XHTML 1.1 Strict.
Looks fine in Firefox, but in IE 6.x, the second DIV is below the
first one! Using 49% for each resolves the problem but I wouldn't call
that a 'solution'.

Is there something wrong with my CSS? Can anyone suggest something?
Thanks.

An alternative is use the Tantek Box Model Hack (or some other) to
compensate specifically for IE's deficiency
http://tantek.com/CSS/Examples/boxmodelhack.html
whereby you give one value for IE and another for others.

--
Gus

[brucie]

In comp.infosystems.www.authoring.stylesheets Gus Richter said:

An alternative is use the Tantek Box Model Hack (or some other) to
compensate specifically for IE's deficiency
http://tantek.com/CSS/Examples/boxmodelhack.html
whereby you give one value for IE and another for others.

much easier:

blah{width:X;} /* for IE */
blah,[nul]{width:Y;} /* for everyone else */
--

v o i c e s o f t h e l i t t l e

[Gus Richter]

brucie wrote:

In comp.infosystems.www.authoring.stylesheets Gus Richter said:

An alternative is use the Tantek Box Model Hack (or some other) to
compensate specifically for IE's deficiency
http://tantek.com/CSS/Examples/boxmodelhack.html
whereby you give one value for IE and another for others.

much easier:

blah{width:X;} /* for IE */
blah,[nul]{width:Y;} /* for everyone else */

Now that wasn't so hard was it? Quicker than the aforegoing verbal diarrhea.

--
Gus

[PDannyD]

"Terry" <a1*****@yahoo.com> wrote in message
news:7a**************************@posting.google.c om

I'm trying to have two divs side-by-side, each taking up 50% of the
body. Sounds simple enough, right?
http://novodom.net/div.html

Float the left <div> to the left, float the right <div> to the right.
Does that work for your real page? It does for my copy of your test page.

I used the code snippet below to give an interesting overlap effect on my
local version of your test page. Just uploaded it to the validator page and
it seems ok.
The 'lorem ipsum...' text has been removed to keep the line length short.

<div style="position:relative; width:100%">
<div style="width:75%; position:absolute; top:0: left:0">your text
here</div>
<div style="width:75%; position:absolute; top:0: right:0">your text
here</div>
</div>

I'm still wet behind the ears when it comes to website design so are there
any reasons not to use the above?

--
FZS600 - Silver/Black
GS125 - Black/Rust
Ford 100E Prefect - Black, naturally
Whisky - Aberlour Cask Strength

[Jan Roland Eriksson]

On Sat, 30 Oct 2004 11:56:44 +0100, "PDannyD"
<da*****@REMOVETHISBITscenicplace.freeserve.co.u k> wrote:

"Terry" <a1*****@yahoo.com> wrote in message
news:7a**************************@posting.google. com

I'm trying to have two divs side-by-side, each taking up 50% of the
body. Sounds simple enough, right?
http://novodom.net/div.html

Float the left <div> to the left, float the right <div> to the right.
Does that work for your real page? It does for my copy of your test page.

No, that's not consistent. It works for some settings of the Win-IE
window width but not for others.

Try to adjust the width of your IE browsing window to find out.

--
Rex

[PDannyD]

"Jan Roland Eriksson" <jr****@newsguy.com> wrote in message
news:t1********************************@4ax.com

On Sat, 30 Oct 2004 11:56:44 +0100, "PDannyD"
<da*****@REMOVETHISBITscenicplace.freeserve.co.u k> wrote:

"Terry" <a1*****@yahoo.com> wrote in message
news:7a**************************@posting.google.c om

I'm trying to have two divs side-by-side, each taking up 50% of the
body. Sounds simple enough, right?
http://novodom.net/div.html

Float the left <div> to the left, float the right <div> to the right.
Does that work for your real page? It does for my copy of your test
page.

No, that's not consistent. It works for some settings of the Win-IE
window width but not for others.

Try to adjust the width of your IE browsing window to find out.

Weird! When I resized it previously I must have by chance landed on an even
number of pixels a few times.

I tried it again with the body width set to 800px and it looked fine. I then
set the body width to 801px and the right-hand <div> was below the left-hand
<div>.

So IE6 can't correctly work out 50% of 801px. There's a rounding error
somewhere in IE6. It also shows if you use the other example where
absolutely positioned elements are enclosed within a relatively positioned
element.
The right-hand text doesn't move smoothly left as the window size is
decreased, it joggles left and right.

--
FZS600 - Silver/Black
GS125 - Black/Rust
Ford 100E Prefect - Black, naturally
Whisky - Aberlour Cask Strength

[Brian]

brucie wrote:

blah{width:X;} /* for IE */
blah,[nul]{width:Y;} /* for everyone else */

That's the first I've heard of that technique. Perhaps it should be
submitted to "How to hide CSS from buggy browsers"...

http://w3development.de/css/hide_css_from_browsers/

--
Brian (remove "invalid" to email me)

[C A Upsdell]

"PDannyD" <da*****@REMOVETHISBITscenicplace.freeserve.co.u k> wrote in
message news:cm**********@newsg4.svr.pol.co.uk...

No, that's not consistent. It works for some settings of the Win-IE
window width but not for others.

Try to adjust the width of your IE browsing window to find out.

Weird! When I resized it previously I must have by chance landed on an
even
number of pixels a few times.

I tried it again with the body width set to 800px and it looked fine. I
then
set the body width to 801px and the right-hand <div> was below the
left-hand
<div>.

So IE6 can't correctly work out 50% of 801px. There's a rounding error
somewhere in IE6. It also shows if you use the other example where
absolutely positioned elements are enclosed within a relatively positioned
element.

Instead of 50%, use 45% or 46%. I had a similar problem, and found that
reducing the width fixed the IE problems.

[Terry]

Original :: brucie :: 2004-10-30 02:41

In comp.infosystems.www.authoring.stylesheets Terry said:

But I'd like to have some feedback from the 'tables-for-layout-must-die'
crowd ... how do you suggest getting around that kind of problem?

what problem? its not worth worrying about. how many people are going to
come across your page and run away in horror because they notice the
halves are 49 and not 50%?

you'll probably have margins/padding on the halves so just reduce them
to compensate or present 49 to IE and 50 to other browsers.

stop trying to be a control freak.

Thanks for the psychological advice brucie.
Thanks to all those who also responded with technical advice.
Thje final solution I retained was to make the floated div 50% and leave
the other one's width unspecified. Seems to work for now. I, for one,
cannot WAIT until non-compliant browsers are out of the picture... seems
far fetched but so was the global domination of Google when it came out.

Take care.

[brucie]

In comp.infosystems.www.authoring.stylesheets Brian said:

blah{width:X;} /* for IE */
blah,[nul]{width:Y;} /* for everyone else */

That's the first I've heard of that technique. Perhaps it should be
submitted to "How to hide CSS from buggy browsers"...
http://w3development.de/css/hide_css_from_browsers/

its already there
http://w3development.de/css/hide_css...ers/attribute/
--

v o i c e s o f t h e l i t t l e

[Alan J. Flavell]

On Sat, 30 Oct 2004, Terry wrote:

Original :: brucie :: 2004-10-30 02:41

stop trying to be a control freak.

Thanks for the psychological advice brucie.
Thanks to all those who also responded with technical advice.
Thje final solution I retained was to make the floated div 50% and leave the
other one's width unspecified.

Despite your apparent resistance, you seem to have headed in the
direction that brucie recommended. Well done. There's hope for you
in web design yet :-}

[kchayka]

brucie wrote:

In comp.infosystems.www.authoring.stylesheets Gus Richter said:

blah{width:X;} /* for IE */
blah,[nul]{width:Y;} /* for everyone else */

Or start with standard stuff and use overrides just for IE:

blah{width:x} /* for sane browsers */
* html blah{width:x} /* IE only */

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

[Brian]

brucie wrote:

Brian said:

blah{width:X;} /* for IE */
blah,[nul]{width:Y;} /* for everyone else */

That's the first I've heard of that technique. Perhaps it should
be submitted to "How to hide CSS from buggy browsers"...

its already there
http://w3development.de/css/hide_css...ers/attribute/

But you have 2 selectors there: blah,[nul] and not blah[nul]. Have I
misunderstood something?

--
Brian (remove "invalid" to email me)

[brucie]

In comp.infosystems.www.authoring.stylesheets Brian said:

blah{width:X;} /* for IE */
blah,[nul]{width:Y;} /* for everyone else */ That's the first I've heard of that technique. Perhaps it should
be submitted to "How to hide CSS from buggy browsers"...

its already there
http://w3development.de/css/hide_css...ers/attribute/

But you have 2 selectors there: blah,[nul] and not blah[nul]. Have I
misunderstood something?

all browsers apply blah{width:} but on the very next line the width is
changed to something else.

browsers that support attribute selectors apply the new width. IE
wrongly thinks the attribute selector is invalid so ignores the entire
declaration which the specs say it should so it does get that bit right.

IE gets the first width specified. browsers that support or know
attribute selectors are not invalid even if they don't support them get
the second width.

--
t h e o f l i t t l e v o i c e s

[Johannes Koch]

Terry wrote:

The code validates as XHTML 1.1 Strict.
There's no Strict in XHTML 1.1.
Looks fine in Firefox, but in IE 6.x,

Win IE doesn't know XHTML 1.1 (MIME type: application/xhtml+xml).
--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)