Ideas on horizontal image scrolling within a div

<div class="project-content">

<div class="project-title">
</div>

<div class="project-text">
</div>

<div class="project-images">
<img src="http://voices.nationalgeographic.com/files/2015/08/dry-river.jpg">
<img src="http://voices.nationalgeographic.com/files/2015/08/dry-river.jpg">
<img src="http://voices.nationalgeographic.com/files/2015/08/dry-river.jpg">
<img src="http://voices.nationalgeographic.com/files/2015/08/dry-river.jpg">
</div>
</div>

Code (markup):

CSS

.project-content{

/*border:1px solid red;*/
height: 92%;
}

.project-title{
width:1124px;
height:8%; /* change this to move up/down the title*/
word-wrap: normal;
border-top:2px solid black;
font-size: 19px;

margin-top: 30px; /* change this to move up/down the title*/

padding-bottom: 15px;
}


.project-text{
width:315px;
border:1px solid green;
float:left;
height: 92%; /* change this to move up/down the title*/
padding-right: 20px;

overflow-y:scroll;
word-wrap: break-word;
}

.project-images {
float:left;
border:1px dashed orange;
width: 80%;
/* hide the scroll bar from the .project-text*/
height: 92%;
margin-left: -15px;
background-color: white;
}


.project-images img{
height: 100%;
margin-left: 25px;
display: inline-block;
}

Code (markup):

I'm facing also some other problems with this implementation.

1) Images are stored the one beneath the other and not in the same line.
2) If i change the size of the window by making it smaller, the div for the images goes beneath the text's div.

Because I'm new at this kind of programming, i would like to hear any opinion on how to implement something like this. Any idea on any of these issues (horizontal scrolling , div aligning etc) will be welcomed.

Thank you in advance.

 

You need an extra DIV to force the width.

<div class="projectImages">
	<div>
		<img src="http://voices.nationalgeographic.com/files/2015/08/dry-river.jpg">
		<img src="http://voices.nationalgeographic.com/files/2015/08/dry-river.jpg">
		<img src="http://voices.nationalgeographic.com/files/2015/08/dry-river.jpg">
		<img src="http://voices.nationalgeographic.com/files/2015/08/dry-river.jpg">
	</div>
<!-- .projectImages --></div>

Code (markup):

.projectImages {
	overflow:auto;
	width:320px; /* == image width */
}

.projectImages div {
	overflow:hidden; /* wrap floats */
	width:1280px; /* == image width * number of images */
}

.projectImages img {
	float:left;
	width:320px;
	height:auto; /* be sure aspect is preserved */
}

Code (markup):

At least if I'm following what you are trying to do. The SUCKTASTIC part is having to hardcode the width of the inner DIV so that the floated images don't wrap. You could try white-space:nowrap; with the images set to their inline behavior, but that can be unreliable/unpredictable.

 

I'd use inline or inline-block with no-wrap. E.g. scrolling gallery.

cheers,

gary

 

Which laughably is not showing the scrollbar here in vivaldi or chrome as there's no width declaration on the UL.

Works nice in FF, IE and legacy Opera though.

 

From the example:

ul {
margin: 1em 40px; /*IE requires an explicit width*/ <<<<<
overflow: auto;
white-space: nowrap;
}

Code (markup):

That was written in early 2008. I don't recall Chrome's status from then, but IE definitely needed help as the comment indicated.

//edit: Just checked Chrome, works as expected. :shrug: ~g

gary