SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2004
    Location
    Notts
    Posts
    91
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Floats won't scroll with a scrolling div :(

    HI guy's,

    Having a bit of a problem. I have a two column layout that I have scrolling with in a div. Using 'overflow-y' It works fine in Firefox, but in IE the div's that are floating won't move with the scrolling div and breaks out off the area defined to the scrolling div.

    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <
    html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

    <
    head>
        <
    title>Scrolling 2 Column</title>
        <
    meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        
        <
    style type="text/css">
            <!--
            
    htmlbody{height:100%;} 
        
            
    bodyhtml {
                
    margin:20px;
                
    padding:0;
                
    top:0px;
                
    left:0px;
                
    background:#F1EDE5;
                
    font-size:100%;
                
    color:#999999;
                
    }
                
            
    aa:linka:activea:visited {
                
    background:#ffffff;
                
    color:#ED078A;
                
    text-decoration:none;
                }
                
            
    a:hover {
                
    background:#ffffff;
                
    color:#ED078A;
                
    text-decoration:underline;
                }
                
            
    {
                
    background:#ffffff;
                
    font:normal 0.6em Verdana,Helvetica,Arial,Geneva,sans-serif;
                
    color:#999999;
                
    margin:0px;
                }
                
            .
    clearer {
                
    height:1px;
                
    overflow:hidden;
                
    margin-top:-1px;
                
    clear:both;
                }
                
            
    #scrolling-area {
                
    margin:0 auto;
                
    padding:10px;
                
    width:270px;
                
    height:200px;
                
    background:#ffffff;
                
    color:#999999;
                
    border:solid 2px #C6BFB0;
                
    overflow:auto;
                }
                * 
    html #scrolling-area {overflow-y:scroll;}
                
            
    .twocolumn-layout {
                
    width:250px;
                
    height:auto;
                }
            
                .
    twocolumn {
                    
    width:100px;
                    
    height:auto;
                    
    margin-left:150px;
                    }
                        
                    .
    twocolumn-left {
                        
    position:relative;
                        
    float:left;
                        
    z-index:100;
                        
    width:150px;
                        
    height:auto;
                        
    margin-left:-149px;
                        
    left:-1px;
                        }
                        * 
    html .twocolumn-left {margin-right:-3px;}
                        
                    .
    twocolumn-right {
                        
    width:99px;
                        
    height:auto;
                        }
        
        
            -->
        </
    style>
        
    </
    head>

    <
    body>

        <
    div id="scrolling-area">
        
            <
    div class="twocolumn-layout">
            
                <
    div class="twocolumn">
                    <
    div class="twocolumn-left"><p>Information</p></div>
                    <
    div class="twocolumn-right"><p><a href="#">Page link</a></p></div>
                    <
    div class="clearer"></div>
                </
    div>
                
                <
    div class="twocolumn">
                    <
    div class="twocolumn-left"><p>Information</p></div>
                    <
    div class="twocolumn-right"><p><a href="#">Page link</a></p></div>
                    <
    div class="clearer"></div>
                </
    div>
                
                <
    div class="twocolumn">
                    <
    div class="twocolumn-left"><p>Information</p></div>
                    <
    div class="twocolumn-right"><p><a href="#">Page link</a></p></div>
                    <
    div class="clearer"></div>
                </
    div>
                
                <
    div class="twocolumn">
                    <
    div class="twocolumn-left"><p>Information</p></div>
                    <
    div class="twocolumn-right"><p><a href="#">Page link</a></p></div>
                    <
    div class="clearer"></div>
                </
    div>
                
                <
    div class="twocolumn">
                    <
    div class="twocolumn-left"><p>Information</p></div>
                    <
    div class="twocolumn-right"><p><a href="#">Page link</a></p></div>
                    <
    div class="clearer"></div>
                </
    div>
                
                <
    div class="twocolumn">
                    <
    div class="twocolumn-left"><p>Information</p></div>
                    <
    div class="twocolumn-right"><p><a href="#">Page link</a></p></div>
                    <
    div class="clearer"></div>
                </
    div>
                
                <
    div class="twocolumn">
                    <
    div class="twocolumn-left"><p>Information</p></div>
                    <
    div class="twocolumn-right"><p><a href="#">Page link</a></p></div>
                    <
    div class="clearer"></div>
                </
    div>
                
                <
    div class="twocolumn">
                    <
    div class="twocolumn-left"><p>Information</p></div>
                    <
    div class="twocolumn-right"><p><a href="#">Page link</a></p></div>
                    <
    div class="clearer"></div>
                </
    div>
                
                <
    div class="twocolumn">
                    <
    div class="twocolumn-left"><p>Information</p></div>
                    <
    div class="twocolumn-right"><p><a href="#">Page link</a></p></div>
                    <
    div class="clearer"></div>
                </
    div>
                
                <
    div class="twocolumn">
                    <
    div class="twocolumn-left"><p>Information</p></div>
                    <
    div class="twocolumn-right"><p><a href="#">Page link</a></p></div>
                    <
    div class="clearer"></div>
                </
    div>
                
                <
    div class="twocolumn">
                    <
    div class="twocolumn-left"><p>Information</p></div>
                    <
    div class="twocolumn-right"><p><a href="#">Page link</a></p></div>
                    <
    div class="clearer"></div>
                </
    div>
                
                <
    div class="twocolumn">
                    <
    div class="twocolumn-left"><p>Information</p></div>
                    <
    div class="twocolumn-right"><p><a href="#">Page link</a></p></div>
                    <
    div class="clearer"></div>
                </
    div>
                
                <
    div class="twocolumn">
                    <
    div class="twocolumn-left"><p>Information</p></div>
                    <
    div class="twocolumn-right"><p><a href="#">Page link</a></p></div>
                    <
    div class="clearer"></div>
                </
    div>
                
                <
    div class="twocolumn">
                    <
    div class="twocolumn-left"><p>Information</p></div>
                    <
    div class="twocolumn-right"><p><a href="#">Page link</a></p></div>
                    <
    div class="clearer"></div>
                </
    div>
                
                <
    div class="twocolumn">
                    <
    div class="twocolumn-left"><p>Information</p></div>
                    <
    div class="twocolumn-right"><p><a href="#">Page link</a></p></div>
                    <
    div class="clearer"></div>
                </
    div>
                
                <
    div class="twocolumn">
                    <
    div class="twocolumn-left"><p>Information</p></div>
                    <
    div class="twocolumn-right"><p><a href="#">Page link</a></p></div>
                    <
    div class="clearer"></div>
                </
    div>
                
                <
    div class="twocolumn">
                    <
    div class="twocolumn-left"><p>Information</p></div>
                    <
    div class="twocolumn-right"><p><a href="#">Page link</a></p></div>
                    <
    div class="clearer"></div>
                </
    div>
                
                <
    div class="twocolumn">
                    <
    div class="twocolumn-left"><p>Information</p></div>
                    <
    div class="twocolumn-right"><p><a href="#">Page link</a></p></div>
                    <
    div class="clearer"></div>
                </
    div>
                
                <
    div class="twocolumn">
                    <
    div class="twocolumn-left"><p>Information</p></div>
                    <
    div class="twocolumn-right"><p><a href="#">Page link</a></p></div>
                    <
    div class="clearer"></div>
                </
    div>
                
                <
    div class="twocolumn">
                    <
    div class="twocolumn-left"><p>Information</p></div>
                    <
    div class="twocolumn-right"><p><a href="#">Page link</a></p></div>
                    <
    div class="clearer"></div>
                </
    div>
                
                <
    div class="twocolumn">
                    <
    div class="twocolumn-left"><p>Information</p></div>
                    <
    div class="twocolumn-right"><p><a href="#">Page link</a></p></div>
                    <
    div class="clearer"></div>
                </
    div>
            
            </
    div>
        
        </
    div>

    </
    body>
    </
    html
    Cheers
    Si

  2. #2
    SitePoint Enthusiast
    Join Date
    Oct 2004
    Location
    Notts
    Posts
    91
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Anyone got any ideas, I am totally lost with this one :'(

    Si

  3. #3
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You have a bad case of divitis. Why don't you just use a table to present that information, as it is tabular in nature? Would use a lot less code, too.


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
  •