I created a toggle button and attempted to style it so it aligns next to a header or a short paragraph. Despite my best efforts with CSS, the button consistently remains below the header. How can I make it appear alongside the header instead?
.HTML:
<p id="my_short_biography"><b>MY SHORT BIOGRAPHY</b></p>
<div id ="button_size">
<button id="button_position"><p id="show_hide">Show / Hide</p></button>
</div>
.CSS:
#button_size {
text-align: center;
}
#button_position {
margin-top: 10px;
cursor: pointer;
background: #35b128;
border: 1px solid #33842a;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 0 4px rgba(0,0,0, .75);
-moz-box-shadow: 0 0 4px rgba(0,0,0, .75);
box-shadow: 0 0 4px rgba(0,0,0, .75);
color: #f3f3f3;
height: 26px;
}
#button_position:hover, #button_position:focus {
background-color: #399630;
-webkit-box-shadow: 0 0 1px rgba(0,0,0, .75);
-moz-box-shadow: 0 0 1px rgba(0,0,0, .75);
box-shadow: 0 0 1px rgba(0,0,0, .75);
}
#my_short_biography {
font-size: 25px;
color: #FF9900;
margin-left: 98px;
margin-right: 98px;
font-family: Mistral;
text-shadow: 3px 3px 3px green;
text-decoration: underline;
}
#show_hide {
font-size: 19.5px;
color: #FF9900;
font-family: Gergia;
text-shadow: 3px 3px 3px green;
}
.JS:
<script>
$(document).ready(function(){
$("button").click(function(){
$("#toggle").toggle();
});
});
</script>