SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    High fives all round! bradley317's Avatar
    Join Date
    Jan 2004
    Location
    Chester, UK
    Posts
    214
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    the same but differant

    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?
    Hello, hello, what's all this shouting?
    We'll have no trouble here

    (Helping a pal... http://www.funkdub.info)

  2. #2
    Are You There? KDesigns's Avatar
    Join Date
    Oct 2003
    Location
    Your Monitor
    Posts
    1,147
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    ChooseDaily.com - Follow on Twitter
    Top Resources for Web Designers and Developers Every Day!

  3. #3
    Are You There? KDesigns's Avatar
    Join Date
    Oct 2003
    Location
    Your Monitor
    Posts
    1,147
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    ChooseDaily.com - Follow on Twitter
    Top Resources for Web Designers and Developers Every Day!

  4. #4
    High fives all round! bradley317's Avatar
    Join Date
    Jan 2004
    Location
    Chester, UK
    Posts
    214
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by 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.
    I don't really follow that.

    Tables are out of the question I'm afraid, unless of course they contain tabular data. Sorry
    Hello, hello, what's all this shouting?
    We'll have no trouble here

    (Helping a pal... http://www.funkdub.info)

  5. #5
    Are You There? KDesigns's Avatar
    Join Date
    Oct 2003
    Location
    Your Monitor
    Posts
    1,147
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is a very basic explanation:
    Code:
    #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;
    }
    ChooseDaily.com - Follow on Twitter
    Top Resources for Web Designers and Developers Every Day!

  6. #6
    High fives all round! bradley317's Avatar
    Join Date
    Jan 2004
    Location
    Chester, UK
    Posts
    214
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!
    Hello, hello, what's all this shouting?
    We'll have no trouble here

    (Helping a pal... http://www.funkdub.info)

  7. #7
    Are You There? KDesigns's Avatar
    Join Date
    Oct 2003
    Location
    Your Monitor
    Posts
    1,147
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    ChooseDaily.com - Follow on Twitter
    Top Resources for Web Designers and Developers Every Day!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •