floating div with width:auto looks "wrong" in gecko browsers

day

I know I've seen this issue described before, but I can't find it, or
the solution now that I need it.

I have some css-specified floating divs that contain images or text.
The text divs have a background color and text color that differ from
the rest of the page, and I'd like them to be positioned from the
right edge of the rightmost image div, to the right edge of the
browser window. In other words, if the browser window is 800 pixels
wide, and there is image content occupying the leftmost 650 pixels of
the screen, I want my text div to occupy the rightmost 150 pixels; if
the images are 500 pixels wide, the text div will be 300 pixels wide,
and so on.

(The above is a bit of an oversimplification overlooking margins,
padding, div borders, etc., but it's the "big picture" I'm after).

By setting text div width: auto in my css, I get what I want in IE:
the text div is as wide or narrow as needed to go from some point in
the middle of the browser window to the right edge.

Not so though with gecko browsers. In current versions of both
Firefox and Netscape, the text div is forced down below the image
divs, so it starts at the left edge of the browser window and is 100%
of the browser window width.

So...

WHAT I WANT: Text div occupies 100% of the REMAINING width of the
browser window, filling in the part not occupied by other divs that
occupy anywhere from the leftmost 100 pixels to the leftmost 750
pixels of the browser window.

WHAT I'M GETTING: Gecko browsers force the text div to start on the
left edge of the browser window so it occupies 100% of the TOTAL (vs.
remaining/available) browser window width.

I realize that the Gecko browsers are adhering to the standard and IE
is not. But whatever the reason, I want to know how to get stuff to
render as I'd like it to, as described above.

Jul 21 '05 #1

Follow Post Reply

5453

Spartanicus

day <Da*@theraces.invaliddomain> wrote:

[snip]

(The above is a bit of an oversimplification overlooking margins,
padding, div borders, etc., but it's the "big picture" I'm after).

As per usual an uploaded example is worth a thousand words, your
description contains contradictions and lacks essential information.

Is this what you are after?:
http://homepage.ntlworld.com/spartanicus/day.htm

or do you want a "column" layout?

--
Spartanicus

Jul 21 '05 #2

day

On Mon, 23 May 2005 07:47:43 GMT, Spartanicus
<in*****@invalid.invalid> wrote:

day <Da*@theraces.invaliddomain> wrote:

[snip]
(The above is a bit of an oversimplification overlooking margins,
padding, div borders, etc., but it's the "big picture" I'm after).

As per usual an uploaded example is worth a thousand words, your
description contains contradictions and lacks essential information.

Is this what you are after?:
http://homepage.ntlworld.com/spartanicus/day.htm

or do you want a "column" layout?

Thanks, good point. The following html is a stripped-down segment
from something I'm doing, that illustrates the issue perfectly.

<html>
<head>
<style type="text/css">

</style>
</head>
<body>
<div class="imgdiv">
<img src="foo.jpg" height="283" width="360" />
</div>
<div class="textdiv">
<p>I would like this area to line up with the top of this div even
with the top of the foo.jpg image, and extending from just to the
right of the foo.jpg image, all the way to the right edge of the
browser. It shows up as I want in IE 6.0, but in Netscape 7.x or FF
1.x it shows up UNDER the image, extending across the width of the
browser window.</p>
</div>
</body>
</html>

Jul 21 '05 #3

Els

day wrote:

On Mon, 23 May 2005 07:47:43 GMT, Spartanicus
<in*****@invalid.invalid> wrote:
day <Da*@theraces.invaliddomain> wrote:

[snip]
(The above is a bit of an oversimplification overlooking margins,
padding, div borders, etc., but it's the "big picture" I'm after).

As per usual an uploaded example is worth a thousand words, your
description contains contradictions and lacks essential information.

Is this what you are after?:
http://homepage.ntlworld.com/spartanicus/day.htm

or do you want a "column" layout?

Thanks, good point. The following html is a stripped-down segment
from something I'm doing, that illustrates the issue perfectly.

<html>
<head>
<style type="text/css">

</style>
</head>
<body>
<div class="imgdiv">
<img src="foo.jpg" height="283" width="360" />
</div>
<div class="textdiv">
<p>I would like this area to line up with the top of this div even
with the top of the foo.jpg image, and extending from just to the
right of the foo.jpg image, all the way to the right edge of the
browser. It shows up as I want in IE 6.0, but in Netscape 7.x or FF
1.x it shows up UNDER the image, extending across the width of the
browser window.</p>
</div>
</body>
</html>

