Develop Reference

Div goes under first div when page is resized

I have something like this:
HTML:
<div id="container">
<img src="leftphoto.jpg" id="left">
<div id="right">Description</div>
</div>
CSS:
body {
margin: 0;
padding: 0;
background-color:#252525;
}
#container{
position: relative;
display: flex;
justify-content: center;
margin: 0 auto;
margin-top: 100px;
margin-bottom: 100px;
height: 40vw;
}
#left{
max-width: 75vw;
height:100%;
}
#right{
min-width: 300px;
height:100%;
color:white;
width:20vw;
background-color: red;
color: #ffffff;
font-size: 11px;
overflow: auto;
}
I want the right div to go down, under left div with the same width. How can I achieve that?
What I have:
When I resize window, it is smaller:
But I want the right div to go down, under the left div and also I would like to get the same width on both divs:
I was trying a lot of different things, but I couldn't achieve this. Do you have any advice?

You can use flex blox to achieve this. Simply place on the container of the divs. Once that is done you can change the divs placement by flex-direction row/column. Similarly, for placing the 2nd div above the first div once the size reduce, you can set media query for a specific screen where you can reverse the column and you done.
.container{
display: flex;
flex-direction: row;
}
#media screen and (max-width:768px){
.container{
display: flex;
flex-direction: column-reverse
}
}
<div class="container">
<div>
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg">
</div>
<div class="content">
<p>Content</p>
</div>
</div>

Create a second container in your html and they will naturally align under eachother
<div class="container">
<div class="content-Container">
<img src="leftphoto.jpg" id="left" />
<div id="right">Description</div>
</div>
</div>
and then position them to the middle of the page by adding style to the parent container

How to create a nested codeblock style css

I'm needing to create CSS classes that can display content similar to this design image here: design concept
Obviously, the code statements themselves don't matter. But how can I create CSS that could wrap the containing content as seen in the image and have that work to n nested containers? I've been playing around with div tags and display: inline-block styling but nothing is working out.
Here is what I currently have, using flex-box. This is almost what I need except that the "rows" aren't setting their width to fit the text content as it just sets the width of everything to the largest width child... seems that this approach might not be possible.
.container {
display: inline-flex;
flex-direction: column;
padding-left: 15px;
}
.containerRow {
display: flex;
flex-direction: column;
justify-content: center;
height: 35px;
margin: 5px;
}
.dropContainer {
height: 70px;
border: 1px solid #ccc!important;
background-color: white;
color: black;
}
.purple {
background-color: #872A61;
color: white;
}
.green {
background-color: #478B26;
color: white;
}
<div class="container purple">
<div class="containerRow">
if (something == true) then
</div>
<div class="container green">
<div class="containerRow">
<div><b>where</b> something(x: Number, y:Number) <b>is</b></div>
</div>
<div class="dropContainer">
Some more stuff again
</div>
<div class="dropContainer">
Some more stuff again
</div>
<div class="containerRow">
<b>end</b>
</div>
</div>
<div class="containerRow">
<b>end</b>
</div>
</div>

Use margins or padding styles with percentages to achieve the nth term.

How to make columns the same height dynamically?

I am having trouble making my columns the same height. I would simply like to make the columns the same height. Here is my code:
HTML:
<main>
<div id="left-column">
<div id="facets"></div>
</div>
<div id="right-column">
<div id="stats"></div>
<div id="hits"></div>
<div id="pagination"></div>
</div>
</main>
CSS:
#left-column {
float: left;
width: 25%;
background-color: #fff;
border-right: 1px solid #cdcdcd;
}
#right-column {
width: 75%;
margin-left: 25%;
}
The issue I'm having is that because the id's of each of the divs dynamically generate content, the heights of each columns will be based on what are inside those divs. Is there any way to set the column to the height of whatever is longer than the other column? Or is there a way to set the column height to something fixed? I have tried to add height: 1000px for each of the ids but that doesn't even seem to apply to the CSS. Any help would be appreciated.

