CODEWITHSUNDEEP
jquery
Oleg Vegan
Oleg Vegan

Reputation: 35

A div right next to another

I've got 3 divs

1 - wrapper

2 - video (I want it to be in the center of the wrapper all the time)

3 - video suggestions (I want it to be right next to the video even when you resize the video or the window)

<div id="videoWrapper">
    <div id="videoBlock">            
        <iframe stuff></iframe>
    </div>
    <div id="videoSuggestions"></div>
</div>

I know that I have to find the offset of the 2nd div somehow, but my tiny human brain can't handle this. Fiddle demo

Upvotes: 1

Views: 57

Answers (4)

Abhishek Pachal
Abhishek Pachal

Reputation: 554

You dont't need to change your css.    
The errors are in jquery.
Three reasons of not working.

1st>You forgot to give '#' in $('videoblack').  
2nd>Multiple event will appear in 'bind' function(not 'on') .   
3rd>Event will on 'window' not 'document'. 

So the JQuery code will be like this

$(window).bind('load scroll resize', function () {    
    var pos = $('#videoBlock').position();    
    var width = $('#videoBlock').outerWidth();    
    $("#videoSuggestions").css({    
        position: "absolute",    
        top: (pos.top + 10) + "px",    
        left: (pos.left + width + 10) + "px"    
    }).show();   
});

Upvotes: 0

isherwood
isherwood

Reputation: 61114

I'd take a page from Twitter Bootstrap and use some fairly basic CSS:

#videoBlock {
    width: 67%;
    float: left;
}
#videoSuggestions {
    float: right;
    width: 33%;
}
.video-embed {
    padding: 0;
    padding-bottom: 56.25%;
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    height: 0;
    overflow: hidden;
}
.video-embed iframe {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

Demo

Upvotes: 0

Jeremy Thille
Jeremy Thille

Reputation: 26400

Easy using just a few CSS properties : (Run it below)

#videoWrapper {
  height: 400px;
  width: 70%;
  margin: 0 auto;
}
#videoWrapper *{
    display : inline-block;
    vertical-align : top;
    height: 100%;
  
    
}
#videoWrapper iframe{
    border: green solid 1px;
    width : 69%;
}

#videoSuggestions {
  background-color: green;
    width: 30%;
}
<div id="videoWrapper">           
        <iframe width="100%" height="100%" src="//www.youtube.com/embed/<?= $videoId[1] ?>?vq=hd720&showinfo=0&rel=0&iv_load_policy=3" frameborder="0" allowfullscreen></iframe><div id="videoSuggestions"></div>
</div>

Upvotes: 0

void
void

Reputation: 36703

Use CSS Only to do this.

Apply this CSS to the main div, It will do all your job. Give it a shot.

#videoWrapper{
display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */  
}

Upvotes: 2

Related Questions