Dynamic Floating Columns If Height Exceeded

Dynamic floating columns if height exceeded

You can use CSS3 columns: "CSS Multi-column Layout Module":

HTML

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

CSS

ul {
    -moz-column-count:3;
    -webkit-column-count:3;
    column-count:3;
    max-height: 20px;
}

ul > li {
    height: 20px;
}

Demo

http://jsfiddle.net/UTfD9/

Support

This will work in:

Safari
Chrome
Firefox
IE10+
Opera 11+

See: Can I use CSS3 Multiple column layout?

Dynamic height popup box with floating content boxes and scrollbars if needed

your #wrapper must have position: fixed; so it's height is relative to window not the body. then #dynamicPopup gonna work the way you expect. this is how popups (modals) work.

here's a good example of what you're trying to achieve:

https://codepen.io/jzilg/pen/vEmQrm

and I have no idea why you have floated your html and body. I've never seen something like this before. try to avoid it.

html,body {  margin: 0px;  padding: 0px;  font-family: "Roboto Condensed", sans-serif;  overflow-x: hidden;}#wrapper {  position:fixed;  top: 0;  left: 0;  width: 100%;  height: 100%;}.clearfix:after {  content: " ";  display: block;  height: 0;  clear: both;  visibility: hidden;}* html .clearfix {  height: 1%;} /* Hides from IE-mac \*/.clearfix {  display: block;}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/><!DOCTYPE html><html>
<head>  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <link rel="stylesheet" type="text/css" href="responsive.css">  <!-- Favicon -->
</head>
<body>  <div id="wrapper" style="height: 100%; width; 100%">    <!-- simple full size wrapper -->    <div id="dynamicPopup" style="max-height: 98%; background-color: yellow; overflow: auto;" class="clearfix">      <!-- dynamicPopup - its height depends of content, max height should not exceed 98% of window  -->      <div id="popupContentWrapper" style="height: 100%; width: 100%"><!-- popupContentWrapper - keeping all popupContents together -->        <div id="leftContent" class="col-sm-12" style="height: 49vh; overflow: auto; background-color: red;">          <!-- leftContent - can be small, but max 100% of height -->FOO</br></br></br></br></br></br></br></br></br></br></br></div>        <div id="rightContent" class="col-sm-6" style="height: 49vh; background-color: green; overflow: auto;">          <!-- rightContent - can be small, but max 100% of height, then scrollbar -->          <div id="rightInnerContent" style="width: 100%; height: 2000px; background-color: green;">BAR</div>          <!-- rightInnerContent -in this case a very long list which should be create a scrollbar in parent/rightContent -->        </div>      </div>      <div>      </div></body>
</html>

Auto height div with overflow and scroll when needed

Well, after long research, i found a workaround that does what i need:
http://jsfiddle.net/CqB3d/25/

CSS:

body{
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    height: 100%; 
    max-height: 100%; 
}

#caixa{
    width: 800px;
    margin-left: auto;
    margin-right: auto;
}
#framecontentTop, #framecontentBottom{
    position: absolute; 
    top: 0;   
    width: 800px; 
    height: 100px; /*Height of top frame div*/
    overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
    background-color: navy;
    color: white; 
}

#framecontentBottom{
    top: auto;
    bottom: 0; 
    height: 110px; /*Height of bottom frame div*/
    overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
    background-color: navy;
    color: white;
}

#maincontent{
    position: fixed; 
    top: 100px; /*Set top value to HeightOfTopFrameDiv*/
    margin-left:auto;
    margin-right: auto;
    bottom: 110px; /*Set bottom value to HeightOfBottomFrameDiv*/
    overflow: auto; 
    background: #fff;
    width: 800px;
}

.innertube{
    margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}

* html body{ /*IE6 hack*/
    padding: 130px 0 110px 0; /*Set value to (HeightOfTopFrameDiv 0 HeightOfBottomFrameDiv 0)*/
}

* html #maincontent{ /*IE6 hack*/
    height: 100%; 
    width: 800px; 
}

HTML:

<div id="framecontentBottom">
    <div class="innertube">
        <h3>Sample text here</h3>
    </div>
</div>
<div id="maincontent">
    <div class="innertube">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque, ligula hendrerit euismod auctor, diam nunc sollicitudin nibh, id luctus eros nibh porta tellus. Phasellus sed suscipit dolor. Quisque at mi dolor, eu fermentum turpis. Nunc posuere venenatis est, in sagittis nulla consectetur eget... //much longer text...
    </div>
</div>

might not work with the horizontal thingy yet, but, it's a work in progress!

I basically dropped the "inception" boxes-inside-boxes-inside-boxes model and used fixed positioning with dynamic height and overflow properties.

Hope this might help whoever finds the question later!

EDIT: This is the final answer.

