Solved

Wrapping 2 Divs in a Container

Posted on 2014-04-17
8
564 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 45

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 33

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 52

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

PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Java script read and write file - save as location 8 45
SlickNav Menu Plugin Not appearing on mobile 6 34
Html test in IIS 4 20
QQ problem 22 23
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

810 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