There are two big options: Use Javascript, or don't use Javascript.
If you use Javascript, assuming you use a library which helps certain portions of your code become cross-browser without a lot of work on your part, then it's almost guaranteed to work on any browser that supports it.
Big Fall Back: If someone has Javascript disabled it doesn't look good.
Not Javascript
Recently CSS has gotten a new display type, flex. Now, it should be said, based on Can I Use, IE 11 has messed up support for flexbox, but a majority of browsers support it (85% support it without prefixes, and that includes most mobile browsers too!)
.flex-container {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
#left-column {
-webkit-box-flex: 0;
-webkit-flex: 0 0 25%;
-ms-flex: 0 0 25%;
flex: 0 0 25%;
border-right: 1px solid #CDCDCD;
}
#right-column {
-webkit-box-flex: 1;
-webkit-flex: 1 1;
-ms-flex: 1 1;
flex: 1 1;
padding-left: 5px;
}
<main class="flex-container">
<div id="left-column">
<div id="facets">test</div>
</div>
<div id="right-column">
<div id="stats" test></div>
<div id="hits">test</div>
<div id="pagination">test</div>
</div>
</main>

Via CSS and to include older browsers like IE8 you have display:table/table-cell.
main {
display: table;
table-layout: fixed;
width: 100%;
}
#left-column {
display: table-cell;
width: 25%;
background-color: #fff;
border-right: solid ;
}
#right-column {
display: table-cell;
width: 75%;
}
<main>
<div id="left-column">
<div id="facets">facets</div>
</div>
<div id="right-column">
<div id="stats">stats</div>
<div id="hits">hits</div>
<div id="pagination">pagination</div>
</div>
</main>
To include very old browser, you may also see http://alistapart.com/article/fauxcolumns a very solid technics since you columns have fixed width

If you want to restrict the height of each column to a limit. you can use max-height and min-height rule. But if you want to do it using Javascript. Here is the algorithm assuming that you call this function after your columns have had their content data filled in
function setHeight() {
var leftCol = document.querySelector("#left-column");
var rightCol = document.querySelector("#right-column");
var largerHeight = Math.max(leftColHeight.getBoundingClientRect().height, rightColHeight.getBoundingClientRect().height);
leftCol.style.height = largerHeight + "px";
rightCol.style.height = largerHeight + "px";
}

you may try and check my code I have use display flex to do what you want done .. check this link https://jsfiddle.net/qpfrtqh2/1/
.parent{
display: flex;
}

You can get help by using this code.
You need to use flex css.
<ul class="list">
<li class="list__item"><!-- content --></li>
<li class="list__item"><!-- content --></li>
<!-- other items -->
</ul>
and css as like below.
.list
{
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.list__item
{
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
You need some javascript code for fallback of flex css.

Try this (I added some background-colors just to see result)
main{ overflow: hidden;
}
#left-column {
float: left;
width: 25%;
background-color: red;
border-right: 1px solid #cdcdcd;
margin-bottom: -99999px;
padding-bottom: 99999px;
}
#right-column {
background-color: green;
width: 75%;
margin-left: 25%;
margin-bottom: -99999px;
padding-bottom: 99999px;
}
<main>
<div id="left-column">
<div id="facets">aa</div>
</div>
<div id="right-column">
<div id="stats">bb</div>
<div id="hits">cc</div>
<div id="pagination"></div>
</div>
</main>

There is no need to use javascript for that.
Just leverage standard table display in CSS.
FIDDLE

Show floated div with percentage width and different pattern

