Related
I swear I have checked quite thoroughly before posting this!
I am trying to center a FIXED div inside its parent div.
<div id="main">
<div id="fixed"></div>
</div>
CSS:
#main {
position: relative;
min-width: 400px; /* so it's fluid*/
background: #fff;
height: 100vh;
}
#fixed {
position: fixed;
/* center the div */
right: 0;
left: 0;
margin-right: auto;
margin-left: auto;
min-height: 10em;
width: 300px;
top: 0;
background-color: #af0000;
}
I wonder if it s possible to do with pure CSS. I can calculate the remaining space, divide it by two and change LEFT and RIGHT (i.e left: 6px; right: 6px; etc..) with JQuery but I'd like to avoid that if possible.
http://jsfiddle.net/PvfFy/980/
CSS calc() and vw (viewer width)
We can calculate measurements in CSS using this powerful addition to CSS, and combined with vw (and also vh) we can position elements quite precisely and responsively.
#main {
height: 200vh; /* force scrolling for demo */
}
#fixed {
position: fixed;
width: 300px;
height: 100px;
top: 50px;
left: calc( 50vw - 150px ); /* this is the magic */
background: blue;
}
<div id="main">
<div id="fixed"></div>
</div>
Since question was clarified (sorry for not paying closer attention)
Using position: sticky:
...will behave just like a relatively positioned element until the viewport scrolls...
Unfortunately it is (June 25, '17) less than well supported, but allows us to use margin: 0 auto; centering since #fixed is of a fixed width.
body {
margin: 0;
}
#main {
min-width: 400px; /* variable width */
width: 70vw; /* for demo */
height: 200vh;
background: rgba( 0, 255, 0, 0.2 );
}
#fixed {
position: sticky; /* this is the magic */
margin: 0 auto; /* along with this */
width: 300px;
height: 100px;
top: 50px;
background: cadetblue;
}
<div id="main">
<div id="fixed"></div>
</div>
#main {
position: relative;
min-width: 400px;
background: #fff;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
#fixed {
position: fixed;
min-height: 10em;
width: 300px;
background-color: #af0000;
}
<div id="main">
<div id="fixed"></div>
</div>
Edited answer.
I got this idea from Fred's answer. if it brings you closer go upvote his answer and not this one.
This doesn't seem to work in the viewer below unless you use fullscreen for some reason.
Maybe this will bring you closer.
You #main needs position: relative
And your #fixed needs position: sticky As well as top: 25% bottom: 25% left: 50% right: 50%
See example below:
/* start eesential CSS */
#main {
display: inline-block;
width: 30%;
min-height: 300vh;
height: auto;
position: relative;
float: right;
}
#fixed {
margin: 0 auto;
position: sticky;
top: 25%;
bottom: 25%;
left: 50%;
right: 50%;
}
/* end eesential CSS */
/* Start style fluff */
body {
margin: 0 auto;
}
#main {
background: darkred;
}
#fixed {
max-width: 100%;
height: 300px;
color: #999;
background: darkblue;
overflow-y: auto;
}
#fixed *,
#none-fixed * {
padding: 25px;
color: #999;
}
/* End style fluff */
<div id="main">
<div id="none-fixed">
<p>Lorem ipsum dolor sit amet, dolore persius at nam, ne audiam meliore quo. Vis no lobortis referrentur, ex per modo epicuri oportere. Ad primis pertinacia deterruisset eam Lorem ipsum dolor sit amet, an utinam dolorum vix, usu no sumo quaeque molestiae.
Pro mundi nemore at, tation ceteros repudiare ut eos. Usu latine ponderum deseruisse no, has doctus propriae cu. Et vim unum saepe, an commune adversarium duo. Mea ea legere doming probatus, alia mutat te ius. Lorem ipsum dolor sit amet, an utinam
dolorum vix, usu no sumo quaeque molestiae. Pro mundi nemore at, tation ceteros repudiare ut eos. Usu latine ponderum deseruisse no, has doctus propriae cu. Et vim unum saepe, an commune adversarium duo. Mea ea legere doming probatus, alia mutat
te ius. Lorem ipsum dolor sit amet, dolore persius at nam, ne audiam meliore quo. Vis no lobortis referrentur, ex per modo epicuri oportere. Ad primis pertinacia deterruisset eam Lorem ipsum dolor sit amet, an utinam dolorum vix, usu no sumo quaeque
molestiae. Pro mundi nemore at, tation ceteros repudiare ut eos. Usu latine ponderum deseruisse no, has doctus propriae cu. Et vim unum saepe, an commune adversarium duo. Mea ea legere doming probatus, alia mutat te ius. Lorem ipsum dolor sit amet,
an utinam dolorum vix, usu no sumo quaeque molestiae. Pro mundi nemore at, tation ceteros repudiare ut eos. Usu latine ponderum deseruisse no, has doctus propriae cu. Et vim unum saepe, an commune adversarium duo. Mea ea legere doming probatus,
alia mutat te ius.
</p>
</div>
<div id="fixed">
<p>Lorem ipsum dolor sit amet, dolore persius at nam, ne audiam meliore quo. Vis no lobortis referrentur, ex per modo epicuri oportere. Ad primis pertinacia deterruisset eam Lore molestiae. Pro mundi nemore at, tation
</p>
</div>
<div id="none-fixed">
<p>Lorem ipsum dolor sit amet, dolore persius at nam, ne audiam meliore quo. Vis no lobortis referrentur, ex per modo epicuri oportere. Ad primis pertinacia deterruisset eam Lorem ipsum dolor sit amet, an utinam dolorum vix, usu no sumo quaeque molestiae.
Pro mundi nemore at, tation ceteros repudiare ut eos. Usu latine ponderum deseruisse no, has doctus propriae cu. Et vim unum saepe, an commune adversarium duo. Mea ea legere doming probatus, alia mutat te ius. Lorem ipsum dolor sit amet, an utinam
dolorum vix, usu no sumo quaeque molestiae. Pro mundi nemore at, tation ceteros repudiare ut eos. Usu latine ponderum deseruisse no, has doctus propriae cu. Et vim unum saepe, an commune adversarium duo. Mea ea legere doming probatus, alia mutat
a deterruisset eam Lorem ipsum dolor sit amet, an utinam dolorum vix, usu no sumo quaeque molestiae. Pro mundi nemore at, tation ceteros repudiare ut eos. Usu latine ponderum deseruisse no, has doctus propriae cu. Et vim unum saepe, an commune adversarium
duo. Mea ea legere doming probatus, alia mutat te ius. Lorem ipsum dolor sit amet, an utinam dolorum vix, usu no sumo quaeque molestiae. Pro mundi nemore at, tation ceteros repudiare ut eos. Usu latine ponderum deseruisse no, has doctus propriae
cu. Et vim unum saepe, an commune adversarium duo. Mea ea legere doming probatus, alia mutat te ius. te ius.
</p>
</div>
<div id="none-fixed">
<p>Lorem ipsum dolor sit amet, dolore persius at nam, ne audiam meliore quo. Vis no lobortis referrentur, ex per modo epicuri oportere. Ad primis pertinacia deterruisset eam Lorem ipsum dolor sit amet, an utinam dolorum vix, usu no sumo quaeque molestiae.
Pro mundi nemore at, tation ceteros repudiare ut eos. Usu latine ponderum deseruisse no, has doctus propriae cu. Et vim unum saepe, an commune adversarium duo. Mea ea legere doming probatus, alia mutat te ius. Lorem ipsum dolor sit amet, an utinam
dolorum vix, usu no sumo quaeque molestiae. Pro mundi nemore at, tation ceteros repudiare ut eos. Usu latine ponderum deseruisse no, has doctus propriae cu. Et vim unum saepe, an commune adversarium duo. Mea ea legere doming probatus, alia mutat
te ius.
</p>
</div>
</div>
Here is a slightly silly (but working well and, unlike all the mentioned above pure CSS solutions- this one is a cross-browser one) solution with JQuery involved:
// getting initial data
var fixed = $('#fixed').width();;
var main = $('#main').width();
// getting left offset
var leftSpace = $('#main').offset().left;
// caltucating difference, dividing by two and adding left margin
var diff = (main - fixed) / 2 + leftSpace;
// updating CSS
$('#fixed').css('left', diff);
http://jsfiddle.net/PvfFy/983/
I'm trying to achieve gradual text fading effect at the bottom of the scrollable block. Also there must be an image behind this block so simply placing color (opacity) gradient over this block won't do and mix-blend-mode must be used.
The block has the following structure:
<div id="stage"><img ...></div>
<div class="layer">
<h2>...</h2>
<div class="text">
<div class="scroll-box">
<div class="container">...</div>
::after
</div>
<div class="scroll-tools">...</div>
</div>
</div>
.container contains some text. .scroll-tools contain custom scrollbar elements (rail and thumb). Here's jsfiddle.
Almost everything there looks as it should. Except scrollbar's rail is invisible due to it being black and mix-blend-mode: screen being applied to .layer and scrollbar's thumb has wrong color.
To exclude scrollbar from being blended I tried applying mix-blend-mode to .scroll-box but for some reason this does not work.
Question1: Is it possible to achieve the same effect with text in my case without affecting scrollbar? How?
Question2: Why mix-blend-mode doesn't work when being applied to .scroll-box (or .text)?
Blend mode: screen is not the only trick in the box.
You can also use hard-light.
Using this one, the color to get transparency is gray. And white and black are preserved
.test {
width: 300px;
height: 300px;
mix-blend-mode: hard-light;
}
.box {
width: 100px;
height: 100px;
background-color: white;
display: inline-block;
}
.box:first-of-type {
background-color: black;
}
.bkg {
background-image: linear-gradient(to top, lightblue, tomato);
}
p {
position: relative;
}
p:after {
content: "";
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
background-image: linear-gradient(to bottom, transparent 20%, rgb(128, 128, 128) 80%);
}
<div class="bkg">
<div class="test">
<p>Lorem ipsum dolor sit amet, mel et timeam deseruisse. Ceteros repudiandae mel ad. Id tantas graece maiorum usu. Nonumes efficiendi ius te, ea harum dictas nam. Eos harum iriure regione ut. Est labitur iudicabit urbanitas et. Inermis verterem maiestatis</p><p>
</p><div class="box"></div>
<div class="box"></div>
</div>
</div>
This doesn't have cross browser support but it's fun to play with
I think it matches what you described.
With that being said, this is not really a functional answer.
.main {
height: 200px;
width:300px;
margin:0 auto;
text-align:justify;
}
.wrap {
max-height: 100%;
overflow: auto;
padding:20px;
}
.inner {
-webkit-mask-image:
linear-gradient(to top, rgba(0, 0, 0, 0)5%,/** <---- Use this to determine the cutoff point **/
rgba(0, 0, 0, .25), rgba(0, 0, 0, .5), rgba(0, 0, 0, .75), rgba(0, 0, 0, 1))
}
<div class="main">
<div class="wrap">
<div class="inner">Lorem ipsum dolor sit amet, mel et timeam deseruisse. Ceteros repudiandae mel ad. Id tantas graece maiorum usu. Nonumes efficiendi ius te, ea harum dictas nam. Eos harum iriure regione ut. Est labitur iudicabit urbanitas et. Inermis verterem maiestatis
duo ea, vix an nostrud veritus democritum, duo zril platonem ad. Cum aeque blandit appareat an, cum cu minim iusto, pro aperiam reformidans ne. Vix bonorum legimus cu, has iusto appareat eu. Etiam iracundia no has, quo velit definitiones an. Ne
quo causae interesset scribentur, et pri affert dicant, est erant noster semper ei. Ea euismod antiopam electram ius, vero homero insolens ius ad, vel prima zril id. Ius te error apeirian. Vidisse intellegebat est eu, ut mea epicurei deserunt pertinacia,
cu lorem atomorum eos. ipsum dolor sit amet, mel et timeam deseruisse. Ceteros repudiandae mel ad. Id tantas graece maiorum usu. Nonumes efficiendi ius te, ea harum dictas nam. Eos harum iriure regione ut. Est labitur iudicabit urbanitas et. Inermis
verterem maiestatis duo ea, vix an nostrud veritus democritum, duo zril platonem ad. Cum aeque blandit appareat an, cum cu minim iusto, pro aperiam reformidans ne. Vix bonorum legimus cu, has iusto appareat eu. Etiam iracundia no has, quo velit
definitiones an. Ne quo causae interesset scribentur, et pri affert dicant, est erant noster semper ei. Ea euismod antiopam electram ius, vero homero insolens ius ad, vel prima zril id. Ius te error apeirian. Vidisse intellegebat est eu, ut mea
epicurei deserunt pertinacia, cu lorem atomorum eos.</div>
</div>
</div>
I need to create a curved, gradient box shadow in the shape of an ellipsis, which needs to be horizontally centered behind a div and offset to the bottom.
This is my markup:
<div class="about-tru">
<div class="container">
<h2 class="text-center heading">Welcome To TruCircles</h2>
<div class="row">
<div class="col-sm-10 col-sm-offset-1">
<div class="col-sm-4 text-center"><img src="img/trucircles-img.jpg" alt="trucircles-image" class="img-responsive"></div>
<div class="col-sm-7"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam facilisis dolor metus, sed feugiat diam finibus vitae. Sed dolor justo, consequat vel vulputate vitae, venenatis efficitur nibh. Vivamus blandit at nulla vel tempor. Nullam sodales nibh lorem, sed elementum lorem imperdiet sed. In in felis feugiat, laoreet nisl sit amet, blandit turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vestibulum dolor ut ligula ultricies, a ornare mauris interdum. Phasellus sollicitudin urna ac tortor elementum euismod.</p>
</div>
</div>
</div>
</div>
</div>
do you want a shadow of 50% width and in the middle of the div.about-tru, check the fiddle I've created -
http://jsfiddle.net/nw6vzd3L/
Something like this ?
.about-tru{
box-shadow : 0 0 20px;
border-radius: 6px;
margin : 10px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="about-tru">
<div class="container">
<h2 class="text-center heading">Welcome To TruCircles</h2>
<div class="row">
<div class="col-sm-10 col-sm-offset-1">
<div class="col-sm-4 text-center"><img src="http://tododepende.com/wp-content/uploads/2013/09/lorem_ipsum.gif" alt="trucircles-image" class="img-responsive"></div>
<div class="col-sm-7"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam facilisis dolor metus, sed feugiat diam finibus vitae. Sed dolor justo, consequat vel vulputate vitae, venenatis efficitur nibh. Vivamus blandit at nulla vel tempor. Nullam sodales nibh lorem, sed elementum lorem imperdiet sed. In in felis feugiat, laoreet nisl sit amet, blandit turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vestibulum dolor ut ligula ultricies, a ornare mauris interdum. Phasellus sollicitudin urna ac tortor elementum euismod.</p>
</div>
</div>
</div>
</div>
</div>
As far as I know you can't make an actual css-shadow in the shape of an ellipsis (which as far as I understand is what you want to achieve).
But you can fake it very well with a gradient background - for example on a pseudo-element:
CSS
.round_shadow {
position: relative;
border-radius: 5px;
position: relative;
border: 1px solid #f00;
background: #fff;
padding: 1em;
}
.round_shadow:after {
display: block;
content: "";
background: radial-gradient(ellipse at center, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 66%);
z-index: -1;
position: absolute;
top: 80%;
right: 10%;
left: 10%;
bottom: -30%;
}
Obviously you can adjust the top, left, right and bottom values to position the shadow wherever you want. Also note that you may need browser-prefixes for the gradient background to work if legacy browser support is an issue.
HTML
<div class="round_shadow">
<p>De illis, cum volemus. Quod totum contra est. In schola desinis. Quis est tam dissimile homini. Respondeat totidem verbis. Tollenda est atque extrahenda radicitus.</p>
<p>Quia nec honesto quic quam honestius nec turpi turpius. Atqui reperies, inquit, in hoc quidem pertinacem; Non minor, inquit, voluptas percipitur ex vilissimis rebus quam ex pretiosissimis. Nihilo beatiorem esse Metellum quam Regulum. Illa videamus, quae a te de amicitia dicta sunt. Quantum Aristoxeni ingenium consumptum videmus in musicis? Hos contra singulos dici est melius. Aliter enim explicari, quod quaeritur, non potest. Itaque haec cum illis est dissensio, cum Peripateticis nulla sane.</p>
<p>Cum ageremus, inquit, vitae beatum et eundem supremum diem, scribebamus haec. Quam si explicavisset, non tam haesitaret. Et nunc quidem quod eam tuetur, ut de vite potissimum loquar, est id extrinsecus; Quaesita enim virtus est, non quae relinqueret naturam, sed quae tueretur.</p>
</div>
.round_shadow {
position: relative;
border-radius: 5px;
position: relative;
border: 1px solid #f00;
background: #fff;
padding: 1em;
}
.round_shadow:after {
display: block;
content: "";
background: radial-gradient(ellipse at center, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 66%);
z-index: -1;
position: absolute;
top: 80%;
right: 10%;
left: 10%;
bottom: -30%;
}
<div class="round_shadow">
<p>De illis, cum volemus. Quod totum contra est. In schola desinis. Quis est tam dissimile homini. Respondeat totidem verbis. Tollenda est atque extrahenda radicitus.</p>
<p>Quia nec honesto quic quam honestius nec turpi turpius. Atqui reperies, inquit, in hoc quidem pertinacem; Non minor, inquit, voluptas percipitur ex vilissimis rebus quam ex pretiosissimis. Nihilo beatiorem esse Metellum quam Regulum. Illa videamus, quae a te de amicitia dicta sunt. Quantum Aristoxeni ingenium consumptum videmus in musicis? Hos contra singulos dici est melius. Aliter enim explicari, quod quaeritur, non potest. Itaque haec cum illis est dissensio, cum Peripateticis nulla sane.</p>
<p>Cum ageremus, inquit, vitae beatum et eundem supremum diem, scribebamus haec. Quam si explicavisset, non tam haesitaret. Et nunc quidem quod eam tuetur, ut de vite potissimum loquar, est id extrinsecus; Quaesita enim virtus est, non quae relinqueret naturam, sed quae tueretur.</p>
</div>
Edit
Ok, so elliptical was not not desired. To make a rectangular shadow I can think of two solutions, the primary difference between them consists in the options you have for positioning...
The first and probably simplest would be to just use a box-shadow with a negative spread (4th parameter):
.centered_shadow {
border-radius: 5px;
border: 1px solid #f00;
background: #fff;
padding: 1em;
box-shadow: 0 20px 10px -20px rgba(0,0,0,.3);
}
.centered_shadow {
border-radius: 5px;
border: 1px solid #f00;
background: #fff;
padding: 1em;
box-shadow: 0 60px 10px -40px rgba(0, 0, 0, 0.3)
}
<div class="centered_shadow">
<p>De illis, cum volemus. Quod totum contra est. In schola desinis. Quis est tam dissimile homini. Respondeat totidem verbis. Tollenda est atque extrahenda radicitus.</p>
<p>Quia nec honesto quic quam honestius nec turpi turpius. Atqui reperies, inquit, in hoc quidem pertinacem; Non minor, inquit, voluptas percipitur ex vilissimis rebus quam ex pretiosissimis. Nihilo beatiorem esse Metellum quam Regulum. Illa videamus, quae a te de amicitia dicta sunt. Quantum Aristoxeni ingenium consumptum videmus in musicis? Hos contra singulos dici est melius. Aliter enim explicari, quod quaeritur, non potest. Itaque haec cum illis est dissensio, cum Peripateticis nulla sane.</p>
<p>Cum ageremus, inquit, vitae beatum et eundem supremum diem, scribebamus haec. Quam si explicavisset, non tam haesitaret. Et nunc quidem quod eam tuetur, ut de vite potissimum loquar, est id extrinsecus; Quaesita enim virtus est, non quae relinqueret naturam, sed quae tueretur.</p>
</div>
The second method is basically the same as my suggestion for an elliptical shadow (which may give better control of the shadows position in some situations), except you give the pseudo-element a shadow instead of a gradient background, so:
.round_shadow {
border-radius: 5px;
position: relative;
border: 1px solid #f00;
background: #fff;
padding: 1em;
}
.round_shadow:after {
display: block;
content: "";
z-index: -1;
position: absolute;
top: 80%;
right: 25%;
left: 25%;
bottom: 0;
border-radius: 10px;
box-shadow: 0 30px 50px rgba(0,0,0,.3);
}
.round_shadow {
border-radius: 5px;
position: relative;
border: 1px solid #f00;
background: #fff;
padding: 1em;
}
.round_shadow:after {
display: block;
content: "";
z-index: -1;
position: absolute;
top: 80%;
right: 25%;
left: 25%;
bottom: 0;
border-radius: 10px;
box-shadow: 0 30px 50px rgba(0,0,0,.3);
}
<div class="round_shadow">
<p>De illis, cum volemus. Quod totum contra est. In schola desinis. Quis est tam dissimile homini. Respondeat totidem verbis. Tollenda est atque extrahenda radicitus.</p>
<p>Quia nec honesto quic quam honestius nec turpi turpius. Atqui reperies, inquit, in hoc quidem pertinacem; Non minor, inquit, voluptas percipitur ex vilissimis rebus quam ex pretiosissimis. Nihilo beatiorem esse Metellum quam Regulum. Illa videamus, quae a te de amicitia dicta sunt. Quantum Aristoxeni ingenium consumptum videmus in musicis? Hos contra singulos dici est melius. Aliter enim explicari, quod quaeritur, non potest. Itaque haec cum illis est dissensio, cum Peripateticis nulla sane.</p>
<p>Cum ageremus, inquit, vitae beatum et eundem supremum diem, scribebamus haec. Quam si explicavisset, non tam haesitaret. Et nunc quidem quod eam tuetur, ut de vite potissimum loquar, est id extrinsecus; Quaesita enim virtus est, non quae relinqueret naturam, sed quae tueretur.</p>
</div>
I have been struggling with placing a YouTube video within a responsive CSS column with other content. I have used the recommended fix for responsive video scaling from CSS Tricks and other places. It works fine in Firefox, but the video disappears in Chrome and Safari. I have also tried using http://fitvidsjs.com but without success. Does anyone know of a way to get videos to appear properly within a CSS column with other content? I have also tried to work with other embedded non-video content (Issuu.com publications) and had the same problem.
Here is the CSS and HTML:
#content {
margin-left: auto;
margin-right: auto;
width: 100%;
overflow: hidden;
*zoom: 1;
overflow: hidden;
position: relative;
}
#content .content-columns {
display: inline;
float: left;
margin-left: 5%;
margin-right: 5%;
width: 90%;
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
-moz-column-rule: 1px solid #ECECFB;
-webkit-column-rule: 1px solid #ECECFB;
column-rule: 1px solid #ECECFB;
-moz-column-gap: 26px;
-webkit-column-gap: 26px;
column-gap: 26px;
}
.mod-embed-video{
position: relative;
padding-bottom: 56.25%;
padding-top: 35px;
height: 0;
overflow: hidden;
}
.mod-embed-video iframe, .mod-embed-video object, .mod-embed-video embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div id="content">
<div class="content-columns">
<p>Lorem ipsum dolor sit amet, quodsi salutandi at mel, dicam accusamus ut mel. Tation omittam singulis nec no. Ea mea ludus corpora efficiendi. Vel id nihil legendos pertinacia, prima vocibus ut usu. Omnis delicata ut sea, lorem philosophia ex eos, an elit accommodare quo.</p>
<p>Et vim vero assum error. Sumo tantas an sit, magna dicta an mel, ut wisi feugait consequat eum. An ius recteque dignissim assueverit. Ius homero populo expetenda te, an sit amet possit pertinacia. Sed aeterno perpetua ea. Eam cu ullum dicta, commodo appareat id pro.</p>
<p>Mea cu commodo aeterno labitur, ius dolorem intellegat disputando ea, cum eros harum no. Errem principes delicatissimi in vel. Evertitur forensibus eu sea, te has eirmod tractatos consetetur. Te has vitae mandamus suscipiantur, duo labores mentitum principes eu.</p>
<p>Ad elitr vocibus vim, agam oportere est et, his eu elit facilisi tacimates. Soleat torquatos deterruisset mel ut, in tollit ocurreret his, vis et nulla epicurei vituperata. Tation euismod accusam sea in, sed modo dico ut. Pri ignota putant iudicabit ex.</p>
<p>Et vim vero assum error. Sumo tantas an sit, magna dicta an mel, ut wisi feugait consequat eum. An ius recteque dignissim assueverit. Ius homero populo expetenda te, an sit amet possit pertinacia. Sed aeterno perpetua ea. Eam cu ullum dicta, commodo appareat id pro.</p>
<div class="mod-embed-video">
<iframe width="550" height="309" src="//www.youtube.com/embed/9-5MVFMWSh0?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
<p>Et vim vero assum error. Sumo tantas an sit, magna dicta an mel, ut wisi feugait consequat eum. An ius recteque dignissim assueverit. Ius homero populo expetenda te, an sit amet possit pertinacia. Sed aeterno perpetua ea. Eam cu ullum dicta, commodo appareat id pro.</p>
</div>
</div>
because you use float:left and it breaks your responsive iframe approach because position is set to absolute, therefore you get nothing. You need to find another solution where either you use another approach for columns, probably using Jquery, because column-count won't work and quite honestly I can't think of any pure html5+css approach that will allow automatic columns + responsive video
I want to add a fixed sidebar like in the picture below.
How is that possible?
Appreciate any suggestion.
Solution
used to this
fixed position
.sidebar{
position:fixed;
left:0;
width:250px; // width change to according your left bar side
top:0;
bottom:0;
}
Demo
.SomeClass { position: fixed }
This fiddle might solve your problem, with right column being flexible and left column fixed
http://jsfiddle.net/R5TZH/
<div class="container">
<div class="columns">
<div class="right-col">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum
</div>
</div>
<div class="left-col">
<a class="selected" href="#">05 <br><strong>Today</strong></a>
06 <br><strong>TOM</strong>
07 <br><strong>MON</strong>
08 <br><strong>TUE</strong>
09 <br><strong>WED</strong>
08 <br><strong>THU</strong>
09 <br><strong>FRI</strong>
</div>
</div>
CSS:
.container {
width: 100%;
}
.left-col {
background: none repeat scroll 0 0 #434345;
float: left;
margin-left: -100%;
padding: 10px;
width: 80px;
}
.left-col a {
background: none repeat scroll 0 0 #FFFFFF;
border-radius: 10px 10px 10px 10px;
color: #000000;
float: left;
font-size: 18px;
height: 50px;
margin-bottom: 10px;
padding: 10px;
text-align: center;
width: 60px;
}
.columns {
float: left;
width: 100%;
}
.right-col {
margin-left: 100px;
background:red;
height:400px;
}
for fixed side bar, style
position:fixed;
this will do but not in chrome, so you may use this
position:absolute;
top:0;
left:0;
bottom:0;
width:180px;// you may change as per your requirement
this works in all browsers :)
Edit : updated fiddle with content div
http://jsfiddle.net/MarmeeK/nkprH/5/
I hope this will do, for more answer post some of your work in details, thank you