Topic: Adjacent DIV Problem $Pages that link to <a href="https://ozoneasylum.com/backlink?for=11073" title="Pages that link to Topic: Adjacent DIV Problem" rel="nofollow" >Topic: Adjacent DIV Problem\$

Author	Thread
Wes Paranoid (IV) Mad Scientist From: Inside THE BOX Insane since: May 2000	posted 10-12-2003 19:19 I've searched and experimented, and experimented and searched. I can't make this DIV behave the way I want it to. In IE, it looks fine. In Opera 7, the yellow DIV wraps below the photo. If I remove the 100%, it won't wrap, but the yellow box will extend underneath the photo in both browsers. I've tried position, float and width in every configuration I can think of and I can't solve the problem.
Emperor Maniac (V) Mad Scientist with Finglongers From: Cell 53, East Wing Insane since: Jul 2001	posted 10-12-2003 19:41 Wes: Opera will do this for you but there are issues: 1. Your page code is liable to cause some browsers considerable distress - get that meta tag inside the HEAD tag. 2. If your CSS isn't working the first thing to do is check what DOCTYPE you are using to make sure it isn't upsetting some browsers. As you aren't using one............ 3. My guess is that you need to adjust for IE/Win's poor implementation of the box model. The fact that it works in IE but breaks in Opera doesn't mean much - try to get it to work in Opera and see how it looks in IE/Win. I'd imagine if you want pixel perfect positioning then you will have to go for a Box Model hack. If that doesn't work then strip things down and start with a simpler version an add stlying in and keep testing cross-browser. If you buil for just one browser and then test it in others you have the possibility of being rather disappointed. ___________________ Emps The Emperor dot org
Wes Paranoid (IV) Mad Scientist From: Inside THE BOX Insane since: May 2000	posted 10-12-2003 20:26 That META tag was just a mistake and has been moved. I added ... <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> ... where it should go, but doesn't fix anything. (Not sure I'm using the right one, anyway.) quote: try to get it to work in Opera and see how it looks in IE/Win Everything I'm trying is an attempt to get it to work in Opera. Nothing so far has been able to do that, regardless of what it does in IE. I started converting this whole thing from tables and it worked fine until I wanted to add that yellow DIV to the right. I've read postings around the Web from people having a similar problem, but no one seems to have a working solution.
Emperor Maniac (V) Mad Scientist with Finglongers From: Cell 53, East Wing Insane since: Jul 2001	posted 10-12-2003 20:40 Wes: It now works in Op7 but not IE6/Win Have you also tried floating the larry-photos left too? quote: I've read postings around the Web from people having a similar problem, but no one seems to have a working solution. It can't be that difficult to get right Those are just the tips I'd try to try and get things to work if none of them work and no one has fixed it I'll run up an example and see how I fare. ___________________ Emps The Emperor dot org
Wes Paranoid (IV) Mad Scientist From: Inside THE BOX Insane since: May 2000	posted 10-12-2003 21:06 It's working in Op7 for you? I'm not seeing it. The yellow DIV is still below the photo. I tried floating the larry-photos (the yellow DIV) to the left: In Op7, I get the same -- yellow DIV below the photo, body text below the yellow DIV. In IE, I get the body text to the right of the photo, the yellow DIV below the photo.
DL-44 Maniac (V) Inmate From: under the bed Insane since: Feb 2000	posted 10-12-2003 22:28 The page you have up looks the same in Opera and in Mozilla, with the yellow div butted up against the photo, and filling the space to the right. In IE, the div is down below the photo instead. I made some minor changes to the markup, and changed from a tranitional to a strict doctype, and the it looks identical in all 3 browsers - http://in-dented.com/temp/test.html But I can't find a way to make it look the way I imagine you want it to in mozilla or opera. How strange.... I think what you might have to settle for is putting the yellow div above the photo. [This message has been edited by DL-44 (edited 10-12-2003).]
Wes Paranoid (IV) Mad Scientist From: Inside THE BOX Insane since: May 2000	posted 10-13-2003 01:53 OK, it looks the same in Op7 and IE to me now, although if you watch it before the image displays (or change the image reference to a non-existent file), you'll notice that the yellow DIV isn't butted up against it, it's actually behind it. I find it insane that having two DIVs next to each other like this is impossible. Maybe I'll try making my yellow box out of a table instead. And I thought I would be able to drop tables for stuff like this. Thanks for trying.
Skaarjj Maniac (V) Mad Scientist From: :morF Insane since: May 2000	posted 10-13-2003 02:06 Have you tried putting the both of them inside a container div? I have noticed that some browsers, when just confronted two seperate 1st level divs will automatically put a linebreak between them, yet if you put them inside another div, thus taking them out of the 1st nesting level, you can basically align however you want. I've emailed you an edited version of DL's version to show you what I mean [This message has been edited by Skaarjj (edited 10-13-2003).]
DL-44 Maniac (V) Inmate From: under the bed Insane since: Feb 2000	posted 10-13-2003 04:04 Skaarj - the same problem will still persist. It's an issue with floating and unspecified widths. 100% doesn't do what it used to unfortunately. You'll notice that if you add a border or background color to the paragraphs, they actually extend behind the photograph as well - that's the way it works with a floated element. So, if you just nest the divs, it will continue to work the same way. The problem arises when Mozilla or Opera are presented with another floated object with no width specified. It doesn't know how large to make it, and so it makes it fill all the available space (which in this case, because the photo-left div is floated, is the whole screen width, and it bumps it down). It is a very illogical reaction all in all... There are solutions involving 2 columns, but I assume this is a test of items that will be incorparated into a non-columned layout.... How a table will react in this situation I am not sure. Logic would say that it too will extend behind the photo, but tables act differently than other elements, so it might work out ok.
Skaarjj Maniac (V) Mad Scientist From: :morF Insane since: May 2000	posted 10-13-2003 04:28 It seems to work fine in the version I made up...we'll see
DL-44 Maniac (V) Inmate From: under the bed Insane since: Feb 2000	posted 10-13-2003 05:23 what changes did you make exactly?
Skaarjj Maniac (V) Mad Scientist From: :morF Insane since: May 2000	posted 10-13-2003 11:24 I just put the two div's (photo/caption and text div) inside another, empty, blank div, with no styles spplied to it. From there I simply did float:left and left it at that.
Emperor Maniac (V) Mad Scientist with Finglongers From: Cell 53, East Wing Insane since: Jul 2001	posted 10-13-2003 20:28 Skaarjj: Can we see it? ___________________ Emps The Emperor dot org
Skaarjj Maniac (V) Mad Scientist From: :morF Insane since: May 2000	posted 10-14-2003 02:16 if I had somewhere to host it, sure...you could...just let me see whom I can borrow a couple of kilobytes off of...
Skaarjj Maniac (V) Mad Scientist From: :morF Insane since: May 2000	posted 10-14-2003 04:28 Here we go: http://www.zeloutis.com/skaarjj/test2.htm The lovely Miss Lacuna was kind enough to host it for me
DL-44 Maniac (V) Inmate From: under the bed Insane since: Feb 2000	posted 10-14-2003 05:47 Have you checked it in something other than IE? In mozilla it has the same problem I spoke of above....
Skaarjj Maniac (V) Mad Scientist From: :morF Insane since: May 2000	posted 10-14-2003 06:26 hmmm...my version of mozilla showed it correctly.
DL-44 Maniac (V) Inmate From: under the bed Insane since: Feb 2000	posted 10-14-2003 14:37 I've looked in both 1.3.1 and 1.4, and the yellow div is below the photo and the paragraphs. I'm stumped at the moment...
Emperor Maniac (V) Mad Scientist with Finglongers From: Cell 53, East Wing Insane since: Jul 2001	posted 10-14-2003 14:59 Skaarjj: It doesn't work in Opera 7 either. ___________________ Emps The Emperor dot org
Skaarjj Maniac (V) Mad Scientist From: :morF Insane since: May 2000	posted 10-14-2003 15:08 Dagnabit.... Ok...I upgraded to the latest Mozilla, and now it doesn't display properly here either...
smonkey Paranoid (IV) Inmate From: Northumberland, England Insane since: Apr 2003	posted 10-14-2003 19:46 Dunno if this is exactly useful (not sure if it was what you were trying to achieve) but here is my 5 minutes worth: http://www.cryokinesis.co.uk/test2.htm Be quick, it's only temporarily available! It uses floats and margins - and old trick It will probably need tweaking, but the principle is there if it is what you were trying to do, there are many ways to achieve this look tho, so it depends on how you actually want it be written and how precisely you want it to work - check out liquid layouts on sites like www.glish.com and www.bluerobot.com and others too (meyerweb has some I think). I hope I got those links right, didn't check - if they are wrong then use the good old googling contraption. Regards, Jon
DL-44 Maniac (V) Inmate From: under the bed Insane since: Feb 2000	posted 10-14-2003 20:48 odd...I could have sworn I tried it that way too. Must have only thought about it. Looks perfect in Mozilla 1.3.1 If it works in the others, it would certainly do what you need wes - it just means adding a margin for each instance in which you will have this div next to a photo. Inconvenient, but....
Emperor Maniac (V) Mad Scientist with Finglongers From: Cell 53, East Wing Insane since: Jul 2001	posted 10-14-2003 21:01 smonkey: Good work we are getting there - it works in Op7 and is nearl there in IE6/Win but where the right hand column ends it cuts the left hand content off. I suspect this might just require a bi of clear or some such but that is nearly it. Nice work ___________________ Emps The Emperor dot org
smonkey Paranoid (IV) Inmate From: Northumberland, England Insane since: Apr 2003	posted 10-15-2003 14:16
Wes Paranoid (IV) Mad Scientist From: Inside THE BOX Insane since: May 2000	posted 10-19-2003 19:49 Well, whattaya know ... I guess no matter how flexible markup gets, we'll always have to incorporate these little hacks. Since using this little yellow box will be rare, I don't mind having to add the margin measurement so much. And if it does, I can create a common class for all the other attributes and just add an inline style to each box just for the margin. Thanks, everyone! BTW, Emp, I'm not seeing anything with left-hand content being cut off. Can you post a screenshot of that?
DL-44 Maniac (V) Inmate From: under the bed Insane since: Feb 2000	posted 10-19-2003 20:08 Strange - I also saw this problem in IE 6...but only once, and as soon as I scrolled it went away, and I can't duplicate it.

