CODE PEN LAYOUT

Tuesday, 29 December 2015

CODE PEN LAYOUT

-----------------------------------------------------------------------------------------------------------------------
READ MORE:
http://learn.shayhowe.com/html-css/positioning-content/
http://codepen.io/shayhowe/pen/IvFpr

------------------------------------------------------------------------------------------------------------------------
CODE 1:
------------------------------------------------------------------------------------------------------------------------
<html>
<head>
<style class="cp-pen-styles">code {
background: #2db34a;
border-radius: 6px;
color: #fff;
display: block;
font: 14px/24px "Source Code Pro", Inconsolata, "Lucida Console", Terminal, "Courier New", Courier;
padding: 24px 15px;
text-align: center;
}
header,
section,
aside,
footer {
margin: 0 1.5% 24px 1.5%;
}
footer {
margin-bottom: 0;
}
</style>
</head>
<body>
<header>
<code><header></code>
</header>
<section>
<code><section></code>
</section>
<aside>
<code><aside></code>
</aside>
<footer>
<code><footer></code>
</footer>
</body>
</html>
-----------------------------------------------------------------------------------------------------------------------
CODE 2:
-----------------------------------------------------------------------------------------------------------------------

-----------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="google" value="notranslate">
<title>CodePen - Layout without Floats</title>
<style>
code {
background: #2db34a;
border-radius: 6px;
color: #fff;
display: block;
font: 14px/24px "Source Code Pro", Inconsolata, "Lucida Console", Terminal, "Courier New", Courier;
padding: 24px 15px;
text-align: center;
}
header,
section,
aside,
footer {
margin: 0 1.5% 24px 1.5%;
}
section {
float: left;
width: 63%;
}
aside {
float: right;
width: 30%;
}
footer {
clear: both;
margin-bottom: 0;
}
</style>
</head>
<body>
<header>
<code><header></code>
</header>
<section>
<code><section></code>
</section>
<aside>
<code><aside></code>
</aside>
<footer>
<code><footer></code>
</footer>
</body>
</html>
------------------------------------------------------------------------------------------------------------------------
CODE 3:
------------------------------------------------------------------------------------------------------------------------

------------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html>
<head>
<style class="cp-pen-styles">
code {
background: #2db34a;
border-radius: 6px;
color: #fff;
display: block;
font: 14px/24px "Source Code Pro", Inconsolata, "Lucida Console", Terminal, "Courier New", Courier;
padding: 24px 15px;
text-align: center;
}
header,
section,
aside,
footer {
margin: 0 1.5% 24px 1.5%;
}
section {
float: left;
width: 30%;
}
footer {
clear: both;
margin-bottom: 0;
}
</style>
</head>
<body>
<header>
<code><header></code>
</header>
<section>
<code><section> <br> float: left;</code>
</section>
<section>
<code><section> <br> float: left;</code>
</section>
<section>
<code><section> <br> float: left;</code>
</section>
<footer>
<code><footer></code>
</footer>
</body>
</html>
------------------------------------------------------------------------------------------------------------------------
CODE 4:
------------------------------------------------------------------------------------------------------------------------

------------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<style class="cp-pen-styles">
code {
background: #2db34a;
border-radius: 6px;
color: #fff;
display: block;
font: 14px/24px "Source Code Pro", Inconsolata, "Lucida Console", Terminal, "Courier New", Courier;
padding: 24px 15px;
text-align: center;
}
.default {
background: none;
color: #666;
}
.group:before,
.group:after {
content: "";
display: table;
}
.group:after {
clear: both;
}
.group {
background: #eaeaed;
border-radius: 6px;
clear: both;
*zoom: 1;
}
.group,
header,
section,
aside,
footer {
margin: 0 1.5% 24px 1.5%;
}
section {
float: left;
width: 63%;
}
aside {
float: right;
width: 30%;
}
footer {
margin-bottom: 0;
}
</style>
</head>
<body>
<header>
<code><header></code>
</header>
<div class="group">
<code class="default"><section="group"></code>
<section>
<code><section> <br> float: left;</code>
</section>
<aside>
<code><aside> <br> float: right;</code>
</aside>
</div>
<footer>
<code><footer> <br> clear: both;</code>
</footer>
</body>
</html>