I am not very good with CSS, so I am posting my problem here hoping for a solution:
What I need is following:
I need an HTML row/div/line that shows a date and after the date it shows a bar which will be a percentage of the remaining screen width.
Like so:
2015-11-17 ---------------------(50%)
2015-11-18 ------------------------------------------- (80%)
2015-11-19 ==================================================== (100%)
If you will please consider in the dashes as a proper bar (like 10px height for e.g.). You might notice that 50% and 80% have ---- while 100% has ====.
This is because for any percentage less than 100 I want the bar to be a mixed color like blue and white combo. For the 100% it will be a solid blue color bar.
I am trying to achieve this using HTML/CSS only, but I find my expertise to be lacking.
So far, I have following HTML/CSS:
<div style="padding-top: 10px;padding-bottom:10px; width:100%">
<div style='float:left'><strong>Date </strong>{{Today.date}}</div>
<div style='float:left;background-color:red;width:100%'></div>
</div>
The above code does not even show the second div with red background :(
Any pointers in helping me solve this is very much appreciated!

Flexbox could help here depending on your browser support requirements.
.wrap {
width: 80%;
margin: 1rem auto;
font-size: 24px;
display: flex;
align-items: center;
border: 1px solid grey;
}
.date {
padding: 0 1em;
}
.bar {
height: 10px;
background: #f00;
}
.bar-50 {
flex: .5;
}
.bar-80 {
flex: .8;
}
.bar-100 {
flex: 1;
}
<div class="wrap">
<div class="date">2015-11-17</div>
<div class="bar bar-50"></div>
</div>
<div class="wrap">
<div class="date">2015-11-18</div>
<div class="bar bar-80"></div>
</div>
<div class="wrap">
<div class="date">2015-11-19</div>
<div class="bar bar-100"></div>
</div>
Sneaky version with pseudo-element instead of extra HTML
.bar {
width: 80%;
margin: 1rem auto;
font-size: 24px;
display: flex;
align-items: center;
border: 1px solid grey;
}
.date {
padding: 0 1em;
}
.bar::after {
content: '';
height: 10px;
background: #f00;
}
.bar-50:after {
flex: .5;
}
.bar-80:after {
flex: .8;
}
.bar-100:after {
flex: 1;
}
<div class="bar bar-50">
<div class="date">2015-11-17</div>
</div>
<div class="bar bar-80">
<div class="date">2015-11-18</div>
</div>
<div class="bar bar-100">
<div class="date">2015-11-19</div>
</div>
Perhaps more semantically, use a progress element and a label.
Progess Element # MDN
div {
margin: 10px;
}
<div>
<label for="alpha">2015-11-17</label>
<progress id="alpha" value="50" max="100">50 %</progress>
</div>
<div>
<label for="beta">2015-11-18</label>
<progress id="beta" value="70" max="100">70 %</progress>
</div>
<div>
<label for="gamma">2015-11-19</label>
<progress id="gamma" value="100" max="100">70 %</progress>
</div>

You can try this
<div style="padding-top: 10px;padding-bottom:10px; width:100%;position: relative;">
<div style="float: left;width: 50%;display: inline-block;"><strong>Date </strong>{{Today.date}}</div>
<div style="float:left;width: 50%;height: 10px;display: inline-block;">
<div class="progress" style="background-color:red;width: 100%;height: 100%;">
</div></div>
</div>

Make divs on same row the same height - Dynamic Content

I am working on an application that generates dynamic content and displays them on floating divs. Each div takes 49% width of the page. The problem I'm running into is that the height of the divs vary depending on the content.
What I'm looking to do is make the divs on the same row the same height. Any suggestions?
.item {
background: #c4c4c4;
width: 49%;
border: 1px solid black;
float: left;
}
<div id="container">
<div class="item">
Test
</div>
<div class="item">
Hello.
Sample <br>
Content <br>
</div>
<div class="item">
Test<br>
Sample Content
</div>
<div class="item">
Test
</div>
</div>

Using CSS3 flexbox to make the #container adapt flexible box layout.
Default value of flex-wrap is nowrap so it aligns in a single row. Use flex-wrap: wrap to create multiple rows based on item's width.
Current browser support for Flexbox is pretty good: Can I use Flexbox?
#container {
display: flex;
flex-wrap: wrap; /* Wrap after the items fill the row */
/* Safari specific rules */
display: -webkit-flex;
-webkit-flex-wrap: wrap;
}
.item {
background: #c4c4c4;
border: 1px solid black;
width: 49%;
}
<div id="container">
<div class="item">
Test
</div>
<div class="item">
Hello. Sample
<br>Content
<br>
</div>
<div class="item">
Test
<br>Sample Content
</div>
<div class="item">
Test
</div>
</div>

Use display: table on the containing div, and display: block on your "table cell" divs.

Another answer involves using the display: table property in CSS. It is similar to table scaffolding, but allows much more flexibility with CSS and has more browser support than flexbox.
HTML:
<div id="container">
<div class="row">
<div class="item">
Test
</div>
<div class="item">
Hello.
Sample <br>
Content <br>
</div>
</div>
<div class="row">
<div class="item">
Test<br>
Sample Content
</div>
<div class="item">
Test
</div>
</div>
</div>
CSS:
#container {
width: 100%;
display: table;
}
.row {
display: table-row;
}
.item {
background: #c4c4c4;
width: 49%;
box-sizing: border-box;
border: 1px solid black;
display: table-cell;
}
Fiddle:
http://jsfiddle.net/q5jyfuy6/

You can add like height:40px; in your .item class to make height of the divs independent of the content.
.item {
background: #c4c4c4;
width: 49%;
border: 1px solid black;
float: left;
height:40px;
}