Home/ Questions/Q 300205
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-12T06:53:34+00:00

I am in need of a css layout for fixed size sidebar and a

  • 0

I am in need of a css layout for fixed size sidebar and a fluid content area. Problem is, most css layouts for this format use float to position the sidebar. Because of this, I can not use a clear: both inside the content area.

Check out the html attached. Content area skips to bottom of nav content at float.

I need a solution for this type of a css layout which still allows me to use floats/clear inside the content area.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <style type="text/css" media="screen">
        body {
            margin: 0;
            padding: 0;
        }

        #nav {
            float: left;
            width: 160px;
        }

        #content {
            margin: 0 0 0 200px;
            background-color: green;
        }       
</style>
</head>
<body>
<div>

    <div id="nav">

        This is the nav content<br/>
        This is the nav content<br/>
        This is the nav content<br/>
        This is the nav content<br/>
        This is the nav content<br/>
        This is the nav content<br/>
        This is the nav content<br/>
        This is the nav content<br/>
        This is the nav content<br/>
        This is the nav content<br/>
        This is the nav content<br/>
        This is the nav content<br/>
        This is the nav content<br/>
        This is the nav content<br/>
        This is the nav content<br/>

    </div>
    <div id="content">

        This is the main content<br/>
        This is the main content<br/>
        This is the main content<br/>
        This is the main content<br/>


        <div style="padding: 10px; float: left; width: 100px; background-color: yellow;">Left</div>
        <div style="padding: 10px; float: right; width: 100px; background-color: orange;">Right</div>

        <div style="clear: both;"> </div>

        (This shouldn't be way down here) This is the main content<br/>
        This is the main content<br/>
        This is the main content<br/>
        This is the main content<br/>

    </div>
</div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I changed the #nav from “float:left;” to “position:absolute;”. Will that do what you wanted?

    • 0