CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Bob
Bob

Reputation: 207

Trying to put a div next to a slider

I've been searching for a while for a responsive slider and I finally one.
I changed the width so that it only takes up half the page because on the other half I would like to have an area of text.
However the text goes underneath the slider and to the right instead of just directly to the right.
I'm hoping that a second pair of eyes can help me catch the mistake I'm making.

.home-content {
	background-color: #fff;
	width: 90%;
	padding-top: 3em;
	margin-left: auto;
	margin-right: auto;
	-webkit-box-shadow: 0px 1px 1px #000;
	-moz-box-shadow: 0px 1px 1px #000;
	box-shadow: 0px 1px 1px #000;
}
#slides {
	float: left;
}
#latest-posts {
	float: right;
}
.rslides {
  	position: relative;
  	top: 1em;
  	list-style: none;
  	overflow: hidden;
  	width: 50%;
  	padding: 0;
  	margin: 0;
}

.rslides li {
  	-webkit-backface-visibility: hidden;
  	position: absolute;
  	display: none;
  	width: 100%;
  	left: 0;
  	top: 0;
}

.rslides li:first-child {
  	position: relative;
  	display: block;
  	float: left;
}

.rslides img {
  	display: block;
  	height: auto;
  	float: left;
  	width: 100%;
  	border: 0;
}
<div class="home-content">
		<div id="slides">
			<ul class="rslides">
  				<li><img src="../images/slider/test-slide-1.svg" alt=""></li>
  				<li><img src="../images/slider/test-slide-2.svg" alt=""></li>
			</ul>
		</div>
		<div id="latest-posts">
			<p>TEST TEXT</p>
		</div>
</div>

Upvotes: 0

Views: 348

Answers (1)

Fahad Hasan
Fahad Hasan

Reputation: 10506

Use display: inline-block instead of float: left and float: right along with percentage widths for #slides and #latest-posts.

.home-content {
	background-color: #fff;
	width: 90%;
	padding-top: 3em;
	margin-left: auto;
        text-align: center;
	margin-right: auto;
	-webkit-box-shadow: 0px 1px 1px #000;
	-moz-box-shadow: 0px 1px 1px #000;
	box-shadow: 0px 1px 1px #000;
}
#slides {
	display: inline-block;
        vertical-align: middle;
        width: 49%;
}
#latest-posts {
	display: inline-block;
        vertical-align: middle;
        width: 49%;
}
.rslides {
  	position: relative;
  	list-style: none;
  	overflow: hidden;
  	width: 100%;
  	padding: 0;
  	margin: 0;
}

.rslides li {
  	-webkit-backface-visibility: hidden;
  	position: absolute;
  	display: none;
  	width: 100%;
  	left: 0;
  	top: 0;
}

.rslides li:first-child {
  	position: relative;
  	display: block;
  	float: left;
}

.rslides img {
  	display: block;
  	height: auto;
  	float: left;
  	width: 100%;
  	border: 0;
}
<div class="home-content">
		<div id="slides">
			<ul class="rslides">
  				<li><img src="http://placehold.it/350x150" alt=""></li>
  				<li><img src="http://placehold.it/500x150" alt=""></li>
			</ul>
		</div>
		<div id="latest-posts">
			<p>TEST TEXT</p>
		</div>
</div>

Upvotes: 1

Related Questions