Using target on div without a href - html

I have created a row div with id"dashboard" in which i have 3 divs. And below this row i have created 3 rows with one div in each row. I want to click on one div in row div with id"dashboard" and open the row div with id "alarm". I want to use target to acheive this task but unfortunately target can only be used with a href tag. Here is my code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css">
<title>My Dashboard</title>
</head>
<body>
<div id="dashboard" class="row" >
<div class="col-4" style="background-color:#009">
</div>
<div class="col-4" style="background-color:#C00">
</div>
<div class="col-4" style="background-color:#0C0">
</div>
</div>
<div id="alarm" class="row" >
<div class="col-12" style="background-color:#009">
</div>
</div>
<div id="calendar" class="row" >
<div class="col-12" style="background-color:C00">
</div>
</div>
<div id="weather" class="row" >
<div class="col-12" style="background-color:#0C0">
</div>
</div>
</body>
</html>
And here is its css code:
#charset "utf-8";
/* CSS Document */
* {
box-sizing: border-box;
}
.row:after {
content: "";
clear: both;
display: block;
}
[class*="col-"] {
float: left;
padding: 15px;
}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
.show{
display: none;
}
.show:target{
display: block;
}


As in this JS Fiddle, this is a CSS only solution, just replace your div's with a's and making use of the :target it will work the way you want:
#charset"utf-8";
/* CSS Document */
* {
box-sizing: border-box;
}
.row:after {
content: "";
clear: both;
display: block;
}
[class*="col-"] {
float: left;
padding: 15px;
}
.col-1 {
width: 8.33%;
}
.col-2 {
width: 16.66%;
}
.col-3 {
width: 25%;
}
.col-4 {
width: 33.33%;
}
.col-5 {
width: 41.66%;
}
.col-6 {
width: 50%;
}
.col-7 {
width: 58.33%;
}
.col-8 {
width: 66.66%;
}
.col-9 {
width: 75%;
}
.col-10 {
width: 83.33%;
}
.col-11 {
width: 91.66%;
}
.col-12 {
width: 100%;
}
.show {
display: none;
}
:target {
display: block;
}
<div id="dashboard" class="row">
</div>
<div id="alarm" class="row show">
<div class="col-12" style="background-color:#009"></div>
</div>
<div id="calendar" class="row show">
<div class="col-12" style="background-color:#C00"></div>
</div>
<div id="weather" class="row show">
<div class="col-12" style="background-color:#0C0"></div>
</div>
Update: Upon a request in the comment, now with adding an <a href="#dashboard"> in each one of the .show gadgets and performing the same :target trick we have this result JS Fiddle 2:
#charset"utf-8";
/* CSS Document */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.row:after {
content: "";
clear: both;
display: block;
}
[class*="col-"] {
float: left;
padding: 15px;
}
.col-1 {
width: 8.33%;
}
.col-2 {
width: 16.66%;
}
.col-3 {
width: 25%;
}
.col-4 {
width: 33.33%;
}
.col-5 {
width: 41.66%;
}
.col-6 {
width: 50%;
}
.col-7 {
width: 58.33%;
}
.col-8 {
width: 66.66%;
}
.col-9 {
width: 75%;
}
.col-10 {
width: 83.33%;
}
.col-11 {
width: 91.66%;
}
.col-12 {
width: 100%;
}
.show {
display: none;
position: absolute;
width: 100%;
height: 400px;
top: 0;
}
:target {
display: block;
}
.back-btn {
width: 60px;
height: 40px;
display: inline-block;
z-index: 20;
background-color: orange;
position: absolute;
padding-top: 10px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
color: black;
}
<div id="dashboard" class="row">
</div>
<div id="alarm" class="alarm row show">
back
<div class="col-12" style="background-color:#009; height:300px;"></div>
</div>
<div id="calendar" class="row show">
back
<div class="col-12" style="background-color:#C00; height:300px;"></div>
</div>
<div id="weather" class="row show">
back
<div class="col-12" style="background-color:#0C0; height:300px;"></div>
</div>
** NOTE that I've added height:300px; to the inline style of the .show DIVs.


