Placing 3 elements in a
, side by side

Question

I want to do this little application :

So I want to place 2 buttons on each sides of the video.

Here's the HTML code :

<div id="slideshow" class="blockdesign">
  <input type="button" class="buttonChangeVideo" value="<" />
  <video controls src="videotest.mp4">Just a test</video>
  <input type="button" class="buttonChangeVideo" value=">" />
</div>

And here's the CSS code I wrote :

.blockdesign /* the div embracing the 3 other elements */
{
    margin: 0 5px 0 5px;
    display: inline-block;
}

#slideshow
{
    width: 854px;
    height: 100%;
}

#slideshow video /* the video */
{
    width: 84%;
    display: inline-block;
    margin: 0 auto 0 auto;
}

#slideshow .buttonChangeVideo /* the buttons */
{
    display: inline-block;
    width :8%;
    height : 100%;
    margin: 0;
}

As you can see I use 'display: inline-block;' on every element.

But when I try the code I get this :

What did I wrong?

Thank you very much for your time !

score 3 · Answer 1 · answered Dec 07 '15 at 03:57

CSS Tables to the rescue!

Better than floats, they force all your elements to stay together and you can style them like proper table-based UI toolkits you are used to in desktop environments!

HTML:

<div id="slideshow" class="blockdesign">
  <a type="button" class="buttonChangeVideo" >&lt;</a>
  <video controls src="videotest.mp4">Just a test</video>
  <a type="button" class="buttonChangeVideo" >&gt;</a>
</div>

CSS:

#slideshow {
  display:table-row;
}
#slideshow > * {
  display:table-cell !important;
  height:100%;
  vertical-align:middle;
  padding:2px;
  background:gray;
  color:white;
}

See it in action.

score 1 · Accepted Answer · answered Dec 07 '15 at 00:49

1

In order to place three elements side by side, I recommend adding a float: left; to the elements. I have demonstrated how you might do this on this jsfiddle. As you can see, I have removed the display: inline-block; from each of the classes and added the float: left;. A note, the elements may wrap if the width specified is too small to contain all three elements.

answered Dec 07 '15 at 00:49

Daniel Burkhart

2,569
2
20
23

Thak you very much, your solution works very well :) – Pascal Goldbach Dec 07 '15 at 09:40

score 0 · Answer 3 · answered Dec 07 '15 at 03:19

use css position property, this will help you a lot.. here is your modified code

(please don't forget to give +1)

/*  
   crackit9.blogspot.in   
   free blogger widgets

*/

#containner {

  position: absolute;

}

#video {

  width: 640px;

  height: 360px;

}

#buttonL {

  position: absolute;

  width: 5%;

  height: 100%;

  left: 0%;

}

#buttonR {

  position: absolute;

  width: 5%;

  height: 100%;

  right: 0%;

}

<div id="containner">
  <button id="buttonL">&lt;</button>
  <button id="buttonR">&gt;</button>
  <video id="video" controls src="videotest.mp4">Just a test</video>
</div>

I'm downvoting this for the simple reason it changes the order of the elements which alters the semantics of the page. The previous and next buttons have good reason to be on either side of the middle element from a structural point of view. — , Dec 07 '15 at 04:00

Placing 3 elements in a , side by side

3 Answers3

Placing 3 elements in a
, side by side