Getting an auto width div within another div

Hello,

I’m trying to implement a slider/scroller and can’t seem to get a div to auto size passed the parent div, so as to hide images not seen yet in the slider. The issue is that the images fall below the other ones and stack vertically. So once the browser hits a certain size, the image, that should be there vanishes. My code is below and also here is a jsfiddles of it.

The only way I can get this to work is to define a size of the div as being large say 1800px (in inline CSS) then it messes up with all other fluid components.
Here’s another jsfiddles of how that is (not) working.

What are all of your suggestions!
Thanks!

  • T

All code compiled:

<div class="slider-parent">
    		<div class="left-slider-button">
        		<input type="button" value="<" style="height: 300px" onmousedown="scrollDiv('MyDiv', 3)" onmouseup="clearTimeout(timer1)" />
    		</div>
    		<div id="MyDiv" class="slider-child">
        		<div class="slider-img-container">
            			<img src="img1.jpg" />
            			<img src="img2.jpg" />
            			<img src="img3.jpg" />
            			<img src="img4.jpg" />
                        <img src="img5.jpg" />
        		</div>
    		</div>
    		<div class="right-slider-button">
        		<input type="button" value=">" style="height: 300px; display:inline-block;" onmousedown="scrollDiv('MyDiv', -3)" onmouseup="clearTimeout(timer1)" />
    		</div>
	</div>
.slider-parent {
	margin-left: 2em;
	position: relative;
	width: 92vw;
	overflow: hidden;
	float: left;
	margin-top: 3em;
	margin-bottom: 3em;
}

@media screen and (max-width: 760px) {
	.slider-parent {
		left: 0;
		width: 90%;
		float: none;
		margin: 0 auto;
		position: relative;
	}
}

.slider-child {
	display: inline;
	float: left;
	width: 82vw;
	height: 300px;
	overflow: hidden;
}

@media screen and (max-width: 760px) {
	.slider-child {
		width: 95%;
		float: none;
		margin: 0 auto;
		height: auto;
	}
}

.slider-img-containter {
	height: 300px;
}

@media screen and (max-width: 760px) {
	.slider-img-container {
		width: 100%;
		margin: 0 auto;
	}
}

.slider-img-container img {
	display: inline-block;
	position: relative;
	height: 300px;
}

@media screen and (max-width: 760px) {
	.slider-img-container img {
		width: 95%;
		height: auto;
		display: block;
		margin: 0 auto;
	}
}

.left-slider-button {
	float: left;
	width: 30px;
}

@media screen and (max-width: 760px) {
	.left-slider-button{
		display: none;
	}
}
.right-slider-button {
	float: left;
	width: 30px;
}

@media screen and (max-width: 760px) {
	.right-slider-button {
		display: none;
	}
}
	var timer1;
	function scrollDiv(divId, depl) {
  		var scroll_container = document.getElementById(divId);
  		scroll_container.scrollLeft -= depl;
  		timer1 = setTimeout('scrollDiv("'+divId+'", '+depl+')', 10);
	}

Hi,

I’m not sure if this is what you were asking but add this to your first example:


.slider-img-container {white-space:nowrap}
.slider-img-container img{float:none;display:inline-block}


The white space rule stops the elements wrapping when the images are inline-block and not floated. No widths needed to keep them all on one line.

I tried this and am still getting the same output for the display. All the photos should be in a line but they are still stacking? There is suppose to be a third image shown, but do to the size of the container (I am assuming) it is stacking instead of continuing to be in a line. (In photo attached)

Telo, have you added Paul’s code to the fiddle code?

Side issue… the “less-than” and “greater-than” characters in the following lines should be replaced with < and >


<input type="button" value="[color=red]<[/color]" style="height: 300px"...
<input type="button" value="[color=red]>[/color]" style="height: 300px...

What browser are you using to test your code?

Please post the top of your page in your next message… include the <!doctype> through the </head> tags.

Hello ronpat!

I did add that code to the jsfiddles and it did not work there as well. I use Chrome, Firefox, IE, and Safari to test everything and it didn’t work there as well.

Here’s the requested HTML as well (there’s nothing special as this is my testing case for a larger project):


<!DOCTYPE html>
<html>
<head>
<title>Practice</title>
	<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>

Then the stylesheet is as follows above with the code Paul suggested:

body {
	margin: 0;
	padding: 0;
	border: 0;
	font-family: 'Open Sans';
	background-color: #000000;
	font-size: .9em;
}

.clear {
	clear: both;
}

.slider-parent {
	margin-left: 2em;
	position: relative;
	width: 92vw;
	overflow: hidden;
	float: left;
	margin-top: 3em;
	margin-bottom: 3em;
}

@media screen and (max-width: 760px) {
	.slider-parent {
		left: 0;
		width: 90%;
		float: none;
		margin: 0 auto;
		position: relative;
	}
}

