SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Jan 2009
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Div auto stretch not working in FF

    I have a problem with div's in Firefox 2.0.. everything works fine in IE 6 and IE 7

    I have 2 columns and when the div stretches the other does in IE's

    but it's not working in FF for some reason.. there is a background image that will stretch and pretend that both divs are the same height

    I even tried min-height and max height still not working..

    here is my html
    <div id="container">
    <!--left column-->
    <div id="sidebar"></div>
    <!--right column-->
    <div id="content"></div>
    </div>


    Here is my css

    div#container {
    width: 900px;
    margin: 0 auto;
    background: url(../images/2column.gif) repeat-y;
    }

    div#sidebar {
    width: 186px;
    float:left;
    }

    div#content {
    float:left;
    width: 714px;
    }


    Can someone tell me what's wrong ?

  2. #2
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi slyistheman, welcome to SitePoint!

    The container needs to clear/enclose its floats inside to stretch down with the floats.

    In good browsers tjhat can be done with overflow set to other than the default visible. In IE the same effect is achieved by also "hasLayout", here tripped by the width setting on the container.

    Code:
    div#container {
    width: 900px;
    margin: 0 auto;
    background: url(../images/2column.gif) repeat-y;
    overflow: hidden;
    }
    Test giving the container a border and you'll see what happen.
    Happy ADD/ADHD with Asperger's


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
  •