Two Bootstrap columns when left is fixed

Two Bootstrap columns when left is fixed - css

I am trying to get a two column layout where left column has a fixed position. My problem is that the right column's content goes underneath the fixed one. Here is a basic structure:
<body style="overflow:auto">
<div class="container-fluid">
<div class="row">
<div class="col-xs-2 left">
1234
</div>
<div class="col-xs-10">
<div>
Content
</div>
</div>
</div>
</div>
</body>
CSS:
.left {
position: fixed;
z-index: 2;
width: 100px;
height: 100%;
background-color: #fff;
}
Fiddle

Just add margin-left:100px(width of the left div) to the second div.it should fix your problem
check this snippet
.left {
position: fixed;
z-index: 2;
width: 100px;
height: 100%;
background-color: red;
}
.col-xs-10 {
margin-left: 100px;
}
<body style="overflow:auto">
<div class="container-fluid">
<div class="row">
<div class="col-xs-2 left">
1234
</div>
<div class="col-xs-10">
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborumAt vero eos et accusamus et iusto odio dignissimos
ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.
Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus
autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur
aut perferendis doloribus asperiores repellat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborumAt vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia
deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus,
omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a
sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
</div>
</div>
</div>
</div>
</body>
Hope it helps

Related

Bug in code to transition video to full-screen on hover

