SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Addict
    Join Date
    Mar 2003
    Location
    UK
    Posts
    245
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Container div not expanding :(

    I hope someone can point out my mistake.
    I have a main container div (#central) holding a background image and centring the page in the browser window, however it has decided not to expand if the content requires the window to scroll.
    I does have a min-height: 100%; applyed (and
    /* Height \*/
    * html #central {
    height: 100%; /*Height for IE */
    }
    so it always fills the browser window, but even when I remove this it still won't contain the content, even with a <br clear=both/> below.

    Site here CSS here

    I have made the content area (#contcol) pink so I could see what is going on. Is the problem bue to this (#contcol) having to float on top of the div above it (#headimg), I did this to avoid splitting the images in bits.

    Thanks for any insight, it's probbaly a silly mistake on my part.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    HI,

    You have used position absolute and float! It can't be both

    Code:
    #contcol {
     float: left;
     width: 520px;
     top: 225px;
     background-color: Fuchsia;
    }

    Then add a clearer here:
    Code:
     <!--/#prodcol-->
     <div style="clear:both;height:1px"></div>
    </div>
    <!--/#central-->
    <script type="text/javascript">

  3. #3
    SitePoint Addict
    Join Date
    Mar 2003
    Location
    UK
    Posts
    245
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, I understand. However I was using the position absolute to get the Lower Image (and it's container) to be on top of full width one higher up. I can get the div in the right place using 'margin-top: -65px;' but this lays it under the upper image (so it is hidden). Any idea how I can get it on top? (Site updated with suggestion, thanks)

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Add position:relative and a z-index

    Code:
    #contcol {
     /*position: absolute;*/
     float: left;
     width: 520px;
     /*top: 225px;*/
     margin-top: -65px;
     background-color: #00BFFF;
    position:relative;
    z-index:99;
    }
    (probably won't need the z-index as position :relative will give it a stacking context probably higher than the others anyway, but its there just in case)

  5. #5
    SitePoint Addict
    Join Date
    Mar 2003
    Location
    UK
    Posts
    245
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorted, thanks.

  6. #6
    SitePoint Enthusiast
    Join Date
    Jan 2006
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Then add a clearer here:
    Code:
     <!--/#prodcol-->
     <div style="clear:both;height:1px"></div>
    </div>
    <!--/#central-->
    <script type="text/javascript">
    Well, I know this thread is nearly a month old, but THIS is exactly what I needed! A clearer... I didn't know something like this existed. I was really going crazy, when my content-box didn't expand because my other divs were floats. This is awesome, thanks so much for this little trick! Guess I have still much to learn.

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

  8. #8
    SitePoint Enthusiast
    Join Date
    Jan 2006
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the link, definately cleared some things up for me.


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
  •