I’m trying to create a 128px by 192x box with a title and text inside of it. If the text is too long, I would like a scroll bar to appear to scroll the text, but the title should not scroll.
The problem is that the text is going outside of the box’s boundaries.
How can I fix this?
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">
hello friends
hello friends
hello friends
hello friends
hello friends
hello friends
hello friends
hello friends
hello friends
hello friends
hello friends
hello friends
hello friends
hello friends
hello friends
hello friends
hello friends
hello friends
hello friends
hello friends
hello friends
hello friends
</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;
}
This is my first time using HTML and CSS and so I’m probably doing lots of stuff wrong. Any other comments are appreciated.
DEMO