I'm working on coding a video effect that scales a video to the full viewport when hovering over it (the final implementation will not use the hover event. I'm just working on the CSS transitions between the two states). But the problem is that when I hover over the video, the height and width change smoothly, but the video position instantly jumps to the upper left-hand corner of the window rather than sliding up there smoothly. Here's a CodePen example illustrating the problem I'm having:
https://codepen.io/Jdo300/pen/abqevWo
HTML
<div id="menu">
Sidebar Menu
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet. Non incidunt tenetur eos dicta nemo vel nisi dolorem sed placeat recusandae. Ab quibusdam nihil eum voluptas illum non nostrum ratione ex fugit ipsam et earum perferendis et quaerat quia. Qui esse illo et animi incidunt ab blanditiis voluptas et quam facilis vel unde beatae aut nulla earum eos laboriosam fuga! Est atque architecto sed quia veniam ut voluptas velit. Sit internos minima a obcaecati porro est sint enim est quia architecto et velit aperiam et iure consequatur At impedit nostrum. Nam rerum minus est quis dolorem aut suscipit voluptatem id commodi libero. Rem debitis exercitationem est alias quas ut quidem consequatur ut minus adipisci cum atque incidunt. </p><p>Aut nihil quia non galisum esse ad quaerat commodi. Sed porro sapiente in adipisci neque et rerum dicta aut dolore quia eos voluptatibus aliquid. Ea iste culpa in minima sunt et similique possimus aut perferendis laudantium eos velit galisum qui possimus quibusdam sed rerum minima. Aut eius consequatur et aliquid praesentium et quis expedita id aperiam rerum sed rerum quibusdam! Et neque ipsam aut minus nostrum ea omnis perferendis in molestiae delectus. </p><p>Qui ipsam galisum rem quisquam ipsam et repellat praesentium quo dolorem perspiciatis. Sit quia praesentium qui esse dolorem est natus molestias. Qui maxime aliquid non ipsum quidem et nobis molestiae nam doloremque provident. Et laudantium iusto non accusantium aperiam et quam libero id voluptatem facere. Ut minus reiciendis 33 voluptas voluptatem et minima error non nihil nobis ut corporis ratione vel nihil ratione. Ab tempora ipsa ut tempore ipsum sed neque natus et ducimus eveniet non blanditiis quia At commodi deserunt ut molestiae molestiae. Cum sapiente tempore et dolorum explicabo At facere excepturi et dolorum labore qui officia sunt sit consequuntur aperiam. In repellat praesentium aut soluta internos ut galisum iste qui rerum minima qui veniam culpa quo aspernatur exercitationem eos dolorum excepturi. Aut libero ipsum At assumenda architecto in tempore nulla a molestias excepturi. </p><p>Et dignissimos consequuntur et voluptatem rerum eum laborum amet sit ullam facere et sequi consequatur. Et voluptates ducimus At voluptates quis aut aspernatur saepe ad consequatur sunt ut dolore omnis! Ut labore reiciendis sed consequatur modi et quia asperiores et omnis distinctio non ipsum fugiat. Est doloribus perferendis nam mollitia quisquam et delectus quia. Vel eaque repudiandae quo sunt magnam et laboriosam aliquam et expedita labore aut officiis harum. </p><p>Aut earum repellat nesciunt culpa ab dolores deleniti eum nihil animi. Et esse officia est neque architecto qui iste exercitationem et rerum amet. Ea aliquam vitae est odit tenetur ut explicabo dignissimos 33 iure magni. Et repudiandae modi ut laudantium laboriosam et possimus ipsa id praesentium officiis. Et sint autem aut tenetur consectetur est cumque vero sed tenetur obcaecati cum cupiditate placeat. Non rerum quas aut dolore quia hic voluptatem libero vel blanditiis odio est impedit saepe. Hic pariatur enim et consequatur laborum nam consequuntur veritatis est mollitia deleniti eum dolor nesciunt. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div id="video_container" align="center">
<iframe id="video" src="https://www.youtube.com/embed/w0pt7xSJJzM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<p>Lorem ipsum dolor sit amet. Et dolorem blanditiis est cupiditate libero id rerum magnam a facilis aperiam sed nisi nobis aut explicabo quod. Ad mollitia doloribus sit architecto delectus et reiciendis voluptatibus sed consequuntur perspiciatis et itaque sint. Ut illum iste vel doloribus omnis non saepe eius ut fuga perferendis aut sunt numquam aut voluptate eligendi. Qui enim placeat et omnis fugiat qui porro culpa non facere obcaecati quo modi laboriosam. </p><p>Et sunt labore est velit deserunt aut sunt culpa id aliquam ipsam aut molestiae iure eos delectus libero ab ipsum ipsum! In sint voluptatibus aut aperiam incidunt a quia galisum qui autem vitae ea doloremque facilis aut corrupti commodi est dolorum iusto. </p><p>Vel aspernatur quos sit debitis molestiae rem galisum distinctio. Ab tenetur dolores aut natus temporibus est veritatis velit sit laboriosam sit quae perspiciatis cum eveniet sapiente.</p>
<p>Lorem ipsum dolor sit amet. Et dolorem blanditiis est cupiditate libero id rerum magnam a facilis aperiam sed nisi nobis aut explicabo quod. Ad mollitia doloribus sit architecto delectus et reiciendis voluptatibus sed consequuntur perspiciatis et itaque sint. Ut illum iste vel doloribus omnis non saepe eius ut fuga perferendis aut sunt numquam aut voluptate eligendi. Qui enim placeat et omnis fugiat qui porro culpa non facere obcaecati quo modi laboriosam. </p><p>Et sunt labore est velit deserunt aut sunt culpa id aliquam ipsam aut molestiae iure eos delectus libero ab ipsum ipsum! In sint voluptatibus aut aperiam incidunt a quia galisum qui autem vitae ea doloremque facilis aut corrupti commodi est dolorum iusto. </p><p>Vel aspernatur quos sit debitis molestiae rem galisum distinctio. Ab tenetur dolores aut natus temporibus est veritatis velit sit laboriosam sit quae perspiciatis cum eveniet sapiente.</p>
</div>
CSS
body {
background: lightsalmon;
}
#menu {
position: fixed;
top: 0;
left:0;
width: 200px;
height: 100vh;
background: slategray;
}
#content {
position: absolute;
right: 0px;
left: 200px;
top: 0px;
height: 300vh;
background: lightgray;
padding: 20px;
}
#video_container {
width: 800px;
height: 480px;
background: blue;
transition: all .2s ease-in-out;
}
#video_container:hover {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: blue;
}
#video {
height: 100%;
width: 100%;
display: block;
}