3 floating divs with center dynamic width

You could try setting your CSS up like this:

#container{width:100%;}
#left{min-height:70px;width:60px;float:left;}
#middle{min-height:70px;padding:0 60px}
#right{min-height:70px;width:60px;float:right;}

jsFiddle

How can I stretch an empty floating div to the full height available using css?

The best I could come up with is to use position: absolute on the .left-sidebar element:

.page {
    position: relative; /* causes the left-sidebar to position relative to this element */
}

.left-sidebar {
    position: absolute;
    top: 0;
    bottom: 0;  /*  this line, and the one above, confer full-height */
    left: 0;
    width: 30%;
    background-color: #f90; /* adjust to taste, just to see where the element was rendered */
}

.right-content {
    background-color: #f00; /* again, adjust to taste, was just to see where elements were rendered */
    margin: 0 0 0 35%; /* stops the sidebar showing 'above' the content, and gives a 5% gutter between */
}

JS Fiddle demo.

Edited in response to comment below:

There is a header and some space on either side of the floating divs, so I don't know the actual top/left/bottom positions to use. Also, if the right content frame stretches longer, the left sidebar frame doesn't stretch with it (add height: 500px to the right content frame of your fiddle).

Unfortunately the only other alternative that I can see is to move the .left-sidebar element within the .right-content element, and then the following works. This may not be possible with your use-case, though.

.left-sidebar {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 30%;
    background-color: #f90;
}

.right-content {
    position: relative;
    background-color: #f00;
    margin: 0;
    padding: 0 0 0 35%;
}

JS Fiddle demo.

push up background above content with dynamic height

In the media query, change the container display to flex.

Use justify content to move content to the bottom.

Add a pseudo, using order to move it to the beginning, ahead of content.

Set the background image of container to this pseudo instead, and align it to bottom

#container{                background-image:url("http://i.imgur.com/u4xZlez.png");                background-size:100%;                height:400px;                display:block;                position:relative;                width:100%;                max-width:650px;                border:1px solid red;                background-repeat:no-repeat;            }            #content{                position:absolute;                top:10%;                display:block;                background-color:white;                width:60%;                margin-left:10%;                border:1px solid black;            }
   @media(max-width: 650px) {
    #container {        display: flex;        flex-direction: column;        justify-content: flex-end;        background-size: 0%;    }
    #container::before {        content: "";/*        background-image: url("http://i.imgur.com/u4xZlez.png"); */        background-image: inherit;        background-size: 100%;        background-position: center bottom;        width: 100%;        flex-grow: 1;        order: 1;    }
    #content {        position: static;        bottom: 10px;        top: auto;        width: 100%;        margin-left: 0px;        order: 2;    }}

<div id="container">            <div id="content">                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est.</p>                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est.</p>            </div>        </div>

Pushing floating elements towards one side of the parent container changes their width

Here you go,what i have done in short.

1.make a wrapping container that stretches in column direction.

2.assign flex grow = 0.5 so 'stay' div and 'pushed' div shares equal height in the wrpaaer.

3.in 'stay' div,assign flex-dir=flex-start

4.in 'pushed' div, set the width equals to the sum of width of the child items,in this case its (90px + 60px),do not set width = 'auto',because then it will calculate the width itself that is (400 - 350)px or 50px and sqeeze the items.This is the point where everything was going wrong.

.top-wrap {
  width: 400px;
  height: 120px;
  display: flex;
  flex-direction: column;
  background:lightgreen;
  overflow-x:hidden;
}

.stay {
  flex: 0.5 1 0;
}

.stay .wrap{
  width : auto;
  height:100%;
  display:flex;
}

.stay .wrap .box1{
  width: 90px;
  height:100%;
  background:black;
}

.stay .wrap .box2{
  width: 60px;
  height:100%;
  background: grey;
}

.pushed {
  flex: 0.5 1 0;
}

.pushed .wrap{
  height:100%;
  width: calc(90px + 60px); 
  display:flex;
  margin-left: 350px;
}

.pushed .wrap .box1{
  width: 90px;
  height:100%;
  background:black;
}

.pushed .wrap .box2{
  width: 60px;
  height:100%;
  background: grey;
}

<div class='top-wrap'>
  <div class='stay'>
    <div class='wrap'>
      <div class="box1"></div>
      <div class="box2"></div>
    </div>
  </div>
  <div class="pushed">
    <div class='wrap'>
      <div class="box1"></div>
      <div class="box2"></div>
    </div>
  </div>
</div>

Make two columns the same height regardless of content

If you absolutly must avoid using TABLEs, you can style your divs to behave like tables with

display: table;
display: table-row;
display: table-cell;

You can look at the markup/css and results in this fiddle: http://jsfiddle.net/aeinbu/QDBff/35/

Dynamic Floating Columns If Height Exceeded