Putting together a paragraph of text and a gallery of several images

Hello guys! I’m having a practical question, and I would like to ask for help…

I have this block of text on the left and I need a gallery of 3 images (thimbnails) be placed in a row on the right. Thing is, I can’t really make them be in the same row. What I get is that all 3 images go one after another in a column. The width of wrapper is 1000px. The sizes of images are the same - 275x140px, I reduced them with -webkit-transform:scale(0.8) to 220x112px, they get approx 302x 154px on hover because of -webkit-transform:scale(1.1)
Should I make the wrapper size a 100% instead?
Would you be so kind to look at the HTML and CSS code samples to say what I’ve done wrong?

Thanks in advance!

<div class="hovergallery">
 				<h1 class="mg">SAMPLE TEXT</h1> </br>
 		<span class="about">
 				<p><b>SMAPLE TEXT</b> bla bla bla </p> 
 				  <p>Lorem ipsum dolor sit amet</p> 
 				  <p>Lorem ipsum dolor sit amet</p>
 				  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
 				  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
 				  exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
 				  irure dolor in reprehenderit in voluptate velit esse cillum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor  </span>
 		<ul>	 
 		  <li class="a"><img src="images/1.jpg" alt="Image 1"></li>
 		  <li class="a"><img src="images/2.jpg" alt="Image 2"></li>
 		  <li class="a"><img src="images/3.jpg" alt="Image 3" /></li>
 		</ul> 
	  </div>

And CSS

.a{
float: left;  
margin: 4px;
list-style-type:none;
display: inline;
}

.about{
	width:50%;
	float:left;
	margin: 0 20px 0 10px;
}

.hovergallery img{
	margin: 0 10px 5px 0;
	-webkit-transform:scale(0.8); 
	-moz-transform:scale(0.8); 
	-o-transform:scale(0.8); 
	-webkit-transition-duration: 0.5s;
	-moz-transition-duration: 0.5s; 
	-o-transition-duration: 0.5s; 
	opacity: 0.7; 

}

	.hovergallery img:hover{
	-webkit-transform:scale(1.1); 
	-moz-transform:scale(1.1); 
	-o-transform:scale(1.1); 
	box-shadow:0px 0px 30px gray; 
	-webkit-box-shadow:0px 0px 30px gray; 
	-moz-box-shadow:0px 0px 30px gray; 
	opacity: 1;
	}

Hi,

Look at the maths:)

.about is 50% wide which means 50% of 1000 = 500px wide.

You have three images of 275px wide making three images = 825px

825px + 500px will not fit inside 1000px so the images stack vertically.

Note that you can’t wrap a span around block elements and that .about span should be a div. Also note that transform does not affect the initial size of the element and the space it preserves. The element is changed visually but still occupies its original space in the flow.

For your images to fit side by side alongside the text you will need to reduce the width of the text element or reduce the size of the images (which you can do in css if you want).

e.g.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.wrapper {
	margin:0 auto;
	width:1000px;
	background:#f9f9f9;
}
ul.a {
	margin:0;
	padding:0;
	list-style:none;
}
.a li {
	float: left;
}
.about {
	width:40%;
	float:left;
	margin: 0 20px 0 10px;
}
.hovergallery img {
	margin: 0 10px 5px 0;
	-webkit-transition-duration: 0.5s;
	-moz-transition-duration: 0.5s;
	-o-transition-duration: 0.5s;
	opacity: 0.7;
}
.hovergallery img {
	width:180px;
	height:112px
}
.hovergallery img:hover {
	-webkit-transform:scale(1.1);
	-moz-transform:scale(1.1);
	-o-transform:scale(1.1);
	box-shadow:0px 0px 30px gray;
	-webkit-box-shadow:0px 0px 30px gray;
	-moz-box-shadow:0px 0px 30px gray;
	opacity: 1;
}
</style>
</head>

<body>
<div class="wrapper">
  <div class="hovergallery">
    <h1 class="mg">SAMPLE TEXT</h1>
    <div class="about">
      <p><b>SMAPLE TEXT</b> bla bla bla </p>
      <p>Lorem ipsum dolor sit amet</p>
      <p>Lorem ipsum dolor sit amet</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
        incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
        exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
        irure dolor in reprehenderit in voluptate velit esse cillum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</p>
    </div>
    <ul class="a">
      <li><img src="http://placehold.it/275x140" alt="Image 1"></li>
      <li><img src="http://placehold.it/275x140" alt="Image 2"></li>
      <li><img src="http://placehold.it/275x140" alt="Image 3"></li>
    </ul>
  </div>
</div>
</body>
</html>

Thanks a lot for your help, man! :grinning:

I’ve tried the code you have suggested and it DID work… I must have lost my concentration and couldn’t crunch the numbers, just as simple as that.:tired_face:

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.