как положить 2 divs влево и вправо на одном раздражении?

Question

как показано на картинке, я пытаюсь, но ничего не происходит, что я должен делать?

слайдер

я нахожусь здесь

  <div class="carousel-inner" role="listbox"> 

     <div class="item active pic"> 

      <div class="container1 container"> 

      <h1><a href="#">A WORLD OF TOMORROW </a></h1> 
        <h2><a href="#">SEEKING INSPIRATION AND EQUILIBRIUM IAGE</a></h2> 
        <p><a href="#">Bringing together members of the public with leaders and experts from around the globe to discuss emerging issues and envision a brighter future together</a></p> 
     </div> 
     <img src="img/SOT_banner1.jpg" > 
     </div> 
      <div class="item pic"> 
       <div class="container1 container"> 
       <h1><a href="#">A WORLD OF TOMORROW </a></h1> 
        <h2><a href="#">SEEKING INSPIRATION AND EQUILIBRIUM IN A NEW AGE</a></h2> 
        <p><a href="#">11-12 March, 2017</a></p> 
       </div> 
       <img src="img/SOT_banner2.jpg" > 
       </div> 


      <div class="item pic"> 
       <div class="container1 container"> 
       <h1><a href="#">A WORLD OF TOMORROW </a></h1> 
        <h2><a href="#">SEEKING INSPIRATION AND EQUILIBRIUM IN A NEW AGE</a></h2> 
        <p><a href="#">Pak-China Friendship Centre</a></p> 
      </div> 
       <img src="img/SOT_banner3.jpg" > 
      </div> 

      <div class="item pic"> 
       <div class="container1 container"> 
       <h1><a href="#">A WORLD OF TOMORROW </a></h1> 
        <h2><a href="#">SEEKING INSPIRATION AND EQUILIBRIUM IN A NEW AGE</a></h2> 
        <p><a href="#">More than 40 panel discussions, debates, interactive workshops, performances and much, much more</a></p> 
      </div> 
      <img src="img/SOT_banner4.jpg" > 
      </div> 


      </div> 

      </div> 
     </div> 

     <!-- slider--> 

CSS здесь

 .container1{ 
      position:absolute; 
      width:40%; 
      height:auto; 
      margin-top:150px; 
      text-align:center;} 
      .pic{ 
       width:100%; 
       position:relative;} 
     .upper{ 
      position:relative; 
      width:30%; 
      height:500px; 
      background-color:#F00; 
      float:right;} 

Answer 1

сайт, который вы пытаетесь скопировать из построен на Joomla. Поэтому они, вероятно, используют Dj-imageslider в качестве слайдера вместе с Gk_university template. Чтобы эта тема и плагин работали, вам нужно установить Joomla или найти альтернативное решение с другой CMS (если вы после CMS).

Код, который вы предоставили, явно не содержит дополнительных пояснений.

Если у вас есть только слайдер, посмотрите на Bootstrap carousel example. Вот пример код, чтобы хвалить внешнюю ссылку:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div id="myCarousel" class="carousel slide" data-ride="carousel"> 
 
    <ol class="carousel-indicators"> 
 
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
 
    <li data-target="#myCarousel" data-slide-to="1"></li> 
 
    <li data-target="#myCarousel" data-slide-to="2"></li> 
 
    </ol> 
 
    <div class="carousel-inner" role="listbox"> 
 
    <div class="item active"> 
 
     <img class="first-slide" src="http://cdn.images.express.co.uk/img/dynamic/128/590x/kittens-615454.jpg" alt="First slide"> 
 
     <div class="container"> 
 
     <div class="carousel-caption"> 
 
      <h1>Example headline.</h1> 
 
      <p>Note: If you're viewing this page via a <code>file://</code> URL, the "next" and "previous" Glyphicon buttons on the left and right might not load/display properly due to web browser security rules.</p> 
 
      <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="item"> 
 
     <img class="second-slide" src="http://cdn.images.express.co.uk/img/dynamic/128/590x/kittens-615454.jpg" alt="Second slide"> 
 
     <div class="container"> 
 
     <div class="carousel-caption"> 
 
      <h1>Another example headline.</h1> 
 
      <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> 
 
      <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="item"> 
 
     <img class="third-slide" src="http://cdn.images.express.co.uk/img/dynamic/128/590x/kittens-615454.jpg" alt="Third slide"> 
 
     <div class="container"> 
 
     <div class="carousel-caption"> 
 
      <h1>One more for good measure.</h1> 
 
      <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> 
 
      <p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>