Two DIV with 50% width each = problem?

#1

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.

#2

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

Quote:

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

#3

Once upon a time *Terry* wrote:

Quote:

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/

#4

Terry wrote:

Quote:

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

#5

brucie wrote:

Quote:

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

#6

"Terry" <a165287 (AT) yahoo (DOT) com> wrote

Quote:

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

#7

On Sat, 30 Oct 2004 11:56:44 +0100, "PDannyD"
<dan1970 (AT) REMOVETHISBITscenicplace (DOT) freeserve.co.uk> wrote:

Quote:

"Terry" <a165287 (AT) yahoo (DOT) com> wrote in message
news:7a3cf1b5.0410291857.3c207467 (AT) posting (DOT) 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

#8

"Jan Roland Eriksson" <jrexon (AT) newsguy (DOT) com> wrote

Quote:

On Sat, 30 Oct 2004 11:56:44 +0100, "PDannyD"
dan1970 (AT) REMOVETHISBITscenicplac...reeserve.co.uk> wrote:

"Terry" <a165287 (AT) yahoo (DOT) com> wrote in message
news:7a3cf1b5.0410291857.3c207467 (AT) posting (DOT) 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.

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

#9

"PDannyD" <dan1970 (AT) REMOVETHISBITscenicplace (DOT) freeserve.co.uk> wrote in
message news:cm0h6a$fnt$1 (AT) newsg4 (DOT) svr.pol.co.uk...

Quote:

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.

#10

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

Quote:

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.