Topic: Adjacent DIV Problem\$

Author

Thread

Wes
Paranoid (IV) Mad Scientist

From: Inside THE BOX
Insane since: May 2000

posted 10-12-2003 19:19

I've searched and experimented, and experimented and searched. I can't make this DIV behave the way I want it to.

In IE, it looks fine. In Opera 7, the yellow DIV wraps below the photo. If I remove the 100%, it won't wrap, but the yellow box will extend underneath the photo in both browsers.

I've tried position, float and width in every configuration I can think of and I can't solve the problem.

Emperor
Maniac (V) Mad Scientist with Finglongers

From: Cell 53, East Wing
Insane since: Jul 2001

posted 10-12-2003 19:41

Wes: Opera will do this for you but there are issues:

1. Your page code is liable to cause some browsers considerable distress - get that meta tag inside the HEAD tag.

2. If your CSS isn't working the first thing to do is check what DOCTYPE you are using to make sure it isn't upsetting some browsers. As you aren't using one............

3. My guess is that you need to adjust for IE/Win's poor implementation of the box model. The fact that it works in IE but breaks in Opera doesn't mean much - try to get it to work in Opera and see how it looks in IE/Win. I'd imagine if you want pixel perfect positioning then you will have to go for a Box Model hack.

If that doesn't work then strip things down and start with a simpler version an add stlying in and keep testing cross-browser. If you buil for just one browser and then test it in others you have the possibility of being rather disappointed.