Target isn't the correct way to do it anyway. Put an "onclick=" on the div, and write a Javascript function to handle the behavior.
<div id="dashboard" class="row">
<div class="col-4" style="background-color:#009" onclick="myfunction('col4')">
</div>
</div>
function myfunction(whichColumn){
//do some stuff with whichColumn
}

Related

responsive positioning of elements within a HTML tile

I am building a tiled web page which resizes the position of the tiles to the screen size. At the moment it all works well with a title and image centered in each tile.
i would like to add an input box but would like to position this and other elements with in the tile. i can do this with absolute positioning but when resizing the screen the input box does not move with the tile. How can I go about doing this.
body {
text-align: center;
background-color: #000000;
}
* {
box-sizing: border-box;
}
[class*="col-"] {
float: left;
padding: 5px;
}
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
#media only screen and (min-width: 768px) {
/* For desktop: */
.col-1 {
width: 8.33%;
}
.col-2 {
width: 16.66%;
}
.col-3 {
width: 25%;
}
.col-4 {
width: 33.33%;
}
.col-5 {
width: 41.66%;
}
.col-6 {
width: 50%;
}
.col-7 {
width: 58.33%;
}
.col-8 {
width: 66.66%;
}
.col-9 {
width: 75%;
}
.col-10 {
width: 83.33%;
}
.col-11 {
width: 91.66%;
}
.col-12 {
width: 100%;
}
}
#media only screen and (min-width: 600px) {
.col-m-1 {
width: 8.33%;
}
.col-m-2 {
width: 16.66%;
}
.col-m-3 {
width: 25%;
}
.col-m-4 {
width: 33.33%;
}
.col-m-5 {
width: 41.66%;
}
.col-m-6 {
width: 50%;
}
.col-m-7 {
width: 58.33%;
}
.col-m-8 {
width: 66.66%;
}
.col-m-9 {
width: 75%;
}
.col-m-10 {
width: 83.33%;
}
.col-m-11 {
width: 91.66%;
}
.col-m-12 {
width: 100%;
}
}
.DTile {
border: 2px solid blue;
background-color: #808080;
height: 200px;
}
.DGauge {
font-size: 350%;
color: #0000CD;
}
.DTitle {
color: #0000CD;
font-size: 150%;
}
.DsetTemp {
position: absolute;
left: 150px;
top: 150px;
}
.NTile {
border: 2px solid #7CFC00;
background-color: #808080;
height: 200px;
}
.NGauge {
font-size: 350%
}
.Ntitle {
color: #0000CD;
font-size: 150%;
}
.FTile {
border: 2px solid yellow;
background-color: #808080;
height: 200px;
}
.FGauge {
font-size: 350%
}
.FTitle {
color: #0000CD;
font-size: 150%;
}
.HTile {
border: 2px solid #7CFC00;
background-color: #808080;
height: 200px;
}
.HGauge {
font-size: 350%
}
.HTitle {
color: #0000CD;
font-size: 150%;
}
<div class="row">
<div class="col-3">
<div class="DTile">
<p class="DTitle"> The Den</p>
<div class="DGauge" id="Dtemp"></div>
<img src="" id="Dicon" width="80px" height="30px" vspace="10">
<input class="DsetTemp" type="text" id="DsetTemp" value="" size="2">
</div>
</div>
<div class="col-3">
<div class="FTile">
<p class="FTitle"> Front room</p>
<div class="FGauge" id="Ftemp"></div>
<img src="" id="Ficon" width="80px" height="30px" vspace="10">
</div>
</div>
<div class="col-3">
<div class="HTile">
<p class="HTitle"> Hallway</p>
<div class="HGauge" id="Htemp"></div>
<img src="" id="Hicon" width="80px" height="30px" vspace="10">
</div>
</div>
<div class="col-3">
<div class="NTile">
<p class="NTitle"> Niamh Room</p>
<div class="NGauge" id="Ntemp"></div>
<img src="" id="Nicon" width="80px" height="30px" vspace="10">
</div>
</div>
</div>
ive added a Jpeg image of my actual page. The Front room tile has three elements positioned side by side. This is what i am trying to create

