Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Wrapping 2 Divs in a Container

Posted on 2014-04-17
8
Medium Priority
?
605 Views
Last Modified: 2014-05-28
I am trying to create a slide show with a left and right content blocks side to accommodate different content on each side.  Like this example
http://themeforest.net/item/construct-responsive-html5css3-template/full_screen_preview/2839226

But I cannot get both divs to populate properly into the container. I have tried floating, nesting, or not nesting, but i can't get this work etc..

Here is my code snippet  from the html
<div class="wraper">

   <div class="bx_wrapper">           

          <div class="bxslider">



<div class="left"> <img src="images/myslide1.png"/>

<div class="right"> content
</div> </div>




<div class="left"> <img src="images/myslide2.png" alt=""/>
<div class="right">content </div></div>

  

</div>  <!--slider--> 
</div>   <!--bx wrapper--> 

</div> <!--wraper--> 

___________________________________



wraper{
width: 960px;
margin: 0 auto;
position: relative
}
.bx_wrapper {
	position: relative;
	

	*zoom: 1;
	width:960px;
    background:url(../../images/bxslider/bg.png) no-repeat;width:956px;min-height:358px;padding:3px 0 5px 0;margin:20px 0 0 0;
	list-style: none;

overflow: hidden;

}
 



.bx_wrapper .bxslider .left {

position: absolute; top: 0px; 
width: 560px;
min-height:275px;
left:560px;
padding:0 159px 0 5px;
}

.bx_wrapper .bxslider .right {
	
	width: 387px;
	margin: 0px;
	padding:0px;
	color: #fff;
	position: absolute;
	top: 0px;
	left: 562px;	
	background:#FFF;
	min-height:325px;
	
}

Open in new window

0
Comment
Question by:LT1415
8 Comments
 

Author Comment

by:LT1415
ID: 40007794
I am using Dreamweaver. The slideshow sits in a web page which is responsive.
I had hoped to see an area to post for HTML and CSS, but did not find that specfically
0
 
LVL 46

Accepted Solution

by:
aikimark earned 2000 total points
ID: 40007957
You'll need to play with your image file references, but at least I'm seeing some side-by-side content displayed.  What browser are you using?  I get different results when I switch browsers.
<HTML>
<BODY>
<div class="wrapper">

   <div class="bx_wrapper">           

		<div class="bxslider">

			<div class="left"> <img src="Message4.png"/></div>

			<div class="right">inside wraper content</div> 
		</div>
	</div>
</div> <!--wraper--> 


<div > <img src="image002.png"/>
<div >outside wrapper content</div></div>

<style>
.wrapper{
width: 960px;
margin: 0 auto;
position: relative
}
.bx_wrapper {
	position: relative;
	zoom: 1;
	width:960px;
}
 
.bx_wrapper.bxslider.left {
	position: relative; top: 0px; 
	width: 560px;
	min-height:275px;
	left:0px;
	padding:0px;
	overflow: hidden;
}

.bx_wrapper.bxslider.right {
	position: relative; top: 0px;
	width: 387px;
	min-height:325px;
	left: 562px;	
	padding:0px;
	overflow: hidden;
}
</style>
</BODY>
</HTML>

Open in new window

0
 
LVL 34

Expert Comment

by:Slick812
ID: 40008129
greetings LT1415, , Your HTML for the DIV , makes no sense to me for any arrangement of a side by side display. And the Style you have has got to be completely wrong. as you have this -
.bx_wrapper .bxslider .left {

And I can NOT see that the three styles for .bx_wrapper .bxslider   and  .left , have that in common.

Here is my UN-Informed attempt at some side be side arrangement, THAT is responsive to size changes in width -
<style>
.wraper{
width:99%;
max-width:960px;
text-align:center;
margin: 0 auto;
}

.bxslider {
width:99.7%;
overflow: hidden;
}

.insert {
display:-moz-inline-box;-moz-box-orient:vertical;display:inline-block;vertical-align:top;zoom:1;*display:inline;
width: 49%;
min-height:275px;

}
</style>
<div class="wraper">
  <div class="bxslider">
    <div class="insert">TOP<br /><img src="images3/blupat1.gif" width="174" height="174" alt="pattern" />
    </div>  <!--slider--> 
    <div class="insert"> content</div>
  </div>
  <div class="bxslider">
    <div class="insert">SECOND<br /><img src="images3/blupat1.gif" width="174" height="174" alt="pattern" />
  </div>
  <div class="insert"> content<br />more</div>
  </div>
  </div>

Open in new window

 BUT I have no idea for the requirements of style for a "bxslider" thing.
0
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 40010542
Why reinvent the wheel...  That sample uses one by one from code canyon and will set you back a big $10 bucks.  http://codecanyon.net/item/jquery-responsive-onebyone-slider-plugin/684613

There are a lot of jquery sliders out there to make your life easier  

http://wowslider.com/
http://bxslider.com/
http://amazingslider.com/

Looking at boxslider, it looks very easy to use
<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="/js/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="/lib/jquery.bxslider.css" rel="stylesheet" />

Open in new window

$(document).ready(function(){
  $('.bxslider').bxSlider();
});

Open in new window

<ul class="bxslider">
  <li><img src="/images/pic1.jpg" /></li>
  <li><img src="/images/pic2.jpg" /></li>
  <li><img src="/images/pic3.jpg" /></li>
  <li><img src="/images/pic4.jpg" /></li>
</ul>

Open in new window


They are all documented nicely.  Take a look and if you have troubles with one, post back.
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Suggested Courses

885 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question