Don't float the .textdiv, only give it a left margin of 368px.
Or, if you want the text to continue below the pic if the text might
be long enough, do nothing. No margin, no float. (except for the float
on the image of course)

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Jul 21 '05 #4

day

On Mon, 23 May 2005 15:24:43 +0200, Els <el*********@tiscali.nl>
wrote:

Don't float the .textdiv, only give it a left margin of 368px.
Or, if you want the text to continue below the pic if the text might
be long enough, do nothing. No margin, no float. (except for the float
on the image of course)

I see what you mean, but I want the .textdiv to be as wide or as
narrow as the browser window and the occupied space to its left allow
(because I'd like to use that class for divs that appear to the right
of other content as well, that may be wider or narrower).

Jul 21 '05 #5

Spartanicus

day <Da*@theraces.invaliddomain> wrote:

As per usual an uploaded example is worth a thousand words, your
description contains contradictions and lacks essential information.

Is this what you are after?:
http://homepage.ntlworld.com/spartanicus/day.htm

or do you want a "column" layout?
Thanks, good point.

You haven't answered the question I put to you.
The following html is a stripped-down segment
from something I'm doing, that illustrates the issue perfectly.

No it doesn't. If you want a certain layout then create a line drawing
or something like that. Don't assume that people have access to IE, if
you want help don't expect people to open up their editor, copy and
paste your code, save it and then display it in a browser, *upload* it
and post the url.

--
Spartanicus

Jul 21 '05 #6

Els

day wrote:

On Mon, 23 May 2005 15:24:43 +0200, Els <el*********@tiscali.nl>
wrote:
Don't float the .textdiv, only give it a left margin of 368px. Or,
if you want the text to continue below the pic if the text might
be long enough, do nothing. No margin, no float. (except for the
float on the image of course)

I see what you mean, but I want the .textdiv to be as wide or as
narrow as the browser window and the occupied space to its left
allow (because I'd like to use that class for divs that appear to
the right of other content as well, that may be wider or narrower).

So you are floating the text div because you don't know how wide the
img div may become, right? I don't think you can do that, unless you
find a way to dynamically determine the width of the imgdiv, and use
that as the left-margin of the textdiv.
Floats can't "take up the rest of the space". (or at least not in all
browsers)

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Jul 21 '05 #7

day

On Mon, 23 May 2005 14:37:17 GMT, Spartanicus
<in*****@invalid.invalid> wrote:

day <Da*@theraces.invaliddomain> wrote:
As per usual an uploaded example is worth a thousand words, your
description contains contradictions and lacks essential information.

Is this what you are after?:
http://homepage.ntlworld.com/spartanicus/day.htm

or do you want a "column" layout?

Thanks, good point.

You haven't answered the question I put to you.
The following html is a stripped-down segment
from something I'm doing, that illustrates the issue perfectly.

No it doesn't. If you want a certain layout then create a line drawing
or something like that. Don't assume that people have access to IE, if
you want help don't expect people to open up their editor, copy and
paste your code, save it and then display it in a browser, *upload* it
and post the url.

I don't want a column layout. I want a variable-width div that will
occupy whatever "remaining" space there is on the right side of a
browser window. The html snippet above illustrates what I'm doing,
although, yes, it would be nice to see it in IE to see what I'm trying
to do. Let me attempt a line drawing:

---------------------- ----------------------------------------------
| some content | | text div fills out remainder of screen|
---------------------- ----------------------------------------------

-------- ------------------------------------------------------------
| slim | | so the text div (same class) is wider = = = = = |
-------- ------------------------------------------------------------

---------------------------- ----------------------------------------
| content wider now | | so the text div narrows = = = |
---------------------------- ----------------------------------------

Upthread, Els says that floats can't "take up the rest of the space"
at least not in all browsers. And that's what I'm trying to do,
without the use of php or something like that. I want the divs on the
right, all the same class, to go out to the edge of the browser
window, no matter how much space is taken up to their left.

How's that description?

Jul 21 '05 #8

Spartanicus

day <Da*@theraces.invaliddomain> wrote:

I don't want a column layout. I want a variable-width div that will
occupy whatever "remaining" space there is on the right side of a
browser window.

The example I uploaded provides the described layout, did you bother to
look at it?

--
Spartanicus

Jul 21 '05 #9

day

On Mon, 23 May 2005 15:23:03 GMT, Spartanicus
<in*****@invalid.invalid> wrote:

