CODEWITHSUNDEEP
htmlcss
AuthenticReplica
AuthenticReplica

Reputation: 870

CSS border styling fitting content

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

Upvotes: 1

Views: 7461

Answers (4)

Edward Meehan
Edward Meehan

Reputation: 11

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.

Upvotes: 1

dsfg
dsfg

Reputation: 130

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;
}

Upvotes: 1

user19497610
user19497610

Reputation:

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

Upvotes: 1

Sheric
Sheric

Reputation: 416

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

Upvotes: 2

Related Questions