CSS border styling fitting content - html

Question

I've been having trouble fitting some content into a border. When entering more text, instead of extending to fit vertically it just continues past the border as shown in the attached screenshot:
And my CSS file is as follows:
body {
background-image:url(http://www.cs.aub.edu.lb/hsafa/cmps278/hw2/background.png);
background-repeat:repeat;
background-attachment:fixed;
margin: 0px;
padding: 0px;
font-family: Verdana, Tahoma, sans-serif;
}
h1 {
text-align: center;
font-family: Tahoma, Verdana, sans-serif;
font-size: 24pt;
text-shadow: 3px 3px #999999;
font-weight: bold;
}
p {
font-size: 8pt;
}
#content {
width: 800px;
margin: auto;
border: 4px solid gray;
border-radius: 20px;
background-color: #A2B964;
}
#banner {
height: 50px;
background-image:url(http://www.cs.aub.edu.lb/hsafa/cmps278/hw2/bannerbg.png);
background-repeat:repeat;
}
#banner img {
display: block;
margin:auto;
overflow: hidden;
}
#general {
float: right;
width: 250px;
border-radius: 0px 20px 0px 0px;
}
dl {
margin: 10pt;
font-size: 8pt;
font-family: Ariel, sans-serif;
}
dt {
font-weight: bold;
margin-top: 10pt;
}
ul {
list-style-type: none;
}
li {
margin-left:0px;
}
#leftsection {
width: 550px;
overflow:hidden;
background-image:url(http://www.cs.aub.edu.lb/hsafa/cmps278/hw2/background.png);
background-repeat:repeat;
background-attachment:fixed;
}
#rating {
height: 83px;
background-image:url(http://www.cs.aub.edu.lb/hsafa/cmps278/hw2/rbg.png);
background-repeat: repeat;
overflow: hidden;
border-radius: 20px 0px 0px 0px;
}
#rating img {
border-radius: 20px;
}
.special {
vertical-align: top;
font-size: 48pt;
font-weight: bold;
color: red;
}
.review {
font-size: 8pt;
font-family: Verdana, Tahoma, sans-serif;
font-weight: bold;
background-color: #E8DC9B;
border: 2px solid gray;
border-radius: 10px;
padding-left: 8px;
padding-right: 8px;
}
.personal {
margin-bottom: 20pt;
}
.italic {
font-style: italic;
margin-left: 40px;
}
img.review {
padding-right: 5px;
}
#leftcol {
margin-top: 2%;
margin-left: 2%;
margin-right: 2%;
float: left;
width: 47%;
}
#rightcol {
margin-top: 2%;
margin-right: 2%;
float: right;
width: 47%;
}
#pages {
text-align:center;
margin: 5px;
}
#validated {
position: fixed;
top: 90%;
left:80%;
width: 600px;
}
#validated img {
opacity: 0.5;
}
I've added the HTML code on CSSDeck: http://cssdeck.com/labs/full/bldwwaec

Answer 1

It would be better if you put the HTML codes too.
The right side element is either fixed (or absolute) or float. If it is float, you can simple fix it with adding a <br /> at the end of its parent element and set clear: both; on it. Like this:
<div id="parent">
<div>aaa</div>
<div class="float-right">bbbb</div>
<br style="clear: both;" />
</div>
Now, the div#parent fits with the content and if you set a border on it, your problem would fix.
In absolute case, however, it is not as easy as I explained and recommend revising the use of absolute (or fixed) for that part.
Good luck,
Mohammad Ali Sharpasand

Answer 2

Of course today, float is no longer needed, as the flexbox is available:
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox
Also, grid is amazing:
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids

Answer 3

you have to put one more div over the id=content and you can call the calss=pagewrapper.
.pagewrapper{
margin: 0 auto;
width: 800px;
}
put float:left in your ID
#content{
float: left;
}

Answer 4

The problem appears to be the floating right column.
#rightcol {
float: right;
}
It would appear you need to clear the float, since floating elements are removed from normal page flow, the parent element will not expand to match the height. A simple solution is to add a clearfix to your parent element or class (in our case ID)
#content:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
This should solve your issue, if you have more questions about this I would suggest looking here.