Is there a way to create a 128px by 192x box with a title and text inside it, where the text can scroll if it's too long but the title remains fixed? The issue I'm facing is that the text is exceeding the boundaries of the box.
If you have any solutions or suggestions on how to fix this problem, please let me know!
JSFiddle: http://jsfiddle.net/qr8aK/
html:
<body>
<h1>JavaScript sample</h1>
<div id="square"></div>
<div class="card-front">
<div class="card-title">Hello Friends</div>
<img class="card-image" src="grizzly.jpg">
<div class="card-text">
(text content)
</div>
</div>
</body>
css:
.card-front {
width: 128px;
height: 192px;
background-color: green;
border: 2px inset gray;
}
.card-title {
width: 90%;
height: 1em;
background-color: white;
border: 0px;
text-align: center;
margin-top: 4px;
margin-left: auto;
margin-right: auto;
}
.card-text {
width : 90%;
height: auto;
display: block;
margin-top: 4px;
margin-left: auto;
margin-right: auto;
margin-bottom: 4px;
overflow: auto;
background-color: white;
}
I am new to HTML and CSS, so any feedback or advice would be greatly appreciated. Thank you!