Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss

How do I rezise a <DIV>?

0 views
Skip to first unread message

Jocke

unread,
Nov 4, 2002, 5:52:59 AM11/4/02
to
Hi

Take a look at this picture and you'll understand my question easily:
http://www.myonlinephotoalbum.net/homepage.jpg

I got three <div>-elements by the side of each other. Two of them have a
fixed-with, but the last one shall rezise so the total browser-width is
used. How can I make a <div> rezise like that?


/Joakim


Cybarber

unread,
Nov 4, 2002, 7:40:56 AM11/4/02
to
width:"100%"
width:expression(document.body.clientWidth);
 
Cybarber

Jocke

unread,
Nov 4, 2002, 9:06:47 AM11/4/02
to
I did not even know about expression(document.body.clientWidth)
 
There is not a single word written in my CSS 2.0-book about that!
 
Is that CSS or DHTML?
 
Can you post me a link to a page where i can learn more about similar CSS-properties? (I guess there are many properties like this, perhaps there is a way to use the same color as the default OS-colors or something?)
 

Jocke

Jocke

unread,
Nov 4, 2002, 9:42:27 AM11/4/02
to
Now I've tried to use this, and in IE 6.0 it works exactly like I want it to!
 
But it doesn't work at all in Netscape 7.0. How come?
(I've got the styles in a separate file, mystyles.css)
 
 
 
What more browsers than IE 6.0 supports this? IE 5.0?
 
Please read my other answer to Cyberarber as well!
 
/Joakim
 
 
 
 
"Cybarber" <luc...@emergo.nl> skrev i meddelandet news:OsMYa9$gCHA.1324@tkmsftngp11...

Cybarber

unread,
Nov 11, 2002, 6:49:08 PM11/11/02
to
it is a Javascript Expresion using the DHTML Object model properties
it is equivalent to setting the property dynamically in a script section.
 
obj.setExpression(property, value);
 
(it is IE specific)
 
Cybarber

Cybarber

unread,
Nov 11, 2002, 6:51:08 PM11/11/02
to

fabrizio giustina

unread,
Nov 15, 2002, 8:46:44 AM11/15/02
to
better don't use expression, it's a IE only feature, it's not CSS.
There are many other ways to do this using plain CSS.

This is my favorite solution:


body {
margin-right: 100px;
margin-left: 100px;
padding:0px;
}

#centerlayer{
background-color:#00FF00;
width: 100%
}

#leftlayer{
background-color:#FF0000;
position:absolute;
width: 100px;
top: 0px;
left: 0px;
}

#rightlayer{
background-color:#0000FF;
position:absolute;
width: 100px;
top: 0px;
right: 0px;
}


this way the left and right column are positioned outside of the body area, and
the center column can expand to 100% of the body without necessity for any
expression

fabrizio


"Cybarber" <luc...@emergo.nl> wrote in message
news:eg62E0diCHA.2580@tkmsftngp12...
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/css/reference
/attributes.asp

http://msdn.microsoft.com/workshop/author/dhtml/reference/dhtml_reference_entry.

Paul A. Scott

unread,
Nov 15, 2002, 10:56:26 PM11/15/02
to
On 11/15/02 5:46 AM, in article e#5T80KjCHA.1652@tkmsftngp09, "fabrizio
giustina" <fgi...@sapient.com> wrote:

> better don't use expression, it's a IE only feature, it's not CSS.
> There are many other ways to do this using plain CSS.
>
> This is my favorite solution:

> [ yadda yadda yadda ]
>
> fabrizio

Sorry, I tried your "solution" on three different browsers, and different
versions of each. The results were different for each one. Sure the <div> is
centered, but there are so many other side-effects that it makes CSS look
like a joke. That's not what CSS is supposed to be.

Paul

fabrizio giustina

unread,
Nov 16, 2002, 12:28:54 PM11/16/02
to

which browser did you test with? I hope you're not trying to make it work for
netscape 4, that's absolutely not possible.

But for other, more standard complaint browsers, this can work. Ok, you'll
probably need to fix different problem, I gave you the idea for how this can be
done, not a complete layout...

try looking here, you will find something fully working (and if this can't work
for you, tell us which browser and what it does wrong, please)


http://bluerobot.com/web/layouts/layout3.html
http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html


regards
fabrizio


"Paul A. Scott" <psc...@skycoast.us> wrote in message
news:B9FB01EA.11B1A%psc...@skycoast.us...

Paul A. Scott

unread,
Nov 16, 2002, 7:00:19 PM11/16/02
to

> which browser did you test with? I hope you're not trying to make it work for
> netscape 4, that's absolutely not possible.