It needs to have top and left defined before you can transition them to (0, 0).
See for example the effect works here. Now all you need to figure is how to calculate the required position. Hope that helps.
#video_container {
position: absolute;
width: 800px;
height: 480px;
top: 200px;
left: 300px;
background: blue;
transition: all .2s ease-in-out;
}
#video_container:hover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: blue;
transition: all .2s ease-in-out;
}
#video {
height: 100%;
width: 100%;
display: block;
}
<p>Aut nihil quia non galisum esse ad quaerat commodi. Sed porro sapiente in adipisci neque et rerum dicta aut dolore quia eos voluptatibus aliquid. Ea iste culpa in minima sunt et similique possimus aut perferendis laudantium eos velit galisum qui possimus
quibusdam sed rerum minima. Aut eius consequatur et aliquid praesentium et quis expedita id aperiam rerum sed rerum quibusdam! Et neque ipsam aut minus nostrum ea omnis perferendis in molestiae delectus.
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div id="video_container" align="center">
<iframe id="video" src="https://www.youtube.com/embed/w0pt7xSJJzM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<p>Lorem ipsum dolor sit amet. Et dolorem blanditiis est cupiditate libero id rerum magnam a facilis aperiam sed nisi nobis aut explicabo quod. Ad mollitia doloribus sit architecto delectus et reiciendis voluptatibus sed consequuntur perspiciatis et itaque
sint. Ut illum iste vel doloribus omnis non saepe eius ut fuga perferendis aut sunt numquam aut voluptate eligendi. Qui enim placeat et omnis fugiat qui porro culpa non facere obcaecati quo modi laboriosam. </p>

Background color doesn't extend to the bottom of scrollable div

I have two flex items inside a scrollable div, but the grey background-color of the flex items doesn't extend to the very end of the scroll. How would I extend it to the full width?
.my-div{
display: flex;
margin: auto;
width: 400px;
height: 500px;
overflow-y: auto;
background-color: #aaa;
}
.left{
background-color: #555;
height: 100%;
}
.right{
font-size: 20px;
}
<div class="my-div">
<div class="left">
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
</p>
</div>
<div class="right">
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</p>
</div>
</div>

.main-div {
margin: auto;
width: 400px;
height: 500px;
overflow-y: auto;
}
.my-div{
display: flex;
background-color: #aaa;
}
.left{
background-color: #555;
}
.right{
font-size: 20px;
}
<div class="main-div">
<div class="my-div">
<div class="left">
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
</p>
</div>
<div class="right">
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</p>
</div>
</div>
</div>

How to make flex layout with fixed header and footer and scrollable content?