___________________
Emps

The Emperor dot org

Wes
Paranoid (IV) Mad Scientist

From: Inside THE BOX
Insane since: May 2000

posted 10-12-2003 20:26

That META tag was just a mistake and has been moved.

I added ...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

... where it should go, but doesn't fix anything. (Not sure I'm using the right one, anyway.)

quote:
try to get it to work in Opera and see how it looks in IE/Win

Everything I'm trying is an attempt to get it to work in Opera. Nothing so far has been able to do that, regardless of what it does in IE.

I started converting this whole thing from tables and it worked fine until I wanted to add that yellow DIV to the right. I've read postings around the Web from people having a similar problem, but no one seems to have a working solution.

Emperor
Maniac (V) Mad Scientist with Finglongers

From: Cell 53, East Wing
Insane since: Jul 2001

posted 10-12-2003 20:40

Wes: It now works in Op7 but not IE6/Win

Have you also tried floating the larry-photos left too?

quote:
I've read postings around the Web from people having a similar problem, but no one seems to have a working solution.

It can't be that difficult to get right

Those are just the tips I'd try to try and get things to work if none of them work and no one has fixed it I'll run up an example and see how I fare.

___________________
Emps

The Emperor dot org

Wes
Paranoid (IV) Mad Scientist

From: Inside THE BOX
Insane since: May 2000

