Results 1 to 7 of 7

Thread: divs different in different browsers

  1. #1
    Join Date
    Apr 2006
    Posts
    205
    Thanks
    11
    Thanked 0 Times in 0 Posts

    Question divs different in different browsers

    Hey, I've been making this site and the divs do crazy things in Firefox.

    Can anyone tell me what's going on?

    Thanks to anyone that has any advise, or even just directions to an appropriate tutorial.

    Peace out,

    dog

    http://www.futuretechnology.com.br/g...Untitled-2.htm

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    When you have a division with position:absolute; the proper way of rendering it inside of another element is to NOT add any height or width to that container. IE usually ignores this, whereas FF does it right. Either redesign your page with no, or much less position:absolute; styling, or add the appropriate height and width attributes or styling to the container(s).
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Apr 2006
    Posts
    205
    Thanks
    11
    Thanked 0 Times in 0 Posts

    Question

    hey thanks for the advise.

    I think i'm having problems because I want to place two divs side by side inside the same container. Yet i want the height of the container to be defined by the divs inside it.

    How do I do this whilst maintaining flexibility?

    Peace,

    dog

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Don't use absolute positioning, objects will wrap if the container isn't wide enough, forcing the container to be higher if it has no height set. If the container's width is relative to the window, this should all work out in most cases. Some elements can be absolute or floated but if they are, make sure there is enough static content in the container to fill out the container to its desired height.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Apr 2006
    Posts
    205
    Thanks
    11
    Thanked 0 Times in 0 Posts

    Question

    Cool! Thanks again for the help.
    Don't use absolute positioning, objects will wrap if the container isn't wide enough,
    I've tried to prevent this but defining width in ems. I'm really keen to make a site with ultimate flexibility but I get the impression I'm doing something very wrong.

    The thing i'm stuck on is making a site with multiple columns.

    Right now I feel like the only way to make a second column is with floating or absolute positioning, but then it can't have more height than the first. There must be a better tableless way.

    Where might I learn more about all this?

  6. #6
    Join Date
    Dec 2004
    Location
    UK
    Posts
    2,358
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by dog
    Right now I feel like the only way to make a second column is with floating or absolute positioning, but then it can't have more height than the first. There must be a better tableless way.
    Use the clear property on the first non-floated element that follows your columns to push it down, below them. It won't matter which is longer; the cleared element will follow both.

    Where might I learn more about all this?
    There are numerous layout examples on the Web that you can apply. Some of the better ones can be found in the Techniques section of the CSS Zen Garden's CSS Resources document.

    Mike

  7. #7
    Join Date
    Apr 2006
    Posts
    205
    Thanks
    11
    Thanked 0 Times in 0 Posts

    Thumbs up

    Thanks a lot!

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
  •