Check Flexbox documentation
$(document).ready(function() {
$("#btn").click(function() {
$("#Create").toggle();
});
});
body {
text-align: center;
background-color: #000000;
}
* {
box-sizing: border-box;
}
[class*="col-"] {
float: left;
padding: 5px;
}
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
#media only screen and (min-width: 768px) {
/* For desktop: */
.col-1 {
width: 8.33%;
}
.col-2 {
width: 16.66%;
}
.col-3 {
width: 25%;
}
.col-4 {
width: 33.33%;
}
.col-5 {
width: 41.66%;
}
.col-6 {
width: 50%;
}
.col-7 {
width: 58.33%;
}
.col-8 {
width: 66.66%;
}
.col-9 {
width: 75%;
}
.col-10 {
width: 83.33%;
}
.col-11 {
width: 91.66%;
}
.col-12 {
width: 100%;
}
}
#media only screen and (min-width: 600px) {
.col-m-1 {
width: 8.33%;
}
.col-m-2 {
width: 16.66%;
}
.col-m-3 {
width: 25%;
}
.col-m-4 {
width: 33.33%;
}
.col-m-5 {
width: 41.66%;
}
.col-m-6 {
width: 50%;
}
.col-m-7 {
width: 58.33%;
}
.col-m-8 {
width: 66.66%;
}
.col-m-9 {
width: 75%;
}
.col-m-10 {
width: 83.33%;
}
.col-m-11 {
width: 91.66%;
}
.col-m-12 {
width: 100%;
}
}
.DTile {
border: 2px solid blue;
background-color: #808080;
height: 200px;
}
.DGauge {
font-size: 350%;
color: #0000CD;
}
.DTitle {
color: #0000CD;
font-size: 150%;
}
.DsetTemp {
width: 80%;
}
.NTile {
border: 2px solid #7CFC00;
background-color: #808080;
height: 200px;
}
.NGauge {
font-size: 350%
}
.Ntitle {
color: #0000CD;
font-size: 150%;
}
.FTile {
border: 2px solid yellow;
background-color: #808080;
height: 200px;
}
.FGauge {
font-size: 350%;
}
.DRandom {
display: flex;
flex-direction: column;
width: 80%;
margin: auto;
}
.DRandom-1 {
flex: 1;
margin: auto;
border: 1px solid red;
}
.DRandom-2 {
flex: 1;
display: flex;
justify-content: space-between;
border: 1px solid red;
margin: auto;
/* width:100% */
}
.DRandom-2 button {
/* flex:1; */
/* width:20%; */
}
.DRandom-2 input {
flex: 1;
}
.FTitle {
color: #0000CD;
font-size: 150%;
}
.HTile {
border: 2px solid #7CFC00;
background-color: #808080;
height: 200px;
}
.HGauge {
font-size: 350%
}
.HTitle {
color: #0000CD;
font-size: 150%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="testStyles.css">
</head>
<body>
<div class="row">
<div class="col-3">
<div class="DTile">
<p class="DTitle"> The Den</p>
<div class="DGauge" id="Dtemp"></div>
<div class="DRandom">
<div class="DRandom-1">
<img src="" id="Dicon" width="80px" height="30px" vspace="10">
</div>
<div class="DRandom-2">
<button id="btn">
Button
</button>
<input id="Create" class="DsetTemp" type="text" id="DsetTemp" value="" />
</div>
</div>
</div>
</div>
<div class="col-3">
<div class="FTile">
<p class="FTitle"> Front room</p>
<div class="FGauge" id="Ftemp"></div>
<img src="" id="Ficon" width="80px" height="30px" vspace="10">
</div>
</div>
<div class="col-3">
<div class="HTile">
<p class="HTitle"> Hallway</p>
<div class="HGauge" id="Htemp"></div>
<img src="" id="Hicon" width="80px" height="30px" vspace="10">
</div>
</div>
<div class="col-3">
<div class="NTile">
<p class="NTitle"> Niamh Room</p>
<div class="NGauge" id="Ntemp"></div>
<img src="" id="Nicon" width="80px" height="30px" vspace="10">
</div>
</div>
</div>
</body>
</html>

Scaling height in css responsive grid

I have set up a simple page with a rensponsive css grid that I read in this article on w3schools:
https://www.w3schools.com/css/css_rwd_grid.asp
The scaling on width works fine.
I have two things I am not able to sort out:
I've set up a max width on the page of 960px and when I make the viewport smaller the width scales fine, but for the buttons I have up at the top I want them to have a height of 125px when the page is at its max width and then scale down proportionaly with the width.
For the dummy2 and dummy3 buttons I want them to have 50% of the height in that grid row.
Her is a jsfiddle of what I got:
https://jsfiddle.net/nyehc0g9/
Heres the code:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
html {
margin: 0 auto;
max-width: 960px;
}
body {
background-color: black;
}
*
{
box-sizing: border-box;
}
.row::after
{
content: "";
clear: both;
display: table;
}
[class*="col-"]
{
float: left;
}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
.button
{
background-color: grey;
color: white;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
border:none;
outline: white solid;
width: 100%;
}
img {
width: 100%;
height: auto;
}
.button-0
{
width: 100%;
height: 125px;
}
.button-1
{
width: 100%;
height:50%;
display: inline-block;
}
</style>
</head>
<body>
<div class="row">
<div class="col-3"><button class="button button-0" href="">Dummy0</button></div>
<div class="col-6"><button class="button button-0" onclick="javascript:history.go(0)">Refresh page</button></div>
<div class="col-3"><button class="button button-0">Dummy1</button></div>
</div>
<div class="row">
<div class="col-5">
<img src="https://pbs.twimg.com/profile_images/737359467742912512/t_pzvyZZ.jpg"/>
</div>
<div class="col-2">
<button class="button button-1" href="">Dummy2</button>
<button class="button button-1" href="">Dummy3</button>
</div>
<div class="col-5">
<img src="https://pbs.twimg.com/profile_images/737359467742912512/t_pzvyZZ.jpg"/>
</div>
</div>
</body>
</html>

Just add
.button-0{
height: 9vw;
max-height: 125px;
}
.row{
display: flex;
display: -webkit-flex;
}
Should do the trick! Adjust the height: 9vw to whatever you think is optimal while scaling down.

Sample html page does not occupy the complete page . Remains only on on the top

below is the HTML code.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Framework Test Page</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="grid">
<div class="row">
<div class="col-2">2 Columns</div>
<div class="col-10">10 Columns</div>
</div>
<div class="row">
<div class="col-3">3 Columns</div>
<div class="col-9">9 Columns</div>
</div>
<div class="row">
<div class="col-4">4 Columns</div>
<div class="col-4">4 Columns</div>
<div class="col-4">4 Columns</div>
</div>
<div class="row">
<div class="col-3">3 Columns</div>
<div class="col-6">6 Columns</div>
<div class="col-3">3 Columns</div>
</div>
</div>
</body>
</html>
and the css file is below.
* {
border: 1px solid red !important;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.grid {
margin: 0 auto;
max-width: 1200px;
width: 100%;
}
.row {
width: 100%;
margin-bottom: 20px;
display: flex;
}
.col-1 {
width: 8.33%;
}
.col-2 {
width: 16.66%;
}
.col-3 {
width: 25%;
}
.col-4 {
width: 33.33%;
}
.col-5 {
width: 41.66%;
}
.col-6 {
width: 50%;
}
.col-7 {
width: 58.33%;
}
.col-8 {
width: 66.66%;
}
.col-9 {
width: 75%;
}
.col-10 {
width: 83.33%;
}
.col-11 {
width: 91.66%;
}
.col-12 {
width: 100%;
}
The Chrome web browser displays it as below.
Why is the bottom part of the page empty. I tried setting attributes
max-height:100% to the grid class in css file but it did not make any difference.
I am using chrome browser Version 57.0.2987.133 (64-bit)
and OS Ubuntu 16.04(64-bit).

If you want your page to be always at least as high as the window, you have to add this CSS:
html,
body {
height: 100%;
margin: 0;
}
Note: I also added a background color to this rule below to show the actual size.
You could also add height: 100%; to .grid, but I don't know if you really want that.
html,
body {
height: 100%;
margin: 0;
background: #eee;
}
* {
border: 1px solid red !important;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.grid {
margin: 0 auto;
max-width: 1200px;
width: 100%;
}
.row {
width: 100%;
margin-bottom: 20px;
display: flex;
}
.col-1 {
width: 8.33%;
}
.col-2 {
width: 16.66%;
}
.col-3 {
width: 25%;
}
.col-4 {
width: 33.33%;
}
.col-5 {
width: 41.66%;
}
.col-6 {
width: 50%;
}
.col-7 {
width: 58.33%;
}
.col-8 {
width: 66.66%;
}
.col-9 {
width: 75%;
}
.col-10 {
width: 83.33%;
}
.col-11 {
width: 91.66%;
}
.col-12 {
width: 100%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Framework Test Page</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="grid">
<div class="row">
<div class="col-2">2 Columns</div>
<div class="col-10">10 Columns</div>
</div>
<div class="row">
<div class="col-3">3 Columns</div>
<div class="col-9">9 Columns</div>
</div>
<div class="row">
<div class="col-4">4 Columns</div>
<div class="col-4">4 Columns</div>
<div class="col-4">4 Columns</div>
</div>
<div class="row">
<div class="col-3">3 Columns</div>
<div class="col-6">6 Columns</div>
<div class="col-3">3 Columns</div>
</div>
</div>
</body>
</html>
ADDED AFTER COMMENT:
A second example, this time with heightsettings for all classes. As you can see, these always depend on each element's parent's height, and they will become higher automatically if there is more content, so this isn't really useful in most real-world situations:
html,
body {
height: 100%;
margin: 0;
background: #eee;
}
* {
border: 1px solid red !important;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.grid {
margin: 0 auto;
max-width: 1200px;
width: 100%;
height: 100%;
}
.row {
width: 100%;
height: 25%;
}
.row > * {
height: 33.33%;
}
.col-1 {
width: 8.33%;
}
.col-2 {
width: 16.66%;
}
.col-3 {
width: 25%;
}
.col-4 {
width: 33.33%;
}
.col-5 {
width: 41.66%;
}
.col-6 {
width: 50%;
}
.col-7 {
width: 58.33%;
}
.col-8 {
width: 66.66%;
}
.col-9 {
width: 75%;
}
.col-10 {
width: 83.33%;
}
.col-11 {
width: 91.66%;
}
.col-12 {
width: 100%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Framework Test Page</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="grid">
<div class="row">
<div class="col-2">2 Columns</div>
<div class="col-10">10 Columns</div>
</div>
<div class="row">
<div class="col-3">3 Columns</div>
<div class="col-9">9 Columns</div>
</div>
<div class="row">
<div class="col-4">4 Columns</div>
<div class="col-4">4 Columns</div>
<div class="col-4">4 Columns</div>
</div>
<div class="row">
<div class="col-3">3 Columns</div>
<div class="col-6">6 Columns</div>
<div class="col-3">3 Columns</div>
</div>
</div>
</body>
</html>

Try this:
html {
height: 100%;
}
html {
height: 100%;
}
* {
border: 1px solid red !important;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.grid {
margin: 0 auto;
max-width: 1200px;
width: 100%;
}
.row {
width: 100%;
margin-bottom: 20px;
display: flex;
}
.col-1 {
width: 8.33%;
}
.col-2 {
width: 16.66%;
}
.col-3 {
width: 25%;
}
.col-4 {
width: 33.33%;
}
.col-5 {
width: 41.66%;
}
.col-6 {
width: 50%;
}
.col-7 {
width: 58.33%;
}
.col-8 {
width: 66.66%;
}
.col-9 {
width: 75%;
}
.col-10 {
width: 83.33%;
}
.col-11 {
width: 91.66%;
}
.col-12 {
width: 100%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Framework Test Page</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="grid">
<div class="row">
<div class="col-2">2 Columns</div>
<div class="col-10">10 Columns</div>
</div>
<div class="row">
<div class="col-3">3 Columns</div>
<div class="col-9">9 Columns</div>
</div>
<div class="row">
<div class="col-4">4 Columns</div>
<div class="col-4">4 Columns</div>
<div class="col-4">4 Columns</div>
</div>
<div class="row">
<div class="col-3">3 Columns</div>
<div class="col-6">6 Columns</div>
<div class="col-3">3 Columns</div>
</div>
</div>
</body>
</html>

Custom Css Grid with Vanilla Css (No Framework)

I'm trying to get a div element that is split in half and in one of the halfs, have 4 equal square boxes.
So far I think I have the initial set up but when I try to produce the 4 squares within one of the halfs one overflows past the other leaving both halfs not equal. I hope the code snippet might help
<!DOCTYPE html>
<html>
<head>
<title> Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
border: 0;
background: gray;
min-width: 100%;
}
.container {
min-width: 100%;
margin: 0 auto;
padding: 4px ;
}
[class*="col-"] {
float: left;
padding: 0;
margin: 0;
border: 0;
width:inherit
}
/* GRID SYSTEM */
.row::after {
content: '';
clear: both;
display: block;
}
#media only screen
and (min-width : 300px)
and (max-width : 640px) {
.col { float: left;}
.col { float: left;}
.mobile-not {
display:none;
}
}
#media only screen
and (min-width: 768px) {
.col { float: left;}
.col-6-md { width: 50%; }
}
#media only screen
and (min-width : 1224px) {
.col-1 { width: 8.33%; }
.col-2 { width: 16.66%; }
.col-2-sm {width: inherit; }
.col-3 { width: 25%; }
.col-4 { width: 33.33%; }
.col-5 { width: 41.66%; }
.col-6 { width: 50%; }
.col-6-md {
display:block;
width: inherit;
}
.col-7 { width: 58.33%; }
.col-8 { width: 66.66%; }
.col-9 { width: 75%; }
.col-10 { width: 83.33%; }
.col-11 { width: 91.66%; }
.col-12 { width: 100%; }
}
img {
width: 100%;
}
.text-demo {
background-color: #0099ff;
}
.text-prop {
padding-right: 20px;
color:white;
text-align: right;
width:100%;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-6">
<a href="/search/">
<img src="https://lh3.googleusercontent.com/xVYh_uJU1fipLAg85BABZvd5rmSTCg-lSFkZR78jP9lCNxjVRHF8dcIkRE_sGh7ReMWs0xo0azaV-nnCsZ-BVbPBVEjZuVi6uojDNHaDlohDCNM2hGL02nASyMhhdWH5yZ6ZjKF2di8IC6HCkDS-VZ5UBb4eryKcmtbKvpDRm7q-knmu_C9GQx3CsNjQIkZhpmoI6asAlrs_DkJK2hgLN_n-lXFBhLDEQnnYMWR1iYLa3yePtSPVHSzzKOODpNPQqZM9oVtNRizEIysesic__qzrHW0bSmEANsnhutwK--2Cs4jc96isl0XQdKfsqTHzcG_Nc5g2-gIegFHnDWYxsh-KgqLtizc4VaBB2oe1BhUN98pIblCkSVgr88PNSPzeqdF6Dz1fjxCqbD1uvuhfPlhiDmcrmLFyf9fzqYzQtOFLyZuojLohGjivsMYhUkSdghen7XkkdvJx-6lK9baVw4kHXp7M1ZbufApnT8wb1PPBmA8Y1TqkeRQkIfBnEbX5G6VWRNiq0AIOWwkvJSwxGLlwL7Kuh7p77JbTqyn-0w1ydDq80bmFKtvnvnf2AQEvmuTFdgSiFAMWJbYlb5o8_nnuGvATqmCd57DanPW8mOsrULpfaTHi=w468-h379-no">
</a>
</div>
<div class="col-6">
<div class="col-2-sm">
<a href="/search/">
<img src="https://lh3.googleusercontent.com/xVYh_uJU1fipLAg85BABZvd5rmSTCg-lSFkZR78jP9lCNxjVRHF8dcIkRE_sGh7ReMWs0xo0azaV-nnCsZ-BVbPBVEjZuVi6uojDNHaDlohDCNM2hGL02nASyMhhdWH5yZ6ZjKF2di8IC6HCkDS-VZ5UBb4eryKcmtbKvpDRm7q-knmu_C9GQx3CsNjQIkZhpmoI6asAlrs_DkJK2hgLN_n-lXFBhLDEQnnYMWR1iYLa3yePtSPVHSzzKOODpNPQqZM9oVtNRizEIysesic__qzrHW0bSmEANsnhutwK--2Cs4jc96isl0XQdKfsqTHzcG_Nc5g2-gIegFHnDWYxsh-KgqLtizc4VaBB2oe1BhUN98pIblCkSVgr88PNSPzeqdF6Dz1fjxCqbD1uvuhfPlhiDmcrmLFyf9fzqYzQtOFLyZuojLohGjivsMYhUkSdghen7XkkdvJx-6lK9baVw4kHXp7M1ZbufApnT8wb1PPBmA8Y1TqkeRQkIfBnEbX5G6VWRNiq0AIOWwkvJSwxGLlwL7Kuh7p77JbTqyn-0w1ydDq80bmFKtvnvnf2AQEvmuTFdgSiFAMWJbYlb5o8_nnuGvATqmCd57DanPW8mOsrULpfaTHi=w468-h379-no">
</a>
</div>
<div class="col-2-sm mobile-not">
<div class="text-demo">
<div class="text-prop">
<br>
<font size="3.5"> <strong>Wcsho </strong> </font><br>
<font size="6"> <strong>Demo Site </strong><br></font><br>
<font size="3"> SALES: 888-888-1234<br>
SERVICE: 888-888-1234<br>
Custom: 888-888-1234<br>
</font>
<br>
<font size="2">
<a href="/hours-and-directions/">
918 greenville Rd,<br> uk
</a>
</font>
<br><br>
</div>
<br>
</div>
</div>
<br style="clear:both" />
<div class="col-2-sm">
<a href="/search/">
<img src="https://lh3.googleusercontent.com/xVYh_uJU1fipLAg85BABZvd5rmSTCg-lSFkZR78jP9lCNxjVRHF8dcIkRE_sGh7ReMWs0xo0azaV-nnCsZ-BVbPBVEjZuVi6uojDNHaDlohDCNM2hGL02nASyMhhdWH5yZ6ZjKF2di8IC6HCkDS-VZ5UBb4eryKcmtbKvpDRm7q-knmu_C9GQx3CsNjQIkZhpmoI6asAlrs_DkJK2hgLN_n-lXFBhLDEQnnYMWR1iYLa3yePtSPVHSzzKOODpNPQqZM9oVtNRizEIysesic__qzrHW0bSmEANsnhutwK--2Cs4jc96isl0XQdKfsqTHzcG_Nc5g2-gIegFHnDWYxsh-KgqLtizc4VaBB2oe1BhUN98pIblCkSVgr88PNSPzeqdF6Dz1fjxCqbD1uvuhfPlhiDmcrmLFyf9fzqYzQtOFLyZuojLohGjivsMYhUkSdghen7XkkdvJx-6lK9baVw4kHXp7M1ZbufApnT8wb1PPBmA8Y1TqkeRQkIfBnEbX5G6VWRNiq0AIOWwkvJSwxGLlwL7Kuh7p77JbTqyn-0w1ydDq80bmFKtvnvnf2AQEvmuTFdgSiFAMWJbYlb5o8_nnuGvATqmCd57DanPW8mOsrULpfaTHi=w468-h379-no">
</a>
</div>
<div class="col-2-sm">
<a href="/search/">
<img src="https://lh3.googleusercontent.com/xVYh_uJU1fipLAg85BABZvd5rmSTCg-lSFkZR78jP9lCNxjVRHF8dcIkRE_sGh7ReMWs0xo0azaV-nnCsZ-BVbPBVEjZuVi6uojDNHaDlohDCNM2hGL02nASyMhhdWH5yZ6ZjKF2di8IC6HCkDS-VZ5UBb4eryKcmtbKvpDRm7q-knmu_C9GQx3CsNjQIkZhpmoI6asAlrs_DkJK2hgLN_n-lXFBhLDEQnnYMWR1iYLa3yePtSPVHSzzKOODpNPQqZM9oVtNRizEIysesic__qzrHW0bSmEANsnhutwK--2Cs4jc96isl0XQdKfsqTHzcG_Nc5g2-gIegFHnDWYxsh-KgqLtizc4VaBB2oe1BhUN98pIblCkSVgr88PNSPzeqdF6Dz1fjxCqbD1uvuhfPlhiDmcrmLFyf9fzqYzQtOFLyZuojLohGjivsMYhUkSdghen7XkkdvJx-6lK9baVw4kHXp7M1ZbufApnT8wb1PPBmA8Y1TqkeRQkIfBnEbX5G6VWRNiq0AIOWwkvJSwxGLlwL7Kuh7p77JbTqyn-0w1ydDq80bmFKtvnvnf2AQEvmuTFdgSiFAMWJbYlb5o8_nnuGvATqmCd57DanPW8mOsrULpfaTHi=w468-h379-no">
</a>
</div>
</div>
</div>
</div>
</body>
</html>
Any help would be appreciative, I can't figure out how to get everything to fit equally.

Here is an example using flexbox with pure CSS.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.row{
display: flex;
}
.col{
flex: 1;
margin: 0 1rem;
border: 1px solid black;
}
.square{
background-color: red;
flex: 1;
}
.square:after{
content: '';
display: block;
padding-bottom: 100%;
}
<div class="row">
<div class="col"></div>
<div class="col row">
<div class="col square"></div>
<div class="col square"></div>
<div class="col square"></div>
<div class="col square"></div>
</div>
</div>

Why wouldn't display: flex; work?

I am learning HTML/CSS at Udacity. I am trying to get the first row items col-2 and col-10 to fall in the same row next to each other but the display: flex; wouldn't work. Any pointers please?
*{
border: red solid 1px; !important
}
*{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
*{
text-align: center;
}
}
.row {
width : 100%;
display: flex;
}
.col-1 {
width: 8.33%;
}
.col-2 {
width: 16.66%;
}
.col-3 {
width: 25%;
}
.col-4 {
width: 33.33%;
}
.col-5 {
width: 41.66%;
}
.col-6 {
width: 50%;
}
.col-7 {
width: 58.33%;
}
.col-8 {
width: 66.66%;
}
.col-9 {
width: 75%;
}
.col-10 {
width: 83.33%;
}
.col-11 {
width: 91.66%;
}
.col-12 {
width: 100%;
}
<!DOCTYPE HTML>
<head>
<title>FRONT-END NINJA</title>
<link rel="stylesheet" type="text/css" href="FroEndNja.css">
</head>
<body>
<div class="row">
<div class="col-2">Udacity Logo</div>
<div class="col-10">JANE DOETTE<br>FRONT-END NINJA</div>
</div>
<div class="row">
<div class="col-12">IMAGE</div>
</div>
<div class="row">
<div class="col-12">FEATURED WORK</div>
</div>
<div class="row">
<div class="col-4">IMAGE1</div>
<div class="col-4">IMAGE2</div>
<div class="col-4">IMAGE3</div>
</div>
<div class="row">
<div class="col-4">TEXT1</div>
<div class="col-4">TEXT2</div>
<div class="col-4">TEXT3</div>
</div>
</body>
Thank you,
Abhilash

You have an extra closing brace in your CSS which was throwing an error
*{
text-align: center;
}
} /* here */
.row {
width : 100%;
display: flex;
}
* {
border: red solid 1px;
box-sizing: border-box;
text-align: center;
margin: 0;
padding: 0;
}
.row {
display: flex;
}
.col-1 {
width: 8.33%;
}
.col-2 {
width: 16.66%;
}
.col-3 {
width: 25%;
}
.col-4 {
width: 33.33%;
}
.col-5 {
width: 41.66%;
}
.col-6 {
width: 50%;
}
.col-7 {
width: 58.33%;
}
.col-8 {
width: 66.66%;
}
.col-9 {
width: 75%;
}
.col-10 {
width: 83.33%;
}
.col-11 {
width: 91.66%;
}
.col-12 {
width: 100%;
}
<!DOCTYPE HTML>
<head>
<title>FRONT-END NINJA</title>
<link rel="stylesheet" type="text/css" href="FroEndNja.css">
</head>
<body>
<div class="row">
<div class="col-2">Udacity Logo</div>
<div class="col-10">JANE DOETTE
<br>FRONT-END NINJA</div>
</div>
<div class="row">
<div class="col-12">IMAGE</div>
</div>
<div class="row">
<div class="col-12">FEATURED WORK</div>
</div>
<div class="row">
<div class="col-4">IMAGE1</div>
<div class="col-4">IMAGE2</div>
<div class="col-4">IMAGE3</div>
</div>
<div class="row">
<div class="col-4">TEXT1</div>
<div class="col-4">TEXT2</div>
<div class="col-4">TEXT3</div>
</div>
</body>

Try the flex-direction property, it should work if you set it to row ? Also, use autoprefixer if you use flexbox so that your stuff works across browsers.