Solved

Wrapping 2 Divs in a Container

Posted on 2014-04-17
8
583 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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 500 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 53

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

Learn how to optimize MySQL for your business need

With the increasing importance of apps & networks in both business & personal interconnections, perfor. has become one of the key metrics of successful communication. This ebook is a hands-on business-case-driven guide to understanding MySQL query parameter tuning & database perf

Question has a verified solution.

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

Real-time is more about the business, not the technology. In day-to-day life, to make real-time decisions like buying or investing, business needs the latest information(e.g. Gold Rate/Stock Rate). Unlike traditional days, you need not wait for a fe…
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Wufoo.com provides powerful tools for surveying targeted groups, and utilizing data from completed surveys to find trends, discover areas of demand or customer expectation, and make business decisions on products or services.

624 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