posted 10-12-2003 21:06

It's working in Op7 for you? I'm not seeing it. The yellow DIV is still below the photo.

I tried floating the larry-photos (the yellow DIV) to the left:

In Op7, I get the same -- yellow DIV below the photo, body text below the yellow DIV.

In IE, I get the body text to the right of the photo, the yellow DIV below the photo.

DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

posted 10-12-2003 22:28

The page you have up looks the same in Opera and in Mozilla, with the yellow div butted up against the photo, and filling the space to the right.

In IE, the div is down below the photo instead.

I made some minor changes to the markup, and changed from a tranitional to a strict doctype, and the it looks identical in all 3 browsers -
http://in-dented.com/temp/test.html

But I can't find a way to make it look the way I imagine you want it to in mozilla or opera.

How strange....

I think what you might have to settle for is putting the yellow div above the photo.

[This message has been edited by DL-44 (edited 10-12-2003).]

Wes
Paranoid (IV) Mad Scientist

From: Inside THE BOX
Insane since: May 2000

posted 10-13-2003 01:53

OK, it looks the same in Op7 and IE to me now, although if you watch it before the image displays (or change the image reference to a non-existent file), you'll notice that the yellow DIV isn't butted up against it, it's actually behind it.

I find it insane that having two DIVs next to each other like this is impossible.

Maybe I'll try making my yellow box out of a table instead. And I thought I would be able to drop tables for stuff like this.

Thanks for trying.

Skaarjj
Maniac (V) Mad Scientist

From: :morF
Insane since: May 2000

posted 10-13-2003 02:06

Have you tried putting the both of them inside a container div? I have noticed that some browsers, when just confronted two seperate 1st level divs will automatically put a linebreak between them, yet if you put them inside another div, thus taking them out of the 1st nesting level, you can basically align however you want. I've emailed you an edited version of DL's version to show you what I mean

[This message has been edited by Skaarjj (edited 10-13-2003).]

DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

posted 10-13-2003 04:04

Skaarj - the same problem will still persist.

It's an issue with floating and unspecified widths. 100% doesn't do what it used to unfortunately.

You'll notice that if you add a border or background color to the paragraphs, they actually extend behind the photograph as well - that's the way it works with a floated element.
So, if you just nest the divs, it will continue to work the same way.

The problem arises when Mozilla or Opera are presented with another floated object with no width specified. It doesn't know how large to make it, and so it makes it fill all the available space (which in this case, because the photo-left div is floated, is the whole screen width, and it bumps it down). It is a very illogical reaction all in all...

There are solutions involving 2 columns, but I assume this is a test of items that will be incorparated into a non-columned layout....

How a table will react in this situation I am not sure. Logic would say that it too will extend behind the photo, but tables act differently than other elements, so it might work out ok.

Skaarjj
Maniac (V) Mad Scientist

From: :morF
Insane since: May 2000

posted 10-13-2003 04:28

It seems to work fine in the version I made up...we'll see

DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

posted 10-13-2003 05:23

what changes did you make exactly?

Skaarjj
Maniac (V) Mad Scientist

From: :morF
Insane since: May 2000

posted 10-13-2003 11:24

I just put the two div's (photo/caption and text div) inside another, empty, blank div, with no styles spplied to it. From there I simply did float:left and left it at that.

Emperor
Maniac (V) Mad Scientist with Finglongers

From: Cell 53, East Wing
Insane since: Jul 2001

posted 10-13-2003 20:28

Skaarjj: Can we see it?

___________________
Emps

The Emperor dot org

Skaarjj
Maniac (V) Mad Scientist

From: :morF
Insane since: May 2000

posted 10-14-2003 02:16