.slider-child {
	display: inline;
	float: left;
	width: 82vw;
	height: 300px;
	overflow: hidden;
}

@media screen and (max-width: 760px) {
	.slider-child {
		width: 95%;
		float: none;
		margin: 0 auto;
		height: auto;
	}
}

.slider-img-containter {
	white-space: nowrap;
}

@media screen and (max-width: 760px) {
	.slider-img-container {
		width: 100%;
		margin: 0 auto;
		background-color: #5C4AF7;
	}
}

.slider-img-container img {
	display: inline-block;
	height: 300px;
	float: none;
}

@media screen and (max-width: 760px) {
	.slider-img-container img {
		width: 95%;
		height: auto;
		display: block;
		margin: 0 auto;
	}
}

.left-slider-button {
	/* get image for this for consistency over browsers/platforms */
	float: left;
	width: 30px;
}

@media screen and (max-width: 760px) {
	.left-slider-button{
		display: none;
	}
}
.right-slider-button {
	/* get image for this for consistency over browsers/platforms */
	float: left;
	width: 30px;
}

@media screen and (max-width: 760px) {
	.right-slider-button {
		display: none;
	}
}

Works for me with my additions.


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
body {
	margin: 0;
	padding: 0;
	border: 0;
	font-family: 'Open Sans';
	background-color: #000000;
	font-size: .9em;
}
.clear {
	clear: both;
}
.slider-parent {
	margin-left: 2em;
	position: relative;
	width: 92vw;
	overflow: hidden;
	float: left;
	margin-top: 3em;
	margin-bottom: 3em;
}
 @media screen and (max-width: 760px) {
.slider-parent {
	left: 0;
	width: 90%;
	float: none;
	margin: 0 auto;
	position: relative;
}
}
.slider-child {
	display: inline;
	float: left;
	width: 82vw;
	height: 300px;
	overflow: hidden;
}
 @media screen and (max-width: 760px) {
.slider-child {
	width: 95%;
	float: none;
	margin: 0 auto;
	height: auto;
}
}
.slider-img-containter {
	white-space: nowrap;
}
 @media screen and (max-width: 760px) {
.slider-img-container {
	width: 100%;
	margin: 0 auto;
	background-color: #5C4AF7;
}
}
.slider-img-container img {
	display: inline-block;
	height: 300px;
	float: none;
}
 @media screen and (max-width: 760px) {
.slider-img-container img {
	width: 95%;
	height: auto;
	display: block;
	margin: 0 auto;
}
}
.left-slider-button {
	/* get image for this for consistency over browsers/platforms */
	float: left;
	width: 30px;
}
 @media screen and (max-width: 760px) {
.left-slider-button {
	display: none;
}
}
.right-slider-button {
	/* get image for this for consistency over browsers/platforms */
	float: left;
	width: 30px;
}
 @media screen and (max-width: 760px) {
.right-slider-button {
	display: none;
}
}


/* for testing */
.slider-img-container {white-space:nowrap}
.slider-img-container img{float:none;display:inline-block}
.img1{background:red}
.img2{background:green}
.img3{background:yellow}
.img4{background:orange}
.img5{background:blue}

/*  */

</style>
</head>

<body>
<div class="slider-parent">
		<div class="left-slider-button">
				<input type="button" value="<" style="height: 300px" onmousedown="scrollDiv('MyDiv', 3)" onmouseup="clearTimeout(timer1)" />
		</div>
		<div id="MyDiv" class="slider-child">
				<div class="slider-img-container"> <img class="img1" src="img1.jpg" /> <img class="img2" src="img2.jpg" /> <img class="img3" src="img3.jpg" /> <img  class="img4" src="img4.jpg" /> <img class="img5" src="img5.jpg" /> </div>
		</div>
		<div class="right-slider-button">
				<input type="button" value=">" style="height: 300px; display:inline-block;" onmousedown="scrollDiv('MyDiv', -3)" onmouseup="clearTimeout(timer1)" />
		</div>
</div>
<script>
var timer1;
	function scrollDiv(divId, depl) {
  		var scroll_container = document.getElementById(divId);
  		scroll_container.scrollLeft -= depl;
  		timer1 = setTimeout('scrollDiv("'+divId+'", '+depl+')', 10);
	}
</script>
</body>
</html>


What are you seeing?

It didn’t work for you because you didn’t copy my code correctly :slight_smile:


.slider-img-containter {
	white-space: nowrap;
}

It should be:


.slider-img-container {
	white-space: nowrap;
}

WOW! I feel so silly! I was looking at it for hours yesterday thinking “Why isn’t this bugger working?!”

Typos…

“There Are Two Typos Of People In This World: Those Who Can Edit And Those Who Can’t”
― Jarod Kintz

I thank you so much for this! Thanks Paul :slight_smile:
Have a beautiful day!