CSS layout

layout test field with jQuery as button

by Perry Keh

HTML

<h1 id="hh"> This is a h1 title </h1>
<div id="container">
<div id="cnvs">
    <canvas></canvas>
</div>
</div>

<button id="bttn" class="buttonClass">click me (jQuery)</button>
<button id="bttn2" class="buttonClass" onclick="javascript:button_click()">click me (JS)</button>




<div style="clear:both"> </div>

<p class="centerAlign">Put me in center</p>
<p>See <a href='https://css-tricks.com/video-screencasts/42-all-about-floats-screencast/'> this video and link </a> for more.

CSS

#hh {
    text-align: center;
    padding: 10px;
    background-color: yellow;
}
#container {
    width:63%;
    float:left;
   margin-top: 5px;
}
#cnvs {
    height: 0;
    padding-bottom:100%;
    background-color:pink;
//   float:left;
}
.buttonClass {
    float: right;
    width: 30%;
    margin:5px;
}
.centerAlign {
    text-align:center;
    padding-top: 10px;
}

JavaScript

// id styling
// class styling
// inline styling


// 1:1 percentage canvas
// ref: http://stackoverflow.com/questions/5445491/height-equal-to-dynamic-width-css-fluid-layout

$("#bttn").click(function () {
    alert("hi");
});

function button_click() {
    alert('hi 22');
};