Home/ Questions/Q 7537447
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T06:51:15+00:00

I’ve got some problem with css, the content is sticking out from the boundaries.

  • 0

I’ve got some problem with css, the content is sticking out from the boundaries.
It is expected to have a scrollbar rather than hidden overflow, but the boundaries.
Please help.

Here’s the code, which reflects my CSS structure:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>

body{
border:3px solid #FFAD17;
background-color:#FFF;
border-radius:7px;
font:9.5pt Tahoma;
margin:0px;
padding:0px;
}
html {
margin:0px;
padding:0px;
}

div.header{
    background-color:yellow;
    background-position:top;
    padding: 3px;
    }
div.wrapper{
    float:left;
    }
div.context_wrapper{
    margin-left:158px;
    padding: 3px;   
    }
div.context{
    float:left;
    }
div.menu{
    text-align:center;
    padding: 3px;
    width:140px;
    float:left;     
    }
div.footer{
    background-color:yellow;
    background-position:bottom;
    width:auto;
    padding: 3px;
    clear:both;     
    }
</style>
</head>

<body>
<div class="header">Head</div>
<div class="wrapper">
    <div class="menu">Menu</div>
    <div class="context_wrapper">
        <div class="context">
            ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent
        </div>
    </div>
</div>
<div class="footer">Foot</div>
</body>

</html>

a busy cat http://img215.imageshack.us/img215/6065/20120223132157.png

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I shouldn’t style the body element like it was a <div> element, better to make a new wrapper. Furthermore, from your question I gather you’re looking for something like this: http://jsfiddle.net/SQDXt/

    Basically, this adds the wrapper div with the scrollbar when your content exceeds the size of the wrapper. Also, the header and footer are within the second wrapper, to span the whole width when the content exceeds the first wrapper’s width.

    • 0