My hidden (toggle) divs that shows on click create a margin based on the below div.
I tried giving all the content of the hidden divs a negative margin but it just seems a bit clumsy and I am sure there is a more elegant solution.
Any suggestions?
<html>
<head>
<script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
</script>
<style>
body {
margin:0;
width:100%;
height:100%
}
#first {
z-index:1;
position:relative;
display:block;width:25%;
height:10%;
background-color:#F00;
float: left
}
#second {
z-index:1;
position:relative;
display:block;
width:25%;
height:10%;
background-color:#FF0;
float: left
}
#first_hidden {
display:none;
z-index:10;
position:relative;
width:100%;
height:100%;
background-color:#0F0
}
#second_hidden {
display:none;
z-index:10;
position:relative;
width:100%;
height:100%;
background-color:#F0F;
}
</style>
</head>
<body>
<div id="first">
First
</div>
<div id="first_hidden">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tempus non massa nec porta. Sed mollis aliquam dui at egestas.</p>
<-Back1
</div>
<div id="second">
Second
</div>
<div id="second_hidden">
<p>Nulla id mauris volutpat, elementum urna suscipit, tempor diam. Sed semper metus purus, vel luctus nulla rutrum eu. Nulla id.</p>
<-Back2
</div>
</body>
</html>
You have to keep inside <div> default margin:1em 0; of your <p> with a padding or border on <div>, or reset margin:0; on <p>. test this :
div {padding:1px;}
http://liveweave.com/B8D32x
Related
I have an old site.
Now I want to make it mobile friendly.
So I am trying to add a mobile navigation and for making it works I want to use pure css only. NO javascript.
I am not allowed to add JS code to the files.
I tried following:
Mark up (I can not touch anything inside nav-menu class):
<!--- mobile navigation -->
<div class="tm_menu_mobile">
<div class="menu_icon">
<div class="three_line"></div>
<div class="three_line"></div>
<div class="three_line"></div>
</div>
<div style="clear:both;"></div>
<div class="nav-menu">
<ul>
<li class="page_item page-item-4">Page 1</li>
<li class="page_item page-item-2">Page 2</li>
<li class="page_item page-item-2">Page 2</li>
</ul>
</div>
</div>
And then I tried this CSS:
.tm_menu_mobile { width: 100%; max-width: 1005px; margin: 0 auto; display: block; background-color: #0071b7; }
.menu_icon { width: 100% }
.tm_menu_mobile .menu_icon{ width:50px; height:50px; border-radius: 10px; border:2px solid #fff; float:right; margin-right:10px; }
.menu_icon .three_line{ float:none; width:36px; height:5px; background:#fff; margin:9px auto; }
.tm_menu_mobile .nav-menu ul { text-align: center; }
.tm_menu_mobile .nav-menu ul li { border-bottom: 1px solid #fff; padding: 15p
Until here it's fine I think.
Now I want to work for animation / toggle (using CSS only)
how can I achieve:
By default the ul / nav-menu should NOT be displayed. Only menu_icon should be displayed.
When the visitor clicks on the menu_icon the ul should be displayed / toggled down.
When the user click AGAIN on the menu_icon the ul should be disappeared / toggled up and display: none.
I want to do this using CSS only.
FIDDLE IS HERE
Your best bet is most likely the :target CSS selector and anchor tags.
In the snippet below there are a menu button which has an a tag to #menu, which if target makes the menu visible and shows a div beneath which links to #, to hide the menu, if the user click outside.
The important part
#tabhelper {
display:none;
position:fixed;
right:0;
width:20%;
height:100%;
top:0;
z-index: 10;
}
#menu:target ~ #content > a#menubtn {
left:80%;
}
#menu:target ~ #content > article {
left:80%;
right:-80%;
-webkit-filter: blur(3px);
}
#menu:target ~ #tabhelper {
display:block;
}
Everything else
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,700);
html {
width:100%;
}
* {
box-sizing: border-box;
}
body {
display:block;
margin: 0;
width: 100%;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
color: #222;
}
#content {
position: fixed;
height:100%;
width:180%;
left:-80%;
background: #ecf0f1;
}
#content > nav {
position:fixed;
width:80%;
height:100%;
background: #34495e;
}
#content > nav > ul {
list-style: none;
margin:0;
padding: 0;
margin-top: 5px;
}
#content > nav > ul > li > a {
display: block;
width:100%;
padding:10px;
background: #2c3e50;
margin-bottom: 5px;
color:#ddd;
text-decoration: none;
}
#content > a#menubtn {
position: fixed;
background: #9b59b6;
width:40px;
height:40px;
left:0;
top:0;
z-index: 100;
}
#content > a#menubtn:before { /*http://css-tricks.com/three-line-menu-navicon/*/
content: "";
position: absolute;
left: 10px;
top: 12px;
width: 20px;
height: 3px;
background: #fff;
box-shadow:
0 6px 0 0 #fff,
0 12px 0 0 #fff;
}
#content > article {
position: fixed;
padding: 25px;
left: 0;
right: 0;
height: 100%;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
#tabhelper {
display:none;
position:fixed;
right:0;
width:20%;
height:100%;
top:0;
z-index: 10;
}
#content, #menubtn, #content > article {
transition: all .4s;
}
#menu {
display: none;
}
#menu:target ~ #content {
left:0;
}
#menu:target ~ #content > a#menubtn {
left:80%;
}
#menu:target ~ #content > article {
left:80%;
right:-80%;
-webkit-filter: blur(3px);
}
#menu:target ~ #tabhelper {
display:block;
}
<div class="helper" id="menu"></div>
<a id="tabhelper" href="#"></a>
<div id="content">
<a id="menubtn" href="#menu"></a>
<nav>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ul>
</nav>
<article>
<h1>HTML Ipsum Presents</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>
</article>
</div>
CSS and HTML alone can respond to click.
You should be able to use :focus, as long as each element is discretely wrapped in it's own HTML element which has a tab index
You can try this by opening the dev tools, selecting an element on this page and selecting :focus to force focus state (right hand click).
In your HTML you will need tabindex - this is required, but also ensures your UI responds to the keyboard as well as the mouse
This fiddle gives a demo: http://jsfiddle.net/szhtebjm/4/
To target an element that you don't have access to within the parent you can use the html tag directly in the css, within the :focus, as demonstrated in the fiddle with span element
This is a basic example to prove concept that focus will work to trigger changes on click with css, applying animations can be done with keyframes and transitions
An example with transitions is here:
http://jsfiddle.net/szhtebjm/8/
One final point, you're violating separation of concerns by doing this. Javascript should handle functionality and css should handle styles. The best way would really be to have set-up that allowed you to add javascript which you could then use to handle the menu functionality
I would like to have a webpage with two columns. The first for buttons, and the second for content.
Here's a JsFiddle :
HTML:
<div data-role="page" data-theme="b" id="home">
<div data-role="header" data-position="fixed">
<div class="home-header">
<div class="content-header" data-tap-toggle="false">
Header
</div>
</div>
</div>
<div data-role="content">
<div>
<div class="ActionsMenu">
<button>button</button>
<button>button</button>
<button>button</button>
<button>button</button>
</div>
<div id="ActionsContent">
<h3 class="ui-bar ui-bar-a ui-corner-all">Heading</h3>
<div class="ui-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse accumsan blandit fermentum. Pellentesque cursus mauris purus, auctor commodo mi ullamcorper nec. Donec semper mattis eros, nec condimentum ante sollicitudin quis. Etiam orci sem, porttitor ut tellus nec, blandit posuere urna. Proin a arcu non lacus pretium faucibus. Aliquam sed est porttitor, ullamcorper urna nec, vehicula lorem. Cras porttitor est lorem, non venenatis diam convallis congue.</p>
</div>
</div>
</div>
</div>
<div data-role="footer" data-position="fixed" data-tap-toggle="false">
footer
</div>
CSS:
.ActionsMenu {
width: 100%;
float: none;
}
.ActionsContent {
width: 100%;
float: none;
}
#media all and (min-width: 400px) {
.ActionsMenu {
float: left;
width: 25%;
padding-right: 50px;
}
.ActionsContent {
float: none;
margin-left: 25%;
}
}
As you can see, the content is under the buttons and not where I need it...
The page also need to be responsive and display a single column for mobiles...
DEMO
Have width prpperty defined for both the divs.
As you are going for responsive design i suggest using % widths
.MainContent .ActionsMenu {
width: 25%;
float: none;
overflow-scrolling: auto;
}
.MainContent .ActionsContent {
width: 60%;
float: right;
}
Have float element to float the content right
And You should have a id ActionsMenu in HTML not class.
<div class="ActionsMenu"> ..</div>
EDIT:
You want to align to right-http://jsfiddle.net/VT9m3/11/ add padding based on that
.ActionsContent {
float: left;
width:65%;
padding-left:20px;
}
but as your padding on the same div might break at a resoultion if the width of .ActionsMenu+.Actionscontent+padding >100% so have the Action menu in another div and have width property to it then have .ActionContent and have the padding
Please replace these css lines
.ActionsMenu {
width: 25%;
float: left;
overflow-scrolling: auto;
}
#ActionsContent {
width: 60%;
float: right;
}
You're using a class selector to select an id. Either replacing id="ActionsContent" with class="ActionsContent" or replacing .ActionsContent with #ActionsContent should make sure the styles are actually applied ;)
i want to display three div tag in a parent div tag
parent div has no width and height
one inner div will be on left side with fixed width and height
2nd inner div will be in center with fixed height only and its width is between two other div tags
3rd inner div will be on right side
css
#container{}
#columnright{
float:left;
width:200px;
height: 400px;
}
#content{
margin-right:auto;
margin-left:auto;
height: 400px;
}
#columnleft{
float:right;
width:150px;
height: 400px;
}
html
<div id="container">
<div id="columnright"></div>
<div id="content"></div>
<div id="columnleft"> </div>
</div>
<style>
#columnright{
width:200px;
float:left;
}
#content{
width:200px;
float:left;
}
#columnleft{
float:left;
width:150px;
}
</style >
<div id="container">
<div id="columnright">hi</div>
<div id="content">hello</div>
<div id="columnleft">how</div>
</div>
<style>
#columnright
{
width: 200px;
height:400px;
}
#content
{
float: left;
height: 400px;
}
#columnleft
{
float: right;
width: 150px;
height: 400px;
}
</style>
<div id="container">
<div id="columnright"></div>
<div id="content"></div>
<div id="columnleft"></div>
</div>
I think the above code can help you. In the first inner div, no need to right float : left. Becoz u told that it must have fixed width and height. If u mention float property, it doesn't occupy the space.
You need to youse CSS3's calc() function to calculate the width of your content div.
See here:
JSFiddle
I also colored the divs for easier understanding. You should probably also remain your div's, because at the time your "columnright" is on the left hand side of the screen and vice versa.
This accomplishes what you're trying to do without floating anything. I also corrected your #columnright to actually be on the right side and your #columnleft to actually be on the left side. And I added background color to better illustrate what's going on.
HTML
<div id="container">
<div id="columnright"></div>
<div id="content"></div>
<div id="columnleft"> </div>
</div>
CSS
#container {
position:relative;
background-color:#E0E0E0;
}
#columnleft {
position:absolute;
top:0;
left:0;
width:150px;
height: 400px;
background-color:#CCCCE0;
}
#columnright {
position:absolute;
top:0;
right:0;
width:200px;
height: 400px;
background-color:#E0CCCC;
}
#content {
margin-right:200px;
margin-left:150px;
height: 400px;
background-color:#CCE0CC;
}
Fiddle
http://jsfiddle.net/mNnAq/
http://jsfiddle.net/hdrenollet/dsbSt/embedded/result/
If I understand you correctly, you're looking for something like this:
<head>
<title></title>
<script>
</script>
<style>
#parent{
width:100%;
}
#columnleft{
position:relative;
float:left;
border: 1px solid black;
top:0px;
width:150px;
height: 400px;
}
#content{
position:relative;
width:100%;
top:0px;
padding: 20px;
margin-left:150px;
margin-right:200px;
}
#columnright{
border: 1px solid black;
float:right;
top:0px;
width:200px;
height: 400px;
}
</style>
</head>
<body>
<div id="parent">
<div id="columnleft"></div>
<div id="columnright"></div>
<div id="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lectus sem, lobortis fermentum eleifend non, interdum at orci. Ut nec mauris vulputate, eleifend elit vitae, suscipit felis. Etiam leo ligula, pellentesque non urna sed, sagittis hendrerit nibh. Sed pharetra pellentesque nunc vitae imperdiet. orci. Nam ac nisi sed ipsum ullamcorper aliquet eget lobortis enim. Duis consequat sed arcu vel vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus mollis porttitor sapien. Duis a sodales justo. Mauris gravida aliquet nunc in scelerisque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel nunc sagittis, dapibus quam eu, congue magna.</div>
</div>
</body>
You'll need to set your margin-left and margin-right of your content container to the widths of your left and right columns.
like in the title i can't put some text centered vertically near a div with CSS, i searched on google and on stackoverflow so i decided to make a question here.
This is an example of what i need done with Paint:
I tried display table cell and box solutions but it works only without the floating div on top left.
When the text is longer than the blue div it should go under the div just like a normal text with a floating div.
I'm searching an only CSS solution, it can be done or not?
I am not completely sure if that is possible, but here is my best attempt at it, at least works for the first 2 examples.
<div class="wrap">
<div class="invisible"></div>
<img src="http://placehold.it/140x100">
<p>Lorem ipsum.</p>
</div>
<div class="wrap">
<div class="invisible"></div>
<img src="http://placehold.it/140x100">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur viverra, nibh in molestie sodales, risus turpis vehicula tellus, vitae lobortis ligula tortor in enim.</p>
</div>
<div class="wrap">
<div class="invisible"></div>
<img src="http://placehold.it/140x100">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur viverra, nibh in molestie sodales, risus turpis vehicula tellus, vitae lobortis ligula tortor in enim. Proin venenatis arcu id enim rutrum eget condimentum urna venenatis. Suspendisse at tortor nisi, in tempus ligula. Maecenas nisl felis, bibendum ut luctus nec, bibendum sit amet erat.</p>
</div>
CSS:
.wrap {
width:500px;
border:1px solid red;
margin:10px;
}
.wrap:before {
content:'';
display:inline-block;
height:100%;
vertical-align:middle;
margin-left:-0.25em; /* adjusts spacing */
}
p {
display:inline-block;
vertical-align:middle;
width:350px;
}
img {
float:left;
}
.invisible {
height:100px;
display:inline-block;
vertical-align:middle;
}
A fiddle.
This is possible with pure CSS.
body {
background: url("http://img08.deviantart.net/b5aa/i/2015/140/7/c/chalkboard_by_lorelinde-d8u2phm.jpg") no-repeat;
}
.container {
color: rgba(255, 255, 255, .9);
font-family: "Chalkduster", "Baskerville";
font-size: 18px;
padding: 0 10px;
width: 550px;
}
#user_portrait {
border-radius: 13px;
border: 3px solid rgba(255, 255, 255, .9);
float: left;
margin: 0 20px 0 0;
max-height: 300px;
max-width: 300px;
filter: sepia(50%);
}
#overview_text {
letter-spacing: 1px;
line-height: 1.3rem;
padding: 0 0 0 10px;
white-space: pre-line;
}
<body>
<p class="container">
<img id="user_portrait" src="https://pbs.twimg.com/profile_images/704337993293815810/PmkKs6yw.jpg">
<span id="overview_text">“Never hate your enemies. It affects your judgment.”
“My father held a gun to his head, and my father assured the bandleader that either his signature or his brains would be on the contract.”
“There are many things my father taught me here in this room. He taught me: keep your friends close, but your enemies closer.”
</span>
</p>
</body>
The key point is to put both image and text into non-inline parent tag and make them float.
This is impossible with css only. (i would be happy to be proved wrong.)
______________________
| Header |
|______________________|
| |
| |
| Content |
| |
| |
|______________________|
| Footer |
|______________________|
I would like to make this UI, and each is a div. The header height is 30px. And the footer is 30px. But I don't know the content height. I need to use the user frame to calculate.
The total height should be 100%.
Can I do it in pure CSS?
Using flexbox, this is easy to achieve.
Set the wrapper containing your 3 compartments to display: flex; and give it a height of 100% or 100vh. The height of the wrapper will fill the entire height, and the display: flex; will cause all children of this wrapper which has the appropriate flex-properties (for example flex:1;) to be controlled with the flexbox-magic.
Example markup:
<div class="wrapper">
<header>I'm a 30px tall header</header>
<main>I'm the main-content filling the void!</main>
<footer>I'm a 30px tall footer</footer>
</div>
And CSS to accompany it:
.wrapper {
height: 100vh;
display: flex;
/* Direction of the items, can be row or column */
flex-direction: column;
}
header,
footer {
height: 30px;
}
main {
flex: 1;
}
Here's that code live on Codepen: http://codepen.io/enjikaka/pen/zxdYjX/left
You can see more flexbox-magic here: http://philipwalton.github.io/solved-by-flexbox/
Or find a well made documentation here: http://css-tricks.com/snippets/css/a-guide-to-flexbox/
--[Old answer below]--
Here you go: http://jsfiddle.net/pKvxN/
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Layout</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
header {
height: 30px;
background: green;
}
footer {
height: 30px;
background: red;
}
</style>
</head>
<body>
<header>
<h1>I am a header</h1>
</header>
<article>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a ligula dolor.
</p>
</article>
<footer>
<h4>I am a footer</h4>
</footer>
</body>
</html>
That works on all modern browsers (FF4+, Chrome, Safari, IE8 and IE9+)
Here is how to to that:
The header and footer are 30px height.
The footer is stuck to the bottom of the page.
HTML:
<div id="header">
</div>
<div id="content">
</div>
<div id="footer">
</div>
CSS:
#header {
height: 30px;
}
#footer {
height: 30px;
position: absolute;
bottom: 0;
}
body {
height: 100%;
margin-bottom: 30px;
}
Try it on jsfiddle: http://jsfiddle.net/Usbuw/
Try This
<!DOCTYPE html>
<html>
<head>
<title>Sticky Header and Footer</title>
<style type="text/css">
/* Reset body padding and margins */
body {
margin:0;
padding:0;
}
/* Make Header Sticky */
#header_container {
background:#eee;
border:1px solid #666;
height:60px;
left:0;
position:fixed;
width:100%;
top:0;
}
#header {
line-height:60px;
margin:0 auto;
width:940px;
text-align:center;
}
/* CSS for the content of page. I am giving top and bottom padding of 80px to make sure the header and footer do not overlap the content.*/
#container {
margin:0 auto;
overflow:auto;
padding:80px 0;
width:940px;
}
#content {
}
/* Make Footer Sticky */
#footer_container {
background:#eee;
border:1px solid #666;
bottom:0;
height:60px;
left:0;
position:fixed;
width:100%;
}
#footer {
line-height:60px;
margin:0 auto;
width:940px;
text-align:center;
}
</style>
</head>
<body>
<!-- BEGIN: Sticky Header -->
<div id="header_container">
<div id="header">
Header Content
</div>
</div>
<!-- END: Sticky Header -->
<!-- BEGIN: Page Content -->
<div id="container">
<div id="content">
content
<br /><br />
blah blah blah..
...
</div>
</div>
<!-- END: Page Content -->
<!-- BEGIN: Sticky Footer -->
<div id="footer_container">
<div id="footer">
Footer Content
</div>
</div>
<!-- END: Sticky Footer -->
</body>
</html>
After fiddling around a while I found a solution that works in >IE7, Chrome, Firefox:
http://jsfiddle.net/xfXaw/
* {
margin:0;
padding:0;
}
html, body {
height:100%;
}
#wrap {
min-height:100%;
}
#header {
background: red;
}
#content {
padding-bottom: 50px;
}
#footer {
height:50px;
margin-top:-50px;
background: green;
}
HTML:
<div id="wrap">
<div id="header">header</div>
<div id="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. </div>
</div>
<div id="footer">footer</div>
with Grid
<div class='container'>
<header>header</header>
<div>content</div>
<footer>footer</footer>
</div>
.container {
display: grid;
grid-template-rows: auto 1fr auto;
height: 100vh;
}
Below is the sample code and you can run a snippet to see the result.
html,body {
display: flex;
flex-direction: column;
height: 100%;
}
sidenav{
border:1px solid black;
flex: .3;
}
container{
border:1px solid black;
flex: 1;
}
header{
border:1px solid black;
flex:.1;
}
content{
display:flex;
flex:1;
border:1px solid black;
}
footer{
border:1px solid black;
flex:.1;
}
<body>
<header >header</header>
<content>
<sidenav>sidenav</sidenav>
<container>container</container>
</content>
<footer>footer</footer>
</body>
Try this
CSS
.header{
height:30px;
}
.Content{
height: 100%;
overflow: auto;
padding-top: 10px;
padding-bottom: 40px;
}
.Footer{
position: relative;
margin-top: -30px; /* negative value of footer height */
height: 30px;
clear:both;
}
HTML
<body>
<div class="Header">Header</div>
<div class="Content">Content</div>
<div class="Footer">Footer</div>
</body>