I found article on flex layout with this header,content,footer :
<div class="flexbox-parent">
<div class="flexbox-item header">
Header
</div>
<div class="flexbox-item fill-area content flexbox-item-grow">
<div class="fill-area-content flexbox-item-grow">
Content
<br /><br />
Emulates height 100% with a horizontal flexbox with stretch
<br /><br />
This box with a border should fill the blue area except for the padding (just to show the middle flexbox item).
</div>
</div>
<div class="flexbox-item footer">
Footer
</div>
</div>
*, *:before, *:after
{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html, body
{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body
{
background: #444444;
color: #cccccc;
font-size: 14px;
/* Helvetica/Arial-based sans serif stack */
font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.flexbox-parent
{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start; /* align items in Main Axis */
align-items: stretch; /* align items in Cross Axis */
align-content: stretch; /* Extra space in Cross Axis */
background: rgba(255, 255, 255, .1);
}
<script>
.flexbox-item
{
padding: 8px;
}
.flexbox-item-grow
{
flex: 1; /* same as flex: 1 1 auto; */
}
.flexbox-item.header
{
background: rgba(255, 0, 0, .1);
}
.flexbox-item.footer
{
background: rgba(0, 255, 0, .1);
}
.flexbox-item.content
{
background: rgba(0, 0, 255, .1);
}
.fill-area
{
display: flex;
flex-direction: row;
justify-content: flex-start; /* align items in Main Axis */
align-items: stretch; /* align items in Cross Axis */
align-content: stretch; /* Extra space in Cross Axis */
}
.fill-area-content
{
background: rgba(0, 0, 0, .3);
border: 1px solid #000000;
/* Needed for when the area gets squished too far and there is content that can't be displayed */
overflow: auto;
}
</script>
But if to add some more content then with horizontal scrolling header and footer
are hidden, like :
https://jsfiddle.net/paehmt1s/
How to remake this snippet :
1) to have header always at top with scrollable content
2) to have header always at top and footer at bottom with scrollable content
?
UPDATED :
adding max-height as:
.fill-area-content
{
background: rgba(0, 0, 0, .3);
border: 1px solid #000000;
max-height: 50vw;
set header at top, but now in my browser I see 2 horizontal scrollbars :
https://imgur.com/a/670sD8d
and pulling the inner horizontal scrollbar header is at top always
But pulling the external horizontal scrollbar header is hidden anyway.
Actually the fiddle have the same issue...
Can it be fixed ?
Thanks!

Create an overflow condition in your main content area, which will trigger a scrollbar.
Add this to your code:
.fill-area {
overflow: auto;
}
*, *:before, *:after
{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html, body
{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body
{
background: #444444;
color: #cccccc;
font-size: 14px;
/* Helvetica/Arial-based sans serif stack */
font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.flexbox-parent
{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start; /* align items in Main Axis */
align-items: stretch; /* align items in Cross Axis */
align-content: stretch; /* Extra space in Cross Axis */
background: rgba(255, 255, 255, .1);
}
.flexbox-item
{
padding: 8px;
}
.flexbox-item-grow
{
flex: 1; /* same as flex: 1 1 auto; */
}
.flexbox-item.header
{
background: rgba(255, 0, 0, .1);
}
.flexbox-item.footer
{
background: rgba(0, 255, 0, .1);
}
.flexbox-item.content
{
background: rgba(0, 0, 255, .1);
}
.fill-area
{
display: flex;
flex-direction: row;
justify-content: flex-start; /* align items in Main Axis */
align-items: stretch; /* align items in Cross Axis */
align-content: stretch; /* Extra space in Cross Axis */
overflow: auto; /* NEW */
}
.fill-area-content
{
background: rgba(0, 0, 0, .3);
border: 1px solid #000000;
/* Needed for when the area gets squished too far and there is content that can't be displayed */
overflow: auto;
}
<div class="flexbox-parent">
<div class="flexbox-item header">
Header
</div>
<div class="flexbox-item fill-area content flexbox-item-grow">
<div class="fill-area-content flexbox-item-grow">
Content
<br /><br /> Emulates height 100% with a horizontal flexbox with stretch
<br /><br /> This box with a border should fill the blue area except for the padding (just to show the middle flexbox item).
<p>
1)Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit
voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed
quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam
aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae
consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</p>
<p>
2)Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit
voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed
quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam
aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae
consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum
quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam,
nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Sed ut perspiciatis unde omnis iste
natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit
aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et
dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse
quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</p>
<p>
3)Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit
voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed
quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam
aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae
consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum
quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam,
nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</p>
<p>
4)Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit
voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed
quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam
aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae
consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum
quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam,
nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</p>
<p>
5)Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit
voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed
quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam
aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae
consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum
quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam,
nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</p>
<p>
6)Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit
voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed
quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam
aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae
consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum
quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam,
nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</p>
<p>
7)Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit
voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed
quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam
aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae
consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum
quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam,
nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</p>
</div>
</div>
<div class="flexbox-item footer">
Footer
</div>
</div>
jsFiddle demo

with css column-count / column-width, can I make text flow around large images?

