SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2006
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Container div wont accommodate the divs inside (pics included)

    I have one large 'container' div, and lots of little divs filled with data pulled from a database

    In IE the main container expands just fine, but in Firefox the little divs overlap the main container (as shown the picture below)


    Firefox: (doesnt work)


    IE 6: (works fine)



    All help is appreciated. I tried a number of things but nothing worked
    An extraordinary way.

  2. #2
    SitePoint Zealot Beeper's Avatar
    Join Date
    Sep 2003
    Location
    LONDON UK
    Posts
    199
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    style sheet and html? need them to help you!

    probably need to 'clear' the elements with a little clearme div at the end of all your boxes.

    .clearme {
    clear:both;
    border:0; margin:0; padding:0;
    height:1px;
    font-size:1px;
    }
    Never argue with an idiot.
    They just drag you down to their level...
    and beat you with experience.

  3. #3
    SitePoint Enthusiast
    Join Date
    Jan 2006
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Arrow

    this is the snippet of css that gives me that border ( the double lines)

    Code:
    #border{
    background-repeat: repeat;
    border: 1px solid #cfd6d2;
    width: 685px;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    padding: 6px;
    z-index: 0;
    text-align: center;
    }
    this is the container with all the little divs inside it
    Code:
    .container{
    background-color: #e4f4eb;
    border: 1px solid #cfd6d2;
    width: 660px;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    padding: 10px;
    z-index: 1;
    text-align: left;
    }
    inside the above 'container' I have many little divs with their content being pulled from a database

    this is the code for the little divs
    Code:
    .divText{
    background-color: #d3e6d9;
    border: 1px solid #cbd9cf;
    border-top: 0px;
    padding: 4px;
    width: 390px;
    margin-bottom: 4px;
    display: none;
    }
    the html code looks something like this:
    Code:
    <div id="border">
    <div class="container">
    
          <div class="divText">
                blah blah blah
          </div>
    
          <div class="divText">
                blah blah blah
          </div>
    
          <div class="divText">
                blah blah blah
          </div>
    
    </div>
    </div>
    An extraordinary way.

  4. #4
    SitePoint Enthusiast
    Join Date
    Jan 2006
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Beeper I tried that clearme div but it didnt work
    An extraordinary way.

  5. #5
    SitePoint Enthusiast
    Join Date
    Jan 2006
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I guess I'm stuck on my own here
    An extraordinary way.

  6. #6
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    we need to see your full code

    for float clearing see FAQ CSS
    http://www.sitepoint.com/forums/show...5&postcount=15

  7. #7
    SitePoint Enthusiast
    Join Date
    Jan 2006
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I got it to work by placing overflow: auto; into the border container
    An extraordinary way.


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
  •