My text won't flow beside my images? - html

Question

How do I put the text beside these images? I've tried everything but I can't seem to figure out how? I'd like it to appear BESIDE the image.
jsFiddle using random image: https://jsfiddle.net/0z1pfbs7/
HTML
<section class="pdc">
<div class="moreproduct">
<div class="bigimg">
<img src="http://i.imgur.com/Xt6vUQD.jpg" alt="" />
</div>
<ul>
<li><img src="http://i.imgur.com/Xt6vUQD.jpg" alt="" /></li>
<li><img src="http://i.imgur.com/Xt6vUQD.jpg" alt="" /></li>
<li><img src="http://i.imgur.com/Xt6vUQD.jpg" alt="" /></li>
<li><img src="http://i.imgur.com/Xt6vUQD.jpg" alt="" /></li>
<li><img src="http://i.imgur.com/Xt6vUQD.jpg" alt="" /></li>
</ul>
<div class="producttext">
<h3>New Balance</h3>
<h1>Men's MX608v4</h1>
<p>SGF</p>
</div>
</div>
</section>
CSS
.pdc{
display: inline;
}
.moreproduct img {
position: relative;
border: 1px solid #93a2ad;
margin-top: 4px;
}
.moreproduct ul{
list-style: none;
}
.moreproduct ul li img{
width: 100px;
height: 100px;
margin-left: 80px;
}
.bigimg{
margin-top: 2em;
position: absolute;
width: 450px;
height: 450px;
margin-left: 240px;
}
.producttext{
position: absolute;
overflow: hidden;
}

Answer 1

Here's the code, you don't need to use position absolute to do this see the code.
.pdc{
display: inline;
}
.moreproduct img {
position: relative;
border: 1px solid #93a2ad;
margin-top: 4px;
}
.moreproduct ul{
list-style: none;
float:left;
}
.moreproduct ul li img{
width: 100px;
height: 100px;
}
.bigimg{
margin-top: 2em;
float:left;
width: 400px;
height: 450px;
margin-left: 20px;
}
.producttext{
float: left;
overflow: hidden;
margin-top: 20px;
}
.clear{
clear:both;
}
<section class="pdc">
<div class="moreproduct">
<ul>
<li><img src="http://i.imgur.com/Xt6vUQD.jpg" alt="" /></li>
<li><img src="http://i.imgur.com/Xt6vUQD.jpg" alt="" /></li>
<li><img src="http://i.imgur.com/Xt6vUQD.jpg" alt="" /></li>
<li><img src="http://i.imgur.com/Xt6vUQD.jpg" alt="" /></li>
<li><img src="http://i.imgur.com/Xt6vUQD.jpg" alt="" /></li>
</ul>
<div class="bigimg">
<img src="http://i.imgur.com/Xt6vUQD.jpg" alt="" />
</div>
<div class="producttext">
<h3>New Balance</h3>
<h1>Men's MX608v4</h1>
<p>SGF</p>
</div>
<div class="clear"></div>
</div>
</section>

Answer 2

As others already mentioned: Don't use absolute positioning to layout your page.
Note: You need to view the example in full-screen to see that everything is aligned "in one line".
Do you mean something like this:
.pdc{
display: inline;
}
.moreproduct img {
position: relative;
border: 1px solid #93a2ad;
margin-top: 4px;
}
.moreproduct ul{
list-style: none;
display: inline-block;
}
.moreproduct ul li img{
width: 100px;
height: 100px;
}
.bigimg{
margin-top: 2em;
display: inline-block;
height: 300px;
}
.producttext{
display: inline-block;
overflow: hidden;
height: 450px;
}
<section class="pdc">
<div class="moreproduct">
<ul>
<li><img src="http://i.imgur.com/Xt6vUQD.jpg" alt="" /></li>
<li><img src="http://i.imgur.com/Xt6vUQD.jpg" alt="" /></li>
<li><img src="http://i.imgur.com/Xt6vUQD.jpg" alt="" /></li>
<li><img src="http://i.imgur.com/Xt6vUQD.jpg" alt="" /></li>
<li><img src="http://i.imgur.com/Xt6vUQD.jpg" alt="" /></li>
</ul>
<div class="bigimg">
<img src="http://i.imgur.com/Xt6vUQD.jpg" alt="" />
</div>
<div class="producttext">
<h3>New Balance</h3>
<h1>Men's MX608v4</h1>
<p>SGF</p>
</div>
</div>
</section>

Answer 3

<style>
.pdc{
display: inline;
}
.moreproduct img {
position: relative;
border: 1px solid #93a2ad;
margin-top: 4px;
}
.moreproduct ul{
list-style: none;
}
.moreproduct ul li img{
width: 100px;
height: 100px;
margin-left: 80px;
}
.bigimg{
margin-top: 2em;
position: absolute;
width: 636px;
height: 450px;
margin-left: 240px;
left: 11px;
}
.producttext{
overflow: hidden;
float:right;
padding-top:25%;
}
</style>
<section class="pdc">
<div class="moreproduct">
<div class="bigimg">
<img src="http://i.imgur.com/Xt6vUQD.jpg" alt="" />
<div class="producttext">
<h3>New Balance</h3>
<h1>Men's MX608v4</h1>
<p>SGF</p>
</div>
</div>
<ul>
<li><img src="http://i.imgur.com/Xt6vUQD.jpg" alt="" /></li>
<li><img src="http://i.imgur.com/Xt6vUQD.jpg" alt="" /></li>
<li><img src="http://i.imgur.com/Xt6vUQD.jpg" alt="" /></li>
<li><img src="http://i.imgur.com/Xt6vUQD.jpg" alt="" /></li>
<li><img src="http://i.imgur.com/Xt6vUQD.jpg" alt="" /></li>
</ul>
</div>
</section>