https://jsfiddle.net/6g6176zs/1/ is a simple 2-column CSS layout, where the image is so wide it spans several columns, but unfortunately the text goes over the image.
I know you can put column-span:all on only the p's that contain images, but is there a way, without knowing which <p> contains a wide image (or table or what have you), to ensure the text flows around the image (like with floats)?
Ideally, text would flow such that it fills columns as well as possible up to column-width:
css:
body {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
-webkit-column-width: 50px;
-moz-column-width: 50px;
column-width: 50px;
}
html:
<html>
<head> <title>column-clear</title> </head>
<body>
<p> <img src="http://bildr.no/image/bHEvbVFz.jpeg"/> </p>
<p>Id reiciendis rerum illum ut minus eos reiciendis et. Odio vel non autem. Et in ut harum quaerat repellat maxime vel odit. Mollitia inventore officia voluptas et.Vitae assumenda harum et omnis. Qui eum in explicabo molestiae. Et reiciendis non vel blanditiis et maxime. Rerum odit recusandae ipsa. Ea ut in aut cum numquam dolores eos velit. Quia sit est velit fugiat ipsum ut doloremque mollitia.Sit dolorem sunt quia officia nihil corporis eos dolores. Dolores consequatur est quisquam laboriosam deserunt. Ipsa illo tempore tempora et sed. Est quisquam rem blanditiis ullam non unde magni. Non blanditiis aut fugit alias magnam.Hic qui minima et est quasi. Ducimus quos odio voluptatibus temporibus ipsa sunt. Harum reprehenderit dolores soluta ut itaque. Qui ipsa suscipit nisi.Debitis quibusdam exercitationem ex quos doloremque et minima ut. Suscipit saepe et voluptatem. Voluptatem suscipit ut odio. Possimus ut expedita vel ex sequi nesciunt dolor debitis. Sed iusto consequatur labore animi sint qui inventore blanditiis. Ut qui velit nobis esse. </p>
<p>Id reiciendis rerum illum ut minus eos reiciendis et. Odio vel non autem. Et in ut harum quaerat repellat maxime vel odit. Mollitia inventore officia voluptas et.Vitae assumenda harum et omnis. Qui eum in explicabo molestiae. Et reiciendis non vel blanditiis et maxime. Rerum odit recusandae ipsa. Ea ut in aut cum numquam dolores eos velit. Quia sit est velit fugiat ipsum ut doloremque mollitia.Sit dolorem sunt quia officia nihil corporis eos dolores. Dolores consequatur est quisquam laboriosam deserunt. Ipsa illo tempore tempora et sed. Est quisquam rem blanditiis ullam non unde magni. Non blanditiis aut fugit alias magnam.Hic qui minima et est quasi. Ducimus quos odio voluptatibus temporibus ipsa sunt. Harum reprehenderit dolores soluta ut itaque. Qui ipsa suscipit nisi.Debitis quibusdam exercitationem ex quos doloremque et minima ut. Suscipit saepe et voluptatem. Voluptatem suscipit ut odio. Possimus ut expedita vel ex sequi nesciunt dolor debitis. Sed iusto consequatur labore animi sint qui inventore blanditiis. Ut qui velit nobis esse. </p>
</body>
</html>

Virtually infinite container (infinite width)

In the following situation, I don't want #blah to have linebreaks : I want its only limitation to be max-width: 20em;. It should not break lines here:
#container { position: absolute; width:100% }
#blah {
position: absolute;
font-size: 100px;
max-width: 20em;
}
<div id="container">
<div id="blah">Hahaha hahahah hah</div>
</div>
This is certainly caused by the fact the container is "only" 100% wide. Here
#container { position: absolute; width:10000% }
solves the problem.
But in my application I can have very very very large text, and very very very small text (see http://bigpicture.bi/demo).
Question:
How to make that #container is virtually infinite ? i.e. width: 100% is not enough, 1000% is not enough, and even 1000000% is not enough. Can I use width: infinity ?

Update
A different post and some comments have been deleted, which indicated that jQuery was okay to use, even though it wasn't tagged in the question.
My jQuery solution is below, but I've since come up with a much simpler solution: Add a width style to blah, which matches max-width. That way, container will automatically grow as needed:
#blah {
position: absolute;
font-size: 100px;
max-width: 20em;
width: 20em;
}
jQuery Solution (which may be useful for similar problems):
In the snippet below, I changed blah to a class instead of an ID.
You'll notice that max-width is ignored.
Click the Grow Container button. Each child of #container is cloned and given a static position, so we can determine its width. #container then grows as needed to match the width.
Now that #container has a width, its children can widen to match their max-width.
function growContainer() {
$('.blah').each(function() {
var clone= $(this).clone();
clone.css({position: 'static'});
$('body').append(clone);
var right= $(this).offset().left + clone.width();
$('#container').css({
width: Math.max($('#container').width(), right)
});
clone.remove();
});
} //growContainer
$('#BG').click(growContainer);
#container {
position: absolute;
}
#BG {
position: fixed;
}
.blah {
position: absolute;
max-width: 20em;
}
#blah1 {
font-size: 100px;
top: 50px;
background: red;
}
#blah2 {
left: 5000px;
font-size: 50px;
background: lightblue;
}
#blah3 {
top: 1000px;
font-size: 20px;
background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="BG">Grow Container</button>
<div id="container">
<div class="blah" id="blah1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
<div class="blah" id="blah2">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? </div>
<div class="blah" id="blah3">
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </div>
</div>

Develop Reference

r css asp.net wordpress firebase qt symfony nginx http apache-flex