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

[jb_rhys]

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.

.parent { 
overflow-x:scroll;
width:1260px;
}

The child css; which is from this webpage here: jquery sliding boxes

/* 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?

[stonedeft]

Please post the html part ...there must be something on your nested DIVs

[jb_rhys]

<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>

[Paul O'B]

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.

.inner{
float:left;
margin-right:-9999px;
position:relative;
}

<div class="parent">
<div class="inner">

.... content goes here  ......

</div>
</div>