if I had somewhere to host it, sure...you could...just let me see whom I can borrow a couple of kilobytes off of...

Skaarjj
Maniac (V) Mad Scientist

From: :morF
Insane since: May 2000

posted 10-14-2003 04:28

Here we go: http://www.zeloutis.com/skaarjj/test2.htm

The lovely Miss Lacuna was kind enough to host it for me

DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

posted 10-14-2003 05:47

Have you checked it in something other than IE?

In mozilla it has the same problem I spoke of above....

Skaarjj
Maniac (V) Mad Scientist

From: :morF
Insane since: May 2000

posted 10-14-2003 06:26

hmmm...my version of mozilla showed it correctly.

DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

posted 10-14-2003 14:37

I've looked in both 1.3.1 and 1.4, and the yellow div is below the photo and the paragraphs.

I'm stumped at the moment...

Emperor
Maniac (V) Mad Scientist with Finglongers

From: Cell 53, East Wing
Insane since: Jul 2001

posted 10-14-2003 14:59

Skaarjj: It doesn't work in Opera 7 either.

___________________
Emps

The Emperor dot org

Skaarjj
Maniac (V) Mad Scientist

From: :morF
Insane since: May 2000

posted 10-14-2003 15:08

Dagnabit....

Ok...I upgraded to the latest Mozilla, and now it doesn't display properly here either...

smonkey
Paranoid (IV) Inmate

From: Northumberland, England
Insane since: Apr 2003

posted 10-14-2003 19:46

Dunno if this is exactly useful (not sure if it was what you were trying to achieve) but here is my 5 minutes worth:
http://www.cryokinesis.co.uk/test2.htm

Be quick, it's only temporarily available!

It uses floats and margins - and old trick

It will probably need tweaking, but the principle is there if it is what you were trying to do, there are many ways to achieve this look tho, so it depends on how you actually want it be written and how precisely you want it to work - check out liquid layouts on sites like www.glish.com and www.bluerobot.com and others too (meyerweb has some I think). I hope I got those links right, didn't check - if they are wrong then use the good old googling contraption.

Regards,

Jon

DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

posted 10-14-2003 20:48

odd...I could have sworn I tried it that way too. Must have only thought about it.

Looks perfect in Mozilla 1.3.1

If it works in the others, it would certainly do what you need wes - it just means adding a margin for each instance in which you will have this div next to a photo. Inconvenient, but....

Emperor
Maniac (V) Mad Scientist with Finglongers

From: Cell 53, East Wing
Insane since: Jul 2001

posted 10-14-2003 21:01

smonkey: Good work we are getting there - it works in Op7 and is nearl there in IE6/Win but where the right hand column ends it cuts the left hand content off. I suspect this might just require a bi of clear or some such but that is nearly it. Nice work

___________________
Emps

The Emperor dot org

smonkey
Paranoid (IV) Inmate

From: Northumberland, England
Insane since: Apr 2003

posted 10-15-2003 14:16

Wes
Paranoid (IV) Mad Scientist

From: Inside THE BOX
Insane since: May 2000

posted 10-19-2003 19:49

Well, whattaya know ... I guess no matter how flexible markup gets, we'll always have to incorporate these little hacks.

Since using this little yellow box will be rare, I don't mind having to add the margin measurement so much. And if it does, I can create a common class for all the other attributes and just add an inline style to each box just for the margin.

Thanks, everyone!

BTW, Emp, I'm not seeing anything with left-hand content being cut off. Can you post a screenshot of that?

DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

posted 10-19-2003 20:08

Strange - I also saw this problem in IE 6...but only once, and as soon as I scrolled it went away, and I can't duplicate it.

Post Reply

Your User Name:
Your Password:
Login Options:	Remember Me On This Computer

Your Text: Insert Slimies » Insert UBB Code » Close Last Tag \| All Tags UBB Help	Loading...
Options:	Show Signature Enable Slimies Enable Linkwords

Topic: Adjacent DIV Problem

Insert Slimies »

Insert UBB Code »

Topic: Adjacent DIV Problem $Pages that link to <a href="https://ozoneasylum.com/backlink?for=11073" title="Pages that link to Topic: Adjacent DIV Problem" rel="nofollow" >Topic: Adjacent DIV Problem\$