the same but differant

[bradley317]

I have this layout that I'm working on that is proving to be a bit of a pain.

http://www.bradley317.co.uk/layout_test/

IE 6 displays it as I want, with the two images inline at the bottom, based on the padding associated with the headings. Trouble is, it doesn't quite work in all the other browsers that I have tested on (Firefox, Opera, Safari, IE Mac, etc), what's more, it doesn't work in differant ways!

I'm pretty stuck now. I can't see how I will be able to fix this, unless I'm missing something obvious, without filling the css with loads of hacks. I'd prefer not to have to do that.

Can this layout be fixed?

Is there another way of doing this without causing all the problems?

[KDesigns]

You could do a single container div that holds two floating divs. The div on the left would be just your main (Image1) area. The div on the right would be a container for two other divs that held your headings and image2.

[KDesigns]

Also... although I recommend building with CSS whenever possible (and it is possible here) this would be very easy to do with a table as well.

[bradley317]

You could do a single container div that holds two floating divs. The div on the left would be just your main (Image1) area. The div on the right would be a container for two other divs that held your headings and image2.

I don't really follow that.

Tables are out of the question I'm afraid, unless of course they contain tabular data. Sorry

[KDesigns]

Here is a very basic explanation:

#container {
   width: 770px;
}
#left, #right {
   float: left;
   clear: both;
}
#left {
   width: 450px;
}
#right {
   width: 320px;
}
#headings {
   width: 320px;
   clear: both;
}
#image2 {
   width: 320px;
   clear: both;
}

[bradley317]

Thanks for that, I've managed to fix most of the problems now. It looks fine in IE, Mozilla, Safari, etc.

Still can't get Opera to look right though. I think it must be something to do with the padding on the headings, but if I change this to fix Opera, then all the other browsers get screwed up.

Help!

[KDesigns]

Is the newer version up at the same link? If so, we can take a look and see if we figure it out.


EDIT: Sorry should have looked first! I'm heading out but I'll take a look when I get back in to see if I can spot the problem