day <Da*@theraces.invaliddomain> wrote:
I don't want a column layout. I want a variable-width div that will
occupy whatever "remaining" space there is on the right side of a
browser window.

The example I uploaded provides the described layout, did you bother to
look at it?

I *did* look at it when you first posted it. Thanks. My first
thought was that it wouldn't work for what I was trying to do, but I
looked further at it and think I can adapt a couple other assumptions
I 'd made and implement as you did in the example. It will look fine,
and it's better than trying to figure out how to make a class that can
be variable width.

Jul 21 '05 #10

Spartanicus

day <Da*@theraces.invaliddomain> wrote:

I want a variable-width div that will
occupy whatever "remaining" space there is on the right side of a
browser window.

The example I uploaded provides the described layout, did you bother to
look at it?

I *did* look at it when you first posted it. Thanks. My first
thought was that it wouldn't work for what I was trying to do

You've specified what you think is the solution to what you are trying
to do (the "variable-width div"), but you've not informed us about what
you are actually trying to do.

This is not the way to get good help from this group, as such prior
assumptions are frequently based on an incorrect premise.

--
Spartanicus

Jul 21 '05 #11

day

On Tue, 24 May 2005 15:53:52 GMT, Spartanicus
<in*****@invalid.invalid> wrote:

You've specified what you think is the solution to what you are trying
to do (the "variable-width div"), but you've not informed us about what
you are actually trying to do.

This is not the way to get good help from this group, as such prior
assumptions are frequently based on an incorrect premise.

Okay, a more specific question, based on your
http://homepage.ntlworld.com/spartanicus/day.htm example:

Let's say you wanted to do a text caption under the butterfly,
centered left to right within the 172 pixels of the image.

I normally "caption" photos like this:

<div style="float: left">
<p style="text-align: center">
<img src="foopg.jpg" width="107px" height="91px">
<br />
picture caption
</p>
</div>

but that approach won't work with what you've done.

So how do you center-caption the photo, while preserving the look and
flow of everything else at
http://homepage.ntlworld.com/spartanicus/day.htm

Jul 21 '05 #12

Spartanicus

day <Da*@theraces.invaliddomain> wrote:

Okay, a more specific question, based on your
http://homepage.ntlworld.com/spartanicus/day.htm example:

Let's say you wanted to do a text caption under the butterfly,
centered left to right within the 172 pixels of the image.

I normally "caption" photos like this:

<div style="float: left">
<p style="text-align: center">
<img src="foopg.jpg" width="107px" height="91px">
<br />
picture caption
</p>
</div>

but that approach won't work with what you've done.

Oh yee of little faith:
http://homepage.ntlworld.com/spartanicus/day2.htm

--
Spartanicus

Jul 21 '05 #13

day

On Thu, 26 May 2005 16:34:52 GMT, Spartanicus
<in*****@invalid.invalid> wrote:

Oh yee of little faith:
http://homepage.ntlworld.com/spartanicus/day2.htm

Wonderful, and thanks.

Okay, I'm now looking for "day3"...

Same as day2, but:

1- Image with more height, same position
2- Shorter first paragraph, maybe 40 words total
3- Contrasting (different color) area below that, and just to the
right of the image. Area will contain text, another image, and a
center caption (centered below image). Area will have a few pixels of
space between it and the surrounding entities. Left edge of area can
either flow straight down, even when it falls below image from 1
above, or it can go to left edge of browser window when it falls below
image from 1.
4. Looks the same in both Gecko (FF or Netscape 7) and IE 6

Thanks!

Jul 21 '05 #14

Spartanicus

day <Da*@theraces.invaliddomain> wrote:

Oh yee of little faith:
http://homepage.ntlworld.com/spartanicus/day2.htm

Wonderful, and thanks.

Okay, I'm now looking for "day3"...

I repeatedly asked you to disclose what you really wanted to do, you
continue to withhold this. Instead you are treating us as monkeys in a
circus, ok so you've jumped through one hoop, now try it with this
smaller hoop.

This monkey isn't playing anymore.

--
Spartanicus

Jul 21 '05 #15

day

On Sat, 28 May 2005 14:46:32 GMT, Spartanicus
<in*****@invalid.invalid> wrote:

I repeatedly asked you to disclose what you really wanted to do, you
continue to withhold this. Instead you are treating us as monkeys in a
circus, ok so you've jumped through one hoop, now try it with this
smaller hoop.

