Solved

Wrapping 2 Divs in a Container

Posted on 2014-04-17
8
555 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
Comment Utility
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 45

Accepted Solution

by:
aikimark earned 500 total points
Comment Utility
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 33

Expert Comment

by:Slick812
Comment Utility
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 52

Expert Comment

by:Scott Fell, EE MVE
Comment Utility
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

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Suggested Solutions

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
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.
Use Wufoo, an online form creation tool, to make powerful forms. Learn how to selectively show certain fields based on user input using rules to gather relevant information and data from your forms. The rules feature provides you with an opportunity…

771 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now