How do I make text wrap around jssor image slider? - html

Question

I am using a jssor image slider on my home page. Next to it will be a paragraph of text. I cannot get the text to wrap around the jssor image slider. I have tried float and text-align and cannot get it to work. Does anyone have any ideas how I can get the text to wrap around the jssor image slider?
Code is as follows:
HTML:
<div class="content">
<!-- image slider -->
<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width:
800px; height: 355px; background: #c6eafb; overflow: hidden; margin-right: 2%; margin
bottom: 1.5%; z-index: -1;">
<!-- Loading Screen -->
<div u="loading" style="position: absolute; top: 0px; left: 0px;">
<div style="filter: alpha(opacity=70); opacity:0.7; position: absolute; display: block;
background-color: #000000; top: 0px; left: 0px;width: 100%;height:100%;"></div>
<div style="position: absolute; display: block; background: url(../img/loading.gif) no
repeat center center; top: 0px; left: 0px;width: 100%;height:100%;"></div>
</div>
<!-- Slides Container -->
<div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width:
800px; height: 356px; overflow: hidden;">
<div>
<img u="image" src="images/mombaby.jpg" />
</div>
<div>
<img u="image" src="images/baby.jpg" />
</div>
<div>
<img u="image" src="images/family.jpg" />
</div>
<div>
<img u="image" src="images/finalization.jpg" />
</div>
<div>
<img u="image" src="images/baby2.jpg" />
</div>
</div>
<!-- Arrow Left -->
<span u="arrowleft" class="jssora05l" style="width: 40px; height: 40px; top: 158px;
left: 8px;"></span>
<!-- Arrow Right -->
<span u="arrowright" class="jssora05r" style="width: 40px; height: 40px; top: 158px;
right: 8px"></span>
<!-- Arrow Navigator Skin End -->
<a style="display: none" href="http://www.jssor.com">banner slider</a>
<!-- Trigger -->
<script>
jssor_slider1_starter('slider1_container');
</script>
</div>
<!-- Jssor Slider End -->
<p class="text">Welcome to Adoption Covenant
Making the decision to adopt a child can be difficult but the process involved with
adopting doesn’t have to be. Adoption Covenant is a licensed, full service adoption
agency for both domestic and international adoption. Our goal is to place children for
adoption with loving families while simplifying and reducing the expense and heartache
commonly involved with the process. Our unique adoption services are rooted in a deep
understanding of adoption laws and our commitment to improving the lives of parentless
children around the world.
"Unless someone like you cares a whole awful lot, nothing is going to get better. Its
not."
Dr. Seuss, The Lorax
</p>
</div>
CSS:
.content {
margin-right: 3%;
margin-left: 3%;
z-index: 100;
background-color: #FFFFFF;
opacity: .85;
border-radius: 30px;
height: 365px;
padding: 1%;
}
.text {
font-family: "Open Sans", sans-serif;
font-size: 1.3em;
font-weight: 400;
color: #000066;
}
/* image slider */
/* jssor slider arrow navigator skin 05 css */
/* .jssora05l (normal)
.jssora05r (normal)
.jssora05l:hover (normal mouseover)
.jssora05r:hover (normal mouseover)
.jssora05ldn (mousedown)
.jssora05rdn (mousedown) */
.jssora05l, .jssora05r, .jssora05ldn, .jssora05rdn {
position: absolute;
cursor: pointer;
display: block;
background: url(../img/a17.png) no-repeat;
overflow:hidden;
}
.jssora05l { background-position: -10px -40px; }
.jssora05r { background-position: -70px -40px; }
.jssora05l:hover { background-position: -130px -40px; }
.jssora05r:hover { background-position: -190px -40px; }
.jssora05ldn { background-position: -250px -40px; }
.jssora05rdn { background-position: -310px -40px; }
/* image slider */

Answer 1

Please specify 'float: left' for 'slider1_container'.
<div id="slider1_container" style="... float: left; ..." ...>
Reference 'Jssor.Slider.FullPack\demos-jquery\responsive-slider-float-text.source.html'