Well, for starters, just look at the difference between IE-Mac 5.2.2 (which
keeps everything on one line but doesn't get all the colors), and IE-Win 6.0
(which gets the colors right, but flows the middle div onto a separate line.

Paul

fabrizio giustina

unread,
Nov 17, 2002, 2:32:59 PM11/17/02
to
> Well, for starters, just look at the difference between IE-Mac 5.2.2 (which
> keeps everything on one line but doesn't get all the colors),

really? never heard of this bug, strange... but are you sure you tried with a
correct html? A good css always need a standard complaint html with a good
doctype to work ;-)

This bug sound interesting, can you try opening the html I'm posting here and
post a screenshot of your renderering?

> and IE-Win 6.0
> (which gets the colors right, but flows the middle div onto a separate line.
>

of course, if you don't remove top-margin from body... that's correct. Try with
the complete xhtml here:


--// cut here //--
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=ISO-8859-1" />
<title>3 layers</title>

<style type="text/css">


body {
margin: 0 100px 0 100px;
padding:0 0 0 0;
}

#centerlayer{
background-color: #00FF00;
width: 100%
}

#leftlayer{
background-color: #FF0000;
position:absolute;
width: 100px;
top: 0px;
left: 0px;
}

#rightlayer{
background-color: #0000FF;
position:absolute;
width: 100px;
top: 0px;
right: 0px;
}

</style>
</head>

<body>

<div id="centerlayer">center</div>
<div id="leftlayer">left</div>
<div id="rightlayer">right</div>


</body>
</html>

--// cut here //--


fabrizio


Paul A. Scott

unread,
Nov 17, 2002, 5:17:14 PM11/17/02
to fabrizio giustina
> really? never heard of this bug, strange... but are you sure you tried with a
> correct html? A good css always need a standard complaint html with a good
> doctype to work ;-)

I used exactly your posted CSS, and XHTML strict DOCTYPE calling the
multiple <DIV> in a logical manner.


>
> This bug sound interesting, can you try opening the html I'm posting here and
> post a screenshot of your renderering?

See: http://skycoast.us/fabrizio/

Look at fabrizio1.html--as you can see, there is a difference between IE Mac
5.2.2 and IE Win 6.0.

>> and IE-Win 6.0
>> (which gets the colors right, but flows the middle div onto a separate line.

> of course, if you don't remove top-margin from body... that's correct. Try

> with the complete xhtml here: <snip>

Makes sense. Furthermore, the reason for the colors missing on IE Mac 5.2.2
is now quite clear. The absence of text in the left and right <DIV> causes
IE Mac to drop the background color altogether, which is not correct
behavior.

So, I believe that IE Win 6.0 is, in fact, doing the right thing, while IE
Mac 5.2.2 is not.

Paul

fabrizio giustina

unread,
Nov 18, 2002, 4:30:10 AM11/18/02
to

> Makes sense. Furthermore, the reason for the colors missing on IE Mac 5.2.2
> is now quite clear. The absence of text in the left and right <DIV> causes
> IE Mac to drop the background color altogether, which is not correct
> behavior.

IE Mac is probabably displaying the right colors, but the height for divs is set
to 0px if empty.

> So, I believe that IE Win 6.0 is, in fact, doing the right thing, while IE
> Mac 5.2.2 is not.

Mh... not so sure... there is a difference in handling white space/empty
elements.
This time I think IE6 is wrong (this is a known bug): for empty elements IE6
always set the height to "line-height", as if there is text in it.

And playing with it I found a strange behaviour: if you set "line-height:1px;"
in the body empty elements are not affected. Trying to set both "height:1px;"
and "line-height:1px;" doesn't work if the layer is empty. As soon as you put a
character in the div the height is displayed correctly.

Definitively a IE6 bug. IE5 mac is doing right


> Paul

fabrizio

PS. thanks for testing! A screenshot is better than lots of words


Paul A. Scott

unread,
Nov 19, 2002, 9:47:50 AM11/19/02
to fabrizio giustina

>> So, I believe that IE Win 6.0 is, in fact, doing the right thing, while IE
>> Mac 5.2.2 is not.
>
> Mh... not so sure... there is a difference in handling white space/empty
> elements. This time I think IE6 is wrong (this is a known bug)
> <snip>
> Definitively a IE6 bug. IE5 mac is doing right
> fabrizio

Well, IE5 Mac does something bizarre. Take another look at the screenshots
http://skycoast.us/fabrizio/
and pay special attention to the scroll bars. Very annoying.

Paul

fabrizio giustina

unread,
Nov 22, 2002, 8:38:29 AM11/22/02
to
> Well, IE5 Mac does something bizarre. Take another look at the screenshots
> http://skycoast.us/fabrizio/
> and pay special attention to the scroll bars. Very annoying.
>
> Paul

unfortunately I don't have a mac so I can't test :-/

I rememeber hearing something like this... try setting the right position of the
right column to 1px instead of 0, some browsers display the scroll bar if you
position something to the extreme right of the window...

if this doesn't work it means that IE mac always leave space for the vertical
scroll bar, so the correct css for it should be "right:20px"... CSS
specifications don't say if browsers should render the scroll bar area and what
they have do to when a scrollbar appear...

fabrizio


0 new messages