Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Wrapping 2 Divs in a Container

Posted on 2014-04-17
8
Medium Priority
?
600 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 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 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

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Question has a verified solution.

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

This article discusses four methods for overlaying images in a container on a web page
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
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…
Learn how to set-up custom confirmation messages to users who complete your Wufoo form. Include inputs from fields in your form, webpage redirects, and more with Wufoo’s confirmation options.

704 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