Web Design Forums

Alex · 10-03-2004, 12:05

Here we go again....

Basically I have a fixed with div with a 780px width. Inside this div I want to have 3 nested divs, lined up horizontally.

The way I've done it (as per sitepoint) is to float one div left, one right, and add left/right margins to the center one to position the content. You can see the finshed result here;

http://www.coolpink.net/projects/help/

Now it works in everything I think, apart from ie5.01 (see attached image)

I'm trying to convince the people at work to use css, but it doesn`t help when I cant fix things like the above. Can anyone help? Also, is there another way of doing the whole layout apart from the one I've used above?

Any help appreciated

Bill Posters · 10-03-2004, 12:27

Rule #1:
ALWAYS use a full DTD (preferably a 'Strict' one.)

The reasons 'why' have been mentioned here many times* before.
(* most of them by me, probably)

It may not fix the problem itself, but it will make solving the problem more straight-forward.

Alex · 10-03-2004, 12:32

oh sorry. There is a full DTD in the full page, but I just ripped that bit out to show you lot on here, and forgot to add the DTD into the example html.

It borks the same with a strict DTD if that helps

Alex · 10-03-2004, 12:33

changed it now for ya anyway

Alex · 11-03-2004, 09:12

Does anyone have any ideas on this?

I've also tried just putting float:left on each of the 3 divs so they stack up side by side, but it still seems to be churning out the same errors

Stickman · 11-03-2004, 09:51

Dunno about this sitepoint thing - but I'd just make 3 divs, all floated left.

Who cares about Ie5.01 anyway?

Alex · 11-03-2004, 09:53

well that's what I tried, and it's still doing the same thing...should it work then? Cos maybe i've got an error in my ass?

Alex · 11-03-2004, 09:54

*css!!!!!!!!!!!!

Stickman · 11-03-2004, 09:56

Quote:

Originally Posted by BoGeYMaN

Cos maybe i've got an error in my ass?

haha

Excellent spelling. Well done.

Stickman · 11-03-2004, 09:57

http://css.maxdesign.com.au/floatutorial/

smallbeer · 11-03-2004, 10:19

It's not the problem here but don't use position:relative and floats together - causes bugs.

your problem is because of the box model hack. IE5.0 ignores any rule immediately following the hack, so you have to add some unecessary rule there to avoid losing your necessary rules.

some people simply add something like #a{ } after each use of the hack, this will allow IE5.0 to "recover" and the following declaration will be read correctly.

It's better all round though to add the "be nice to Opera" rule afterwards instead. Details of that are on Tantek's explanation of the BMH.

Alex · 11-03-2004, 11:05

I think I may now love you. Thanks for the help everyone

10-03-2004, 12:32	#3 (permalink)
Alex div Join Date: Feb 2004 Location: Leeds Posts: 646	oh sorry. There is a full DTD in the full page, but I just ripped that bit out to show you lot on here, and forgot to add the DTD into the example html. It borks the same with a strict DTD if that helps __________________ Engage Interactive - Web design Harrogate \| Kustard

10-03-2004, 12:33	#4 (permalink)
Alex div Join Date: Feb 2004 Location: Leeds Posts: 646	changed it now for ya anyway __________________ Engage Interactive - Web design Harrogate \| Kustard

11-03-2004, 09:12	#5 (permalink)
Alex div Join Date: Feb 2004 Location: Leeds Posts: 646	Does anyone have any ideas on this? I've also tried just putting float:left on each of the 3 divs so they stack up side by side, but it still seems to be churning out the same errors __________________ Engage Interactive - Web design Harrogate \| Kustard

11-03-2004, 09:53	#7 (permalink)
Alex div Join Date: Feb 2004 Location: Leeds Posts: 646	well that's what I tried, and it's still doing the same thing...should it work then? Cos maybe i've got an error in my ass? __________________ Engage Interactive - Web design Harrogate \| Kustard

11-03-2004, 09:54	#8 (permalink)
Alex div Join Date: Feb 2004 Location: Leeds Posts: 646	*css!!!!!!!!!!!! __________________ Engage Interactive - Web design Harrogate \| Kustard

10-03-2004, 12:27	#2 (permalink)
Bill Posters trouble free and loverlee Join Date: Mar 2003 Location: YooKay Posts: 2,933	Rule #1: ALWAYS use a full DTD (preferably a 'Strict' one.) The reasons 'why' have been mentioned here many times* before. (* most of them by me, probably) It may not fix the problem itself, but it will make solving the problem more straight-forward.

11-03-2004, 09:51	#6 (permalink)
Stickman Dr. Lucien Sanchez Join Date: Mar 2003 Location: UK Posts: 5,527	Dunno about this sitepoint thing - but I'd just make 3 divs, all floated left. Who cares about Ie5.01 anyway?

11-03-2004, 09:57	#10 (permalink)
Stickman Dr. Lucien Sanchez Join Date: Mar 2003 Location: UK Posts: 5,527	http://css.maxdesign.com.au/floatutorial/

11-03-2004, 10:19	#11 (permalink)
smallbeer I Ain't Losing Any Sleep™ Join Date: Apr 2003 Posts: 5,200	It's not the problem here but don't use position:relative and floats together - causes bugs. your problem is because of the box model hack. IE5.0 ignores any rule immediately following the hack, so you have to add some unecessary rule there to avoid losing your necessary rules. some people simply add something like #a{ } after each use of the hack, this will allow IE5.0 to "recover" and the following declaration will be read correctly. It's better all round though to add the "be nice to Opera" rule afterwards instead. Details of that are on Tantek's explanation of the BMH. __________________ That's fuckin' ingenious, if I understand it correctly. It's a Swiss fuckin' watch.

11-03-2004, 11:05	#12 (permalink)
Alex div Join Date: Feb 2004 Location: Leeds Posts: 646	I think I may now love you. Thanks for the help everyone __________________ Engage Interactive - Web design Harrogate \| Kustard

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search