Put 2 divs besides each other

Question

I want to put 2 divs (The slider and the #besch (descritpion). the slider is at the left, which i have done, the description isnt working :(

I saw that i have to use both and set them the same float as far as I understood, still its not working

jsfiddel:

http://jsfiddle.net/h4vo3p12/

HTML:

<body>
<div id='headline'>
<h1> Test </h1>
</div>
<br>
<br>

<div class="wrapper">

  <div class="slider">

    <!-- Works with as many slides as are added in-->

    <input type="radio" name="slide-switches" id="slide_text" checked class="slide-switch">
    <label for="slide_text" class="slide-label">Slide Text</label>
    <div class="slide-content">
      <img src="http://2.bp.blogspot.com/-CmBgofK7QzU/TVj3u3N1h2I/AAAAAAAADN8/OszBhGvvXRU/s640/tumblr_lg7h9gpbtP1qap9qio1_500.jpeg">
    </div>

    <input type="radio" name="slide-switches" id="slide_image" class="slide-switch">
    <label for="slide_image" class="slide-label">Slide Image</label>
    <div class="slide-content">
      <img src="http://2.bp.blogspot.com/-CmBgofK7QzU/TVj3u3N1h2I/AAAAAAAADN8/OszBhGvvXRU/s640/tumblr_lg7h9gpbtP1qap9qio1_500.jpeg">
    </div>

   <input type="radio" name="slide-switches" id="slide_image2" class="slide-switch">
    <label for="slide_image2" class="slide-label">Slide Image</label>
    <div class="slide-content">
      <img src="http://2.bp.blogspot.com/-CmBgofK7QzU/TVj3u3N1h2I/AAAAAAAADN8/OszBhGvvXRU/s640/tumblr_lg7h9gpbtP1qap9qio1_500.jpeg">
    </div>

  </div>

  <p>Paragraph outside slider</p>

</div>

<div id="ubba">
<p>
Überschrift:
</p>
</div>

<div id="besch">

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

</p>

</div>


</body>

CSS:

@charset "utf-8";
@import url(http://fonts.googleapis.com/css?family=Open+Sans:700,400);
body, html {
    padding: 0; 
    margin: 0;
}
h1 {
    padding: 0;
    margin: 0;
}

#headline {
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 24px;
    position: relative;
    text-align: center;
    color: #000000;
    padding-top: 1%;


}

#bild {

}

#bildweg {
    }

#ubba {
    font-family: "Open Sans", sans-serif;
    font-size: 20px;
    font-weight: bold;
    text-align: center; 
    margin-top: auto;
    float:left;
}
#besch {
font-family: "Open Sans", sans-serif;
    font-size: 20px;
    text-align: right;
    padding-right: 0%;  
    padding-left: 3%;
    margin-right: 0%;
    margin-left: 0%;
    float: left;
}

* {
    box-sizing: border-box;
    margin: 0px;
    height: auto;
    width: auto;
}
body {
  font-family: "Open Sans";
  line-height: 1.618em;
  background: #ecf0f1;
  color: #444;
}
img {
  max-width: 100%;
  height: auto;
}
.wrapper {
  max-width: 500px;
  width: 100%;
  margin: 0 ;
}
.slider {
  background: #fff;
  position: relative;
  margin: 0;
  overflow: hidden;
  padding-bottom: 2.5rem;
  border: 0.25rem solid #95a5a6;
}
.slider::after {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  content: '';
  display: block;
  background: #34495e;
  height: 3rem;
}
.slide-switch {
  display: none;
}
.slide-label {
  position: absolute;
  bottom: 1rem;
  display: block;
  z-index: 5;
  height: 1rem;
  width: 1rem;
  text-indent: 1rem;
  overflow: hidden;
  background: #2980b9;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.25s;
}
.slide-label:nth-of-type(1) {
  left: 1rem;
}
.slide-label:nth-of-type(2) {
  left: 2.5rem;
}
.slide-label:nth-of-type(3) {
  left: 4rem;
}
.slide-label:nth-of-type(4) {
  left: 5.5rem;
}
.slide-label:nth-of-type(5) {
  left: 7rem;
}
.padded {
  padding: 1rem 2rem;
}
.slide-content {
  width: 100%;
  background: #fff;
  float: left;
  margin-right: -100%;
}
.slide-switch:checked + .slide-label {
  background: #3498db;
}
.slide-switch:not(:checked) + .slide-label + .slide-content {
  opacity: 0;
  transition: opacity 0.35s;
  pointer-events: none;
}
.slide-switch:checked + .slide-label + .slide-content {
  animation: slide 1s;
}
@keyframes slide {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}
        #slider-image-4:target ~ .image-holder
        {
            left: -1500px;
        }

        .button-holder
        {
            position: relative;
            top: -20px;
        }

        .slider-change
        {
            display: inline-block;
            height: 10px;
            width: 10px;
            border-radius: 10px;
            background-color: #ffffff;
        }

You may want to try on smaller code, to better understand what you're doing. http://www.w3schools.com/css/css_inline-block.asp — Fundhor, Nov 28 '15 at 17:43
Possible duplicate of [How to place two divs next to each other?](http://stackoverflow.com/questions/5803023/how-to-place-two-divs-next-to-each-other) — Rob, Nov 28 '15 at 18:07

score 0 · Answer 1 · answered Nov 28 '15 at 18:01

I think following fiddle will solve your problem, i just edited your fiddle a bit and its working fine :)

CSS:
#besch {
font-family: "Open Sans", sans-serif;
    font-size: 20px;
    text-align: right;
    padding-right: 0%;  
    padding-left: 3%;
    margin-right: 0%;
    margin-left: 0%;
    display:inline-block;
    width:300px;
    vertical-align:top;
}
.wrapper {
  max-width: 400px;
 /*  width: 100%; */
  margin: 0 ;
  display:inline-block;
}

http://jsfiddle.net/gopal280377/h4vo3p12/1/

Put 2 divs besides each other

1 Answers1