1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Firefox nested/floated div problem

Discussion in 'CSS' started by Kolyana, Jul 6, 2005.

0
  1. #1
    Okay, all I want is a very simple arrangement of nested DIVs with some particular behavior, and it seems that this behavior is ultimately stopping all known 'fixes' for the "floated div" issue we're all very aware off.

    http://img103.imageshack.us/img103/5430/example8ho.th.gif

    Using this:
    <div id=outerContainer style="text-align: center;">
    <div id=subContainer style="display: inline; background: #ccc; position: relative;">
    <img ... />
    <div>some text</div>
    </div>
    </div>

    The inner div is repeated multiple times, but only one has been included for clairty.

    The catch is this: I want the small divs in the main outer container to be CENTRALLY ALIGNED and displayed inline, so they line up next to eachother and cascade down to a new row if the browser is too narrow.

    I use the outerContainer to force this text-align: center

    The catch is that each subContainer collapses to minimum height and ignores it's content (IN FIREFOX) ... it can be a single image, text ... anything. It then starts exhibiting very odd behavior by essentially spilling it contents all over the place:
    http://img103.imageshack.us/img103/4070/example29hx.th.gif
    http://img103.imageshack.us/img103/2451/example35ue.th.gif

    I've tried adding the usual clear:both, autoflow:auto, <br/>, heights, widths, and lord knows what else I've found over the course of the last 3 hours ... but enough is enough.

    The only thing that works is to add float:left to each sub-container, but then they are not centrally aligned in the main container.

    How can I have centrally aligned containing divs, displayed inline, that envelope their content?

    Oh, and it's probably relevant, but I'm using this declaration:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
     
    Kolyana, Jul 6, 2005 IP
  2. Arnica

    Arnica Peon

    Messages:
    320
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Do you have a live URL to look at?
     
    Arnica, Jul 6, 2005 IP
  3. Kolyana

    Kolyana Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Sorry, no ... the site is still in development and has no hosting location.
     
    Kolyana, Jul 6, 2005 IP
  4. relixx

    relixx Active Member

    Messages:
    946
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    70
    #4
    why not use a free one and host a mock up page with the problem coding on Geocities or something? You can remove all the wor-related content so you're not in BoC or anything.
     
    relixx, Jul 6, 2005 IP