html - iframes escaping css columns in Chrome -


i trying set iframes inside grid 3 columns.

html

<div id="blogposts">      <div class="blogpost">         <iframe width="100%" src="https://www.youtube.com/embed/yqew9_5kuri" frameborder="0" allowfullscreen=""></iframe>         <div class="title">youtube video</div>         <div class="time">11th may, 2015</div>         <div class="info">this best youtube video ever!</div>     </div>      ... </div>

css

#blogposts {     -moz-column-count: 3;     -moz-column-gap: 10px;     -webkit-column-count: 3;     -webkit-column-gap: 10px;     column-count: 3;     column-gap: 10px;     width: 100%; } .blogpost {     display: inline-block;     margin-bottom: 20px;     width: 100%; }

what like:

enter image description here

what want like:

enter image description here

but problem is, iframe jumps out of grid. here my jsfiddle show happening. can see first 'box' works fine (as expected) next 2 boxes right, iframe escapes?

modified code adding position blogpost class.

#blogposts {      -moz-column-count: 3;      -moz-column-gap: 10px;      -webkit-column-count: 3;      -webkit-column-gap: 10px;      column-count: 3;      column-gap: 10px;    }  .blogpost {        display: inline-block;    margin-bottom: 20px;    width: 32.1%;    position: absolute;  }    .blogpost:nth-child(1){  left: 34.2%;  }  .blogpost:nth-child(2){  left: 67.1%;  }
<div id="blogposts">      <div class="blogpost">          <iframe width="100%" src="https://www.youtube.com/embed/yqew9_5kuri" frameborder="0" allowfullscreen=""></iframe>          <div class="title">youtube video</div>          <div class="time">11th may, 2015</div>          <div class="info">this best youtube video ever!</div>      </div>            <div class="blogpost">          <iframe width="100%" src="https://www.youtube.com/embed/yqew9_5kuri" frameborder="0" allowfullscreen=""></iframe>          <div class="title">youtube video</div>          <div class="time">11th may, 2015</div>          <div class="info">this best youtube video ever!</div>      </div>            <div class="blogpost">          <iframe width="100%" src="https://www.youtube.com/embed/yqew9_5kuri" frameborder="0" allowfullscreen=""></iframe>          <div class="title">youtube video</div>          <div class="time">11th may, 2015</div>          <div class="info">this best youtube video ever!</div>      </div>  </div>

will solve problem?


Comments

Post a Comment

Popular posts from this blog

IF statement in MySQL trigger -

this query code in mysql trigger. if 1=2 select 'yes'; else select 'no'; end if; but has following error: if '1'='2' select 'yes' error code: 1064. have error in sql syntax; check manual corresponds mysql server version right syntax use near 'if '1'='2' select 'yes'' @ line 1 0.000 sec what solution?
Read more

c++ - What does MSC in "// appease MSC" comments mean? -

i run across // appease msc in c++ comments, e.g. here : const int& array::operator[](int offset) const { int mysize = getitssize(); if (offset >= 0 && offset < getitssize()) return ptype[offset]; throw xboundary(); return ptype[offset]; // appease msc! } what msc stand ? the author means microsoft's compiler, more formally known msvc.
Read more

javascript - Blogger related post gadget image Resize s72-c [ Need Expert Help ] -

i run blogger blog , use follow code javascript code (requires no jquery) show related post labels/categories of post. <script type='text/javascript'> var defaultnoimage=&quot;http://1.bp.blogspot.com/-m72rpguntq0/vuokijudn_i/aaaaaaaaboi/lq18sceunsg/w72/favicon-tik.png&quot;; var maxresults=16; var splittercolor=&quot;#d4eaf2&quot;; var relatedpoststitle=&quot;related posts&quot;; </script> <script type='text/javascript'>//<![cdata[ var relatedtitles = new array(); var relatedtitlesnum = 0; var relatedurls = new array(); var thumburl = new array(); function related_results_labels_thumbs(json) { (var = 0; < json.feed.entry.length; i++) { var entry = json.feed.entry[i]; relatedtitles[relatedtitlesnum] = entry.title.$t; try { thumburl[relatedtitlesnum] = entry.media$thumbnail.url } catch (error) {...
Read more