Home/ Questions/Q 6900667
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T07:34:29+00:00

I am building a website in which the main content frame should span the

  • 0

I am building a website in which the main content frame should span the entire width of the page, and as much height as necessary, with a minimum height (in order to contain a floating “sidebar” of sorts). However, setting the width of the div element to 100% doesn’t fill the window, it over-fills it, creating a horizontal scroll-bar. Is there any way to have the content div stretch to the full width of the page and no more, without clipping from the sides or bottom, as with box sizing or overflow settings?

Thank you for your time,
Timothy S.

base.css

html, body {
    margin:0;
    padding:0;

    font-family: "Lucida Grande", Verdana;
    font-size: 0.9em;

    background-color:#4D714D;
    background-image:url("images/titlebar.png");
    background-attachment:fixed;
    background-repeat:no-repeat;
    background-position:0px 7px;
}

div.content
{
    position:relative;
    top: 150px;

    padding: 20px;

    margin-left: auto;
    margin-right: auto;

    width:100%;
    min-height:500px;

    background-color:#8BB88B;   
}

div.sidebar
{   
    float:right;

    position:relative;
    top:-20px;
    left:20px;

    width: 400px;
    height: 400px;

    background-color:#FFFFFF;   
}

example page

<html>
    <head>
        <title>Login</title>
        <link type="text/css" href="base.css" rel="stylesheet" />       
    </head>

    <body>
        <div class="content">
            <div class="sidebar"></div>
            <form action="loginScript.php" method="post">
                <label>Username:</label>
                <input type="text" name="username" /> <br />
                <label>Password:</label>
                <input type="password" name="password" /> <br />
                <input type="submit" value="Login" name="login" />
            </form>
            <?php print($_GET['msg']) ?>
        </div>
    </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The layout you described is the default behavior of a block element, such as a div. That it is not displaying that way indicates that you have overridden the default. Indeed, the culprit is width: 100%. You can safely remove that from your CSS.

    Your question is a perfect example of why I take a minimalist approach to CSS. Only apply a style when you are sure you need it. That way, when your page doesn’t display the way you expect, you have less to debug.

    • 0