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.
Related
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>
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>
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>
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
}
Given the image below, how do I mark up 3 small container so that are fluid and responsive?
Here is my code,
<div class="container-fluid" style=";height: 350px;">
<div class="row-fluid" style="height: 100%;">
<div class="span9" style="height: 100%;">
<div class="row-fluid"style="height: 50%">
<div class="span12" style="height: 100%;">
<div class="span4" style="background-color: violet;height: 100%">
</div>
<div class="span4" style="background-color:green;height: 100%">
</div>
<div class="span4" style="background-color: orange;height: 100%">
</div>
</div>
</div>
<div class="row-fluid" style="background-color: #ffff00;height: 48%;margin-top: 5px">
</div>
</div>
<div class="span3" style="background-color: pink;height: 100%;">
</div>
</div>
</div>
expected output:
My trail is as below.
Note: Please do not use inline CSS as it is not a good practice. convert all the css to classes and apply to the HTML elements
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div style="height: 350px;" class="container-fluid">
<div style="height: 100%;" class="row-fluid">
<div style="height: 100%; float: left; width: 82%;" class="span9">
<div style="height: 50%; width: 100%;" class="row-fluid">
<div style="background-color: violet; height: 100%; float: left; margin: 5px; width: 31%;" class="span4">
</div>
<div style="background-color: green; height: 100%; float: left; margin: 5px; width: 31%;" class="span4">
</div>
<div style="background-color: orange; height: 100%; float: left; margin: 5px; width: 31%;" class="span4">
</div>
</div>
<div style="background-color: rgb(255, 255, 0); float: left; height: 50%; margin: 5px; width: 95%;" class="row-fluid">
</div>
</div>
<div style="background-color: pink; width: 20%; float: left; margin: 5px 5px 5px -34px; height: 100%;" class="span3">
</div>
</div>
</div>
</body>
</html>
You can use this CSS
[class*="span"] {
float: left;
min-height: 1px;
margin-left: 20px;
}
.container,
.navbar-static-top .container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
width: 940px;
}
.span12 {
width: 940px;
}
.span11 {
width: 860px;
}
.span10 {
width: 780px;
}
.span9 {
width: 700px;
}
.span8 {
width: 620px;
}
.span7 {
width: 540px;
}
.span6 {
width: 460px;
}
.span5 {
width: 380px;
}
.span4 {
width: 300px;
}
.span3 {
width: 220px;
}
.span2 {
width: 140px;
}
.span1 {
width: 60px;
}
.offset12 {
margin-left: 980px;
}
.offset11 {
margin-left: 900px;
}
.offset10 {
margin-left: 820px;
}
.offset9 {
margin-left: 740px;
}
.offset8 {
margin-left: 660px;
}
.offset7 {
margin-left: 580px;
}
.offset6 {
margin-left: 500px;
}
.offset5 {
margin-left: 420px;
}
.offset4 {
margin-left: 340px;
}
.offset3 {
margin-left: 260px;
}
.offset2 {
margin-left: 180px;
}
.offset1 {
margin-left: 100px;
}
.row-fluid {
width: 100%;
*zoom: 1;
}
.row-fluid:before,
.row-fluid:after {
display: table;
line-height: 0;
content: "";
}
.row-fluid:after {
clear: both;
}
.row-fluid [class*="span"] {
display: block;
float: left;
width: 100%;
min-height: 30px;
margin-left: 2.127659574468085%;
*margin-left: 2.074468085106383%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.row-fluid [class*="span"]:first-child {
margin-left: 0;
}
.row-fluid .controls-row [class*="span"] + [class*="span"] {
margin-left: 2.127659574468085%;
}
.row-fluid .span12 {
width: 100%;
*width: 99.94680851063829%;
}
.row-fluid .span11 {
width: 91.48936170212765%;
*width: 91.43617021276594%;
}
.row-fluid .span10 {
width: 82.97872340425532%;
*width: 82.92553191489361%;
}
.row-fluid .span9 {
width: 74.46808510638297%;
*width: 74.41489361702126%;
}
.row-fluid .span8 {
width: 65.95744680851064%;
*width: 65.90425531914893%;
}
.row-fluid .span7 {
width: 57.44680851063829%;
*width: 57.39361702127659%;
}
.row-fluid .span6 {
width: 48.93617021276595%;
*width: 48.88297872340425%;
}
.row-fluid .span5 {
width: 40.42553191489362%;
*width: 40.37234042553192%;
}
.row-fluid .span4 {
width: 31.914893617021278%;
*width: 31.861702127659576%;
}
.row-fluid .span3 {
width: 23.404255319148934%;
*width: 23.351063829787233%;
}
.row-fluid .span2 {
width: 14.893617021276595%;
*width: 14.840425531914894%;
}
.row-fluid .span1 {
width: 6.382978723404255%;
*width: 6.329787234042553%;
}
[class*="span"].hide,
.row-fluid [class*="span"].hide {
display: none;
}
[class*="span"].pull-right,
.row-fluid [class*="span"].pull-right {
float: right;
}
.container {
margin-right: auto;
margin-left: auto;
*zoom: 1;
}
.container:before,
.container:after {
display: table;
line-height: 0;
content: "";
}
.container:after {
clear: both;
}
.container-fluid {
padding-right: 20px;
padding-left: 20px;
*zoom: 1;
}
.container-fluid:before,
.container-fluid:after {
display: table;
line-height: 0;
content: "";
}
.container-fluid:after {
clear: both;
}