This monkey isn't playing anymore.

I'm *not* treating anyone like a monkey.

This may sound crazy, but I just don't want to expose either personal
stuff, or business stuff, and my association with it, to such a
widespread audience. The obvious thing you want me to do is just
upload my bad html to the web and provide a url. And I admit that,
looking at exactly what I'm trying to do, you could have things fixed
in one fell swoop. But because all the domains to which I have ftp
access are associated with my business, my family, or groups to which
I belong, I'm nervous about doing so.

Now you, who have the knowledge I'm seeking but have been unable to
acquire for myself as yet, have every right to play the "I'm taking my
ball and going home" game. It's your ball, and your right.

Please don't do that. As I said, if you insist on seeing real html on
the web for evaluation, I understand why. Do me a favor though and
recommend to me a free provider at which I can establish a "junk"
account, upload the stuff, and have it examined.

I worked as a software engineer during the 1980s, doing user
interfaces, and my BS degree is in computer systems engineering.
Those qualifications no doubt pale next to yours, but I'm self-taught
in html and css, and generally am able to try stuff, if it doesn't
work figure out why, and move on. That's why I've not posted to this
group before; I've always been able, in five years of work with html
and css, to figure out how to do what I wanted until now.

You've been very helpful. Tempering your knowledge with a little bit
of patience and understanding for people who seek it though would be a
good thing - I may be stuck on this series of issues, but I *am* smart
enough to discern the difference between a monkey and a person able to
help me, and to treat the two different entities accordingly. If my
postings here leave you unconvinced of that, I apologize.

Jul 21 '05 #16

Els

day wrote:

recommend to me a free provider at which I can establish a "junk"
account, upload the stuff, and have it examined.

You could always install Apache on your own PC and post a link to your
own IP.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: UB40 - Here I Am (Come And Take Me)

Jul 21 '05 #17

Spartanicus

day <Da*@theraces.invaliddomain> wrote:

I repeatedly asked you to disclose what you really wanted to do, you
continue to withhold this. Instead you are treating us as monkeys in a
circus, ok so you've jumped through one hoop, now try it with this
smaller hoop.

This monkey isn't playing anymore.
I'm *not* treating anyone like a monkey.

Let's walk through your additional requests:
1- Image with more height, same position
2- Shorter first paragraph, maybe 40 words total
Neither makes any difference to the example I provided, anyone with only
a basic understanding of html & css knows this. Asking us to make such
trivial adjustments is disrespectful.
3- Contrasting (different color) area below that, and just to the
right of the image. Area will contain text, another image, and a
center caption (centered below image). Area will have a few pixels of
space between it and the surrounding entities. Left edge of area can
either flow straight down, even when it falls below image from 1
above, or it can go to left edge of browser window when it falls below
image from 1.
Again: these verbal descriptions don't transfer, you know what you are
after, others don't. I'm not again going to ask for a graphic example,
and when that's done you'd probably come back and add more requirements.
This may sound crazy, but I just don't want to expose either personal
stuff, or business stuff, and my association with it, to such a
widespread audience.

You post on a medium populated by few geeks (usenet), yet you worry that
someone will associate "day <Da*@theraces.invaliddomain>" with a www
site visible to virtually everyone with an internet connection, come on.

--
Spartanicus

Jul 21 '05 #18

day

Okay, try this:

http://tinyurl.com/9vt9a

It's an ad-ridden, popup-laden (in IE anyway) page on Angelfire, where
I've put a "greeked-up" and generic version of what I'm trying to
accomplish.

No, I have not yet taken a screenshot and Photoshopped it to provide a
true graphic image of what I want, but you can see the mess I've
created, and the words describe what I want it to look like. Try
that. If you insist on a jpg of what I want, I'll spend some time on
that, but try the provided link first.

This mess bears little resemblance to the spartanicus ntlworld pages,
but I started with those as a basis and let myself morph into this
mess.

Spartanicus and anyone else, I can't imagine being any more respectful
than I am being: I'm saying and meaning please and thank you; I'm
acknowledging that you have the answers and I don't, and I'm not
pretending to be an expert in this realm. I've encountered several
mental roadblocks on this, which I thought would be a trivial task,
and I'd not have turned to usenet without exhausting several dozen
hours of trial and error, and other research on the topic.

Jul 21 '05 #19

floating div with width:auto looks "wrong" in gecko browsers

This discussion thread is closed

Similar topics