So as you can see on this image:
I want to make a page design as above, but I can not place the checkboxes like on the picture (centered, under it's right times, above it's spaces)
Currently I am here:
body {
background-color: gray;
}
#head {
padding-top: 20px;
text-align:center;
display:block;
}
#container {
background-color: #1b345e;;
}
h2 {
text-align: center;
font-family: Arial, Helvetica, sans-serif;
background-color: #1b345e;
color: white;
}
.topnav {
position: relative;
background-color: #333;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add a color to the active/current link */
.topnav a.active {
background-color: #4CAF50;
color: white;
}
/* Centered section inside the top navigation */
.topnav-centered a {
float: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* Right-aligned section inside the top navigation */
.topnav-right {
float: right;
}
input {
margin-left: 49%;
width: 30px;
height: 30px;
}
.checkboxes{
display: inline;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Piarista Kollégium - Stúdiumi jelentkezés</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="main.js"></script>
</head>
<body>
<div id="container">
<div class="topnav">
<div class="topnav-centered">
Jelentkezés
</div>
Frissítések
<div class="topnav-right">
Bejelentkezés
</div>
</div>
<div id="head">
<img src="logo.png">
</div>
<h2>Üdvözöllek, XY!</h2>
</div>
<div class="checkboxes">
<div>
<h4>14:30-15:15</h4>
<input type="checkbox">
</div>
<div>
<h4>14:30-15:15</h4>
<input type="checkbox">
</div>
<div>
<h4>14:30-15:15</h4>
<input type="checkbox">
</div>
<div>
<h4>14:30-15:15</h4>
<input type="checkbox">
</div>
<div>
<h4>14:30-15:15</h4>
<input type="checkbox">
</div>
<div>
<h4>14:30-15:15</h4>
<input type="checkbox">
</div>
</div>
</body>
</html>
But as you can see, I am not doing it the right way. Can someone help me or explain me how I could place my elements like on the picture?
(The header part is finished)
Center the elements using flexbox and use justify-content: center to align them.
.checkboxes {
display: flex;
flex-wrap: wrap;
width: 100%;
justify-content: center;
}
.checkboxes div {
text-align: center;
margin: 0 10px;
}
Here is a working example: https://codepen.io/dobladov/pen/pqqypY
Related
I have built a standard footer, emulating the tourlife.com footer. However my link next to the instagram image isn't centered with the image, also the links "terms" and "help" are also out of alignment with the form. This is my second attempt using w3school's 'css grid of boxes/ equal width boxes'.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<footer class="clearfix">
<div class="box">
<img class="ig_logo" src="images/instagramicon.jpg">
#TOURLIFE
</div>
<div class="box">
<a class="biggertext" href="#">TERMS</a>
<a class="biggertext" href="#">HELP</a>
<form class="form">
<input class="enter" type="email" placeholder="email">
<button type="submit" class="button_1">SUBSCRIBE</button>
</form>
</div>
<div class="box">
<p>© Copyright Ben Cotta 2020</p>
</div>
</footer>
</body>
</html>
CSS:
* {
margin: 0;
padding: 0;
text-decoration: none;
}
/* Main Footer */
.box {
float: left;
width: 33.33%;
padding: 20px 0px;
box-sizing: border-box;
text-align: center;
color: black;
font-size: 13px;
border-top: 1px solid black;
}
.clearfix::after {
content: " ";
clear: both;
display: table;
}
.box .biggertext {
font-size: 16px;
padding: 0px 4px;
margin-left: 6px;
}
.box a:visited {
color: black;
}
.ig_logo {
height: 100%;
width: 20px;
}
/* Middle Box */
.form {
float: right;
}
.enter {
width: 10vw;
margin-right: 10px;
padding: 6px 10px;
}
.button_1 {
background-color: black;
color: white;
padding: 6px 10px;
width: 8vw;
font-size: 12px;
text-align: center;
}
/* Right Box */
This is way easier to do with flexbox.
When you set your box width to 33.33% it doesn't know what to refer to. If you set the height of your body it will automatically give 100% width of your screen and the child to your body has a reference.
By typing "display: flexbox" your items under that class will align in a row. Voila!
By using "justify-content", you can decide how you want to spread your items and with "align-items" you can center your items vertically. You must give them space to do this though.
Your Instagram-pic didn't work, so I added a new link. I think it should work.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Main Footer */
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: Arial, Helvetica, sans-serif;
}
.clearfix {
border-top: 1px solid black;
width: 80%;
height: 80px;
display: flex;
justify-content: space-between;
align-items: center;
}
.box {
display: flex;
align-items: center;
}
.box a {
text-decoration: none;
padding-right: 10px;
color: #000;
}
.button_1 {
background-color: black;
color: #fff;
border: none;
outline: none;
padding: 10px;
}
.enter {
padding: 8px 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="/style.css" />
</head>
<body>
<footer class="clearfix">
<div class="box">
<img src="https://img.icons8.com/fluent/48/000000/instagram-new.png" />
#TOURLIFE
</div>
<div class="box">
<a class="biggertext" href="#">TERMS</a>
<a class="biggertext" href="#">HELP</a>
<form class="form">
<input class="enter" type="email" placeholder="email" />
<button type="submit" class="button_1">SUBSCRIBE</button>
</form>
</div>
<div class="box">
<p>© Copyright Ben Cotta 2020</p>
</div>
</footer>
</body>
</html>
https://jsfiddle.net/battleaxe/5rc9asn0/
I am trying to do media query on the "about" page of my website but I seem to have an issue. In the original CSS, I divided "information" into 2 columns and left right padding so the window doesn't flow all the way to the screen. However, When doing media query, the padding and the grid stays the same which gave my website extra space on the right that I don't want. I was wondering how I can change that?
I've tried changing those property inside of media query but it doesn't seem to affect the website at all.
I've tried:
grid-template-columns: repeat(1,1fr)
padding-right:0px;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Portfolio</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="css/main.css" />
<link rel="stylesheet" href="https://unpkg.com/#blaze/css#3.2.0/dist/blaze.css">
<link href="https://fonts.googleapis.com/css?family=Didact+Gothic" rel="stylesheet">
<script src="https://unpkg.com/#blaze/atoms#6.1.0/dist/blaze-atoms.js"></script>
<script src="javascript/main.js"></script>
<script src="javascript/jquery.js"></script>
</head>
<body>
<div class="cotainer">
<div class="title">
About Me!
</div>
<div class="information">
<div class="span-row-2">
<img src="images/profile.svg" id="logo">
</div>
<div class="tabs">
<input type="radio" name="tabs" id="tabone" checked="checked">
<label for="tabone">Education</label>
<div class="tab">
<h1 class="phrase">San Jose State University</h1>
<blaze-divider class="divider">Major</blaze-divider>
<div class="major">Digital Media Art</div>
</div>
<input type="radio" name="tabs" id="tabtwo">
<label for="tabtwo">Contacts</label>
<div class="tab">
<h1 class="phrase">Stay in touch!</h1>
<blaze-divider class="divider">Get Connected</blaze-divider>
<div class="socials">
Facebook
Instagram
Linkedin
Resume
</div>
</div>
</div>
</div>
<nav id="mainnav" class="group">
<div id="menu">≡ Menu</div>
<ul>
<li>About</li>
<li>Home</li>
<li>Portfolio</li>
</ul>
</nav>
<script>
$(document).ready(function() {
// JQUERY NAV TOGGLE
$('#menu').bind('click',function(event){
$('#mainnav ul').slideToggle();
});
$(window).resize(function(){
var w = $(window).width();
if(w > 768) {
$('#mainnav ul').removeAttr('style');
}
});
});
</script>
</body>
</html>
information {
display: grid;
grid-template-columns: repeat(2, 1fr);
padding-right: 50px;
background:#323526;
padding-bottom: 50%;
}
.span-row-2{
grid-row: span 2 / auto;
align-items: center;
margin:10vw;
}
.tabs {
display: flex;
flex-wrap: wrap;
}
.tabs label {
order: 1;
display: block;
padding: 1rem 3rem;
margin-top:70px;
cursor: pointer;
transition: background ease 0.2s;
width:50%;
text-align: center;
border-bottom: 1px solid #C28710;
color: #C28710;
font-size: 1.5vw;
letter-spacing: 2px;
}
.tabs .tab {
order: 99;
flex-grow: 1;
width: 100%;
display: none;
padding: 1rem;
}
.tab{
border-radius: 0px 0px 20px 20px;
background-color: rgba(0, 0, 0, 0.2);
}
.tabs input[type="radio"] {
display: none;
}
.tabs input[type="radio"]:checked + label {
border-bottom: 4px solid #C28710;
font-weight: bold;
}
.tabs input[type="radio"]:checked + label + .tab {
display: block;
}
#media (max-width: 45em) {
.tabs label,
.tab .tabs {
order: initial;
}
.tabs label {
width: 100%;
margin-right: 0;
margin-top: 2rem;
}
}
#media all and (max-width:650px){
.span-row-2{
grid-row: span 2 / auto;
align-items: center;
margin:40px;
min-width:250px;
min-height: 250px;
grid-area: main;
}
.tabs label {
order: 1;
display: block;
margin-top:20px;
cursor: pointer;
transition: background ease 0.2s;
width:50%;
text-align: center;
border-bottom: 1px solid #C28710;
color: #C28710;
font-size: 15px;
letter-spacing: 2px;
}
.information{
grid-template-columns:repeat(1,1fr);
padding-right:0px;
}
}
What I got
Desired affect
It's unclear to me what your desired outcome is here, but one thing I noticed is there seems to be some conflict between your two media queries.
The rules under the max-width:45em media query are overridden by those under max-width:650px
Hope that helps?
¯\_(ツ)_/¯
I am currently working on an image gallery where I have different sections that have multiple images. I am currently trying to set up each section of images to be a single row and scoll horizontally similar to what netflix does. Right now I've been unable to get the container to overflow in the x to work and instead goes to a second row.
I've tried using
white-space: nowrap
overflow-x: auto;
overflow-y:hidden;
display: inline-block;
I've also tried taking a containing div for the list and rotating it 90 deg and allow vertical scrolling and then rotating a child div back.
The best I've been able to get for the effect I'm trying to acheive is the second example but I've been unable to get the width correct on the containing wrapper. I'm trying to get the row all the way across.
First example.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>list testing</title>
<style>
body {
background-color: #2e2e2e;
margin: 0px;
padding: 0px;
color: white;
}
.galleryContainer {
width: 100%;
margin: 0px;
text-align: center;
}
.gallery {
width: 90%;
text-align: center;
margin: 0% 5% 0% 5%;
}
.sectionWrapper {
width: 100;
height: 100%;
overflow-y: auto;
overflow-x: auto;
}
.section {
height: 100%;
width: 100%;
display: inline-block;
text-align: center;
margin: 0px;
padding: 0.75% 0 0.75% 0;
}
ul > .gallery {
float: left;
white-space: nowrap;
overflow-x: auto;
}
ul > li {
list-style-type: none;
display: inline;
}
li {
float: left;
width: 250px;
height: 200px;
margin-left: 1%;
margin-top: 1%;
border: 1px solid #999999;
background-color: #203d68;
display: inline;
}
li:hover {
filter: grayscale(100%);
transform: scale(1.1);
box-shadow: 4px 4px 4px #222222;
transition: 0.5s ease;
}
h2 {
display: inline-block;
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<div class="galleryContainer">
<div class="gallery">
<div class="sectionWrapper">
<div class="section">
<h2>section 1</h2>
<ul>
<li>test_1</li>
<li>test_2</li>
<li>test_3</li>
<li>test_4</li>
<li>test_5</li>
<li>test_6</li>
<li>test_1A</li>
<li>test_2A</li>
</ul>
</div>
</div>
<div class="sectionWrapper">
<div class="section">
<h2>section 2</h2>
<ul>
<li>test_7</li>
<li>test_8</li>
<li>test_9</li>
<li>test_10</li>
<li>test_11</li>
<li>test_12</li>
</ul>
</div>
</div>
<div class="sectionWrapper">
<div class="section">
<h2>section 3</h2>
<ul>
<li>test_13</li>
<li>test_14</li>
<li>test_15</li>
<li>test_16</li>
<li>test_17</li>
<li>test_18</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
Second Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>list testing</title>
<style>
body {
background-color: #2e2e2e;
margin: 0px;
padding: 0px;
color: white;
}
.galleryContainer {
width: 100%;
margin: 0px;
text-align: center;
}
.gallery {
width: 90%;
text-align: center;
margin: 0% 5% 0% 5%;
}
.sectionWrapper {
width: 100;
height: 100%;
overflow-y: auto;
overflow-x: auto;
transform: rotate(-90deg);
/* transform-origin: right top; */
}
.section {
height: 100%;
width: 100%;
display: inline-block;
text-align: center;
margin: 0px;
padding: 0.75% 0 0.75% 0;
transform: rotate(90deg);
/* transform-origin: right top; */
}
ul > .gallery {
width: 100%;
height: 100%;
float: left;
display: inline;
}
ul > li {
list-style-type: none;
display: inline;
}
li {
float: left;
width: 250px;
height: 200px;
margin-left: 1%;
margin-top: 1%;
border: 1px solid #999999;
background-color: #203d68;
display: inline;
}
li:hover {
filter: grayscale(100%);
transform: scale(1.1);
box-shadow: 4px 4px 4px #222222;
transition: 0.5s ease;
}
h2 {
display: inline-block;
font-family: Arial, Helvetica, sans-serif;
width: 100%;
margin-top: 0;
margin-bottom: 0;
}
</style>
</head>
<body>
<div class="galleryContainer">
<div class="gallery">
<div class="sectionWrapper">
<div class="section">
<h2>section 1</h2>
<ul>
<li>test_1</li>
<li>test_2</li>
<li>test_3</li>
<li>test_4</li>
<li>test_5</li>
<li>test_6</li>
<li>test_1A</li>
<li>test_2A</li>
</ul>
</div>
</div>
<!-- <div class="section">
<h2>section 2</h2>
<ul>
<li>test_7</li>
<li>test_8</li>
<li>test_9</li>
<li>test_10</li>
<li>test_11</li>
<li>test_12</li>
</ul>
</div>
<div class="section">
<h2>section 3</h2>
<ul>
<li>test_13</li>
<li>test_14</li>
<li>test_15</li>
<li>test_16</li>
<li>test_17</li>
<li>test_18</li>
</ul>
</div> -->
</div>
</div>
</body>
</html>
In the second exampe I'm getting the scolling I'm looking to get but not the width. Any help would be much appreciated.
You can add a fixed width to your .section wrapper instead of 100%
example: 1000px
Both display:inline-block and float:left will detect if there are spaces beside them so you should set a fixed width container.
So I am new to coding and stuff and I am wondering why there is a space of the body in between the divs in this fiddle?
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>title</title>
<link href="main.css" rel="stylesheet" type="text/css">
<meta charset="UTF-8">
</head>
<!-- body -->
<body>
<div class="top-navbar navbar" id="color-1">
About
Art
Home
</div>
<div class="image">
<img src="sgrumble.png" alt="sg-rumble" class="front-image">
</div>
<div class="top-bar-2 navbar" id="color-1">
Project
Champions
divname2
divname3
</div>
<div class="about-text" id="color-1">
<h4>title</h4>
<p>short info text about text text text text text text text text text</p>
</div>
<div class="collection art" id="project color-2">
<h3>text</h3>
<p>text.</p>
<div class="project-blue">
<img src="/asset/images/project-ashe256x256.png" class="project-ashe">
</div>
CSS:
body {
margin: 0;
padding: 0;
background-color: green;
}
#color-1 {
background-color: #d3d3d3;
}
#color-2 {
background-color: #fff;
}
.top-navbar {
width: 100%;
height: 50px;
}
.top-navbar a {
padding: 14px 16px;
text-align: center;
float: right;
display: block;
color: black;
text-decoration: none;
}
.top-navbar a:hover {
background-color: #8a8a8a;
}
.image {
width: 100%;
height: 491px;
background-color: red;
}
.top-bar-2 {
width: 100%;
height: 50px;
text-align: center;
}
.top-bar-2 a {
padding: 14px 16px;
text-align: center;
display: inline-block;
color: black;
text-decoration: none;
}
.top-bar-2 a:hover {
background-color: #8a8a8a;
}
.collection {
height: 300px;
width: 100%;
text-align: center;
background-color: blue
The green part which is the body is showing in between the second navbar and the two text divs. Anyone know whats wrong cause I can't find it.
The h4 and the p elements have a margin set. You can see that using the "inspect" option right clicking the element in the browser.
its good to use:
* {margin:0;padding:0;}
this will remove every space in your document.
note: in html, document itself have default space. so by above CSS you can remove them easily.
it is a good practice to use above CSS in your every stylesheet files.
This happens because you have not reset the default margins of header elements.
Reset defaults using
* {
margin: 0;
padding: 0;
box-sizing: border-box
}
At the top of your sheet.
* {
margin: 0;
padding: 0;
box-sizing: border-box
}
body {
margin: 0;
padding: 0;
background-color: green;
}
#color-1 {
background-color: #d3d3d3;
}
#color-2 {
background-color: #fff;
}
.top-navbar {
width: 100%;
height: 50px;
}
.top-navbar a {
padding: 14px 16px;
text-align: center;
float: right;
display: block;
color: black;
text-decoration: none;
}
.top-navbar a:hover {
background-color: #8a8a8a;
}
.image {
width: 100%;
height: 491px;
background-color: red;
}
.top-bar-2 {
width: 100%;
height: 50px;
text-align: center;
}
.top-bar-2 a {
padding: 14px 16px;
text-align: center;
display: inline-block;
color: black;
text-decoration: none;
}
.top-bar-2 a:hover {
background-color: #8a8a8a;
}
.collection {
height: 300px;
width: 100%;
text-align: center;
background-color: blue
<!DOCTYPE html>
<html lang="en">
<head>
<title>title</title>
<link href="main.css" rel="stylesheet" type="text/css">
<meta charset="UTF-8">
</head>
<!-- body -->
<body>
<div class="top-navbar navbar" id="color-1">
About
Art
Home
</div>
<div class="image">
<img src="sgrumble.png" alt="sg-rumble" class="front-image">
</div>
<div class="top-bar-2 navbar" id="color-1">
Project
Champions
divname2
divname3
</div>
<div class="about-text" id="color-1">
<h4>title</h4>
<p>short info text about text text text text text text text text text</p>
</div>
<div class="collection art" id="project color-2">
<h3>text</h3>
<p>text.</p>
<div class="project-blue">
<img src="/asset/images/project-ashe256x256.png" class="project-ashe">
</div>
Green is body color. Where is no element with background-color there is body color because nothing is overlapping it.
CSS boxmodel will be helpfull: https://www.w3schools.com/css/css_boxmodel.asp
Margin property is external part of an element.
Solved :
h3,h4,p{
margin:0;
}
body {
margin: 0;
padding: 0;
background-color: green;
}
#color-1 {
background-color: #d3d3d3;
}
#color-2 {
background-color: #fff;
}
.top-navbar {
width: 100%;
height: 50px;
}
.top-navbar a {
padding: 14px 16px;
text-align: center;
float: right;
display: block;
color: black;
text-decoration: none;
}
.top-navbar a:hover {
background-color: #8a8a8a;
}
.image {
width: 100%;
height: 491px;
background-color: red;
}
.top-bar-2 {
width: 100%;
height: 50px;
text-align: center;
}
.top-bar-2 a {
padding: 14px 16px;
text-align: center;
display: inline-block;
color: black;
text-decoration: none;
}
.top-bar-2 a:hover {
background-color: #8a8a8a;
}
.collection {
height: 300px;
width: 100%;
text-align: center;
background-color: blue
<!DOCTYPE html>
<html lang="en">
<head>
<title>title</title>
<link href="main.css" rel="stylesheet" type="text/css">
<meta charset="UTF-8">
</head>
<!-- body -->
<body>
<div class="top-navbar navbar" id="color-1">
About
Art
Home
</div>
<div class="image">
<img src="sgrumble.png" alt="sg-rumble" class="front-image">
</div>
<div class="top-bar-2 navbar" id="color-1">
Project
Champions
divname2
divname3
</div>
<div class="about-text" id="color-1">
<h4>title</h4>
<p>short info text about text text text text text text text text text</p>
</div>
<div class="collection art" id="project color-2">
<h3>text</h3>
<p>text.</p>
<div class="project-blue">
<img src="/asset/images/project-ashe256x256.png" class="project-ashe">
</div>
you can specify (add to existing) the following css and the spaces will be removed.
.about-text {
overflow: hidden;
}
.collection {
overflow: hidden;
}
Good day,
I am wondering if someone can have a look at this help me understand why the second tab button doesn't seem to work.
I am trying to make wrapper div, left side div with the label buttons and a right side div to display the content.
If I put the show/hide div on the left with the buttons then it displays and hides like it should but, when its in the div on the right the button does nothing.
#chk:checked~#tab1,
#chk2:checked~#tab2 {
display: none;
}
div.wrapper {
width: 100%;
background: black;
height: 300px;
}
div.forred {
width: 80%;
float: right;
}
div.left {
width: 20%;
float left;
}
div#tab1 {
background: red;
width: 100%;
text-align: center;
}
div#tab2 {
background: red;
width: 100%;
text-align: center;
}
div.right {
width: 80%;
float: right;
}
input.tabs {
display: none;
}
label.tab_button {
float: left;
padding: 15px 0px;
font-weight: 600;
text-align: center;
color: #FFFFFF;
border-bottom: 1px inset black;
background: #30E514;
width: 100%;
}
<div class="wrapper">
<div class="left">
<input type=checkbox id=chk class=tabs>
<label for=chk class=tab_button>tab 1</label>
<input type=checkbox id=chk2 class=tabs>
<label for=chk2 class=tab_button>tab 2</label>
<div id=tab1>
OVER HERE
</div>
</div>
<div class="right">
<div id=tab2>
OVER HERE
</div>
</div>
</div>
Your second "button" doesn't work because take a look at this part of your css :
#chk:checked ~ #tab1,
#chk2:checked ~ #tab2 { display:none; }
Here, you apply to the sibling of #chk:checked a display:none; It works for the first "button" because in your HTML you can see that #tab1 is a sibling of #chk:checked but, as you can already guess it, #chk2:checked is not a sibling of #tab2. So move up your div#tab2 just after div#tab1 and then it will works.
Also, I took some time to modify your code to put them at first invisible, then, visible if someone click on tab1 or tab2.
<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Untitled 1</title>
<style>
div.wrapper {width: 100%; background: black; height: 300px;}
div.left {width: 20%; float left;}
input.tabs { display: none;}
label.tab_button {
float: left;
padding: 15px 0px;
font-weight: 600;
text-align: center;
color: #FFFFFF;
border-bottom: 1px inset black;
background: #30E514;
width: 100%;
}
#tab1, #tab2 {background: red; width: 100%; text-align: center;}
div.right { width: 80%; float: right;}
#tab1, #tab2 {display:none;}
#chk:checked ~ #tab1,
#chk2:checked ~ #tab2 { display:block; }
</style>
</head>
<body>
<div class="wrapper">
<div class="left">
<input type="checkbox" id="chk" class="tabs">
<label for="chk" class="tab_button">tab 1</label>
<input type="checkbox" id="chk2" class="tabs">
<label for="chk2" class="tab_button">tab 2</label>
<div id="tab1">
TAB 1 HERE
</div>
<div id="tab2">
TAB 2 HERE
</div>
</div>
<div class="right">
Right div
</div>
</div>
</body>
</html>
Hope this helps!