SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2008
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help with fixed width div containing inline elements and horizontal scroll bars..

    Phew!,

    Hey everyone. I have a container div that contains other divs that are displayed inline. The parent div is set to a width depending on screen resolution. When the child divs overflow the parent div's width i want to have a horizontal scroll bar on the parent div.

    Code:
    .parent { 
    overflow-x:scroll;
    width:1260px;
    }
    The child css; which is from this webpage here: jquery sliding boxes

    Code:
    /* Boxes */
    .boxgrid { 
    	width: 325px; 
    	height: 260px; 
    	margin:15px; 
    	float:left; 
    	background:#161613; 
    	overflow: hidden; 
    	position: relative; 
    }
    	.boxgrid img { 
    		position: absolute; 
    		top: 0; 
    		left: 0; 
    		border: 0; 
    	}
    	.boxgrid p { 
    		padding: 0 10px; 
    		color:#afafaf; 
    		font-weight:bold; 
    		font:10pt "Lucida Grande", Arial, sans-serif; 
    	}
    	
    .boxcaption { 
    	float: left; 
    	position: absolute; 
    	background: #000; 
    	height: 100px; 
    	width: 100%; 
    	opacity: .8; 
    	/* For IE 5-7 */
    	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
    	/* For IE 8 */
    	-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    }
    	.captionfull .boxcaption {
    		top: 260px;
    		left: 0px;
    	}
    	.caption .boxcaption {
    		top: 220px;
    		left: 0px;
    	}
    The children divs are slider boxes utilizing jquery. They line up next to each other but when when the children exceed their parents width, the remaining divs then wrap even though i have the css above on the parent saying i want a horizontal slider. Am I missing something?

    Does anyone know why this could be?

  2. #2
    SitePoint Evangelist stonedeft's Avatar
    Join Date
    Aug 2009
    Posts
    589
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Please post the html part ...there must be something on your nested DIVs
    Don't Panic

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2008
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    HTML Code:
    <div class="parent" style="width: 1250px;">
        
        <div class="boxgrid captionfull">  
            <img alt="test" src="images/portfolio/test.png"/>  
            <div class="cover boxcaption" style="top: 260px;">  
               <h3>test</h3>  
               <p>test</p>  
           </div>  
        </div>
    
       ... more children
    
    </div>

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

    The scrollbar won't appear because there is nothing to force a scrollbar. The boxes inside the parent are only 325px wide and therefore just wrap to the next line as expected without the need for a scrollbar to appear.

    If you want one horizontal row then nest a floated inner inside your parent and give it a large negative right margin.

    Code:
    .inner{
    float:left;
    margin-right:-9999px;
    position:relative;
    }
    Code:
    <div class="parent">
    <div class="inner">
    
    .... content goes here  ......
    
    </div>
    </div>


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
  •