CODEWITHSUNDEEP
css
Louis W
Louis W

Reputation: 3252

Layout Problems: Fixed size sidebar w/ fluid content & clear

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>

Upvotes: 1

Views: 3140

Answers (2)

PetersenDidIt
PetersenDidIt

Reputation: 25620

Try this out: http://matthewjamestaylor.com/blog/perfect-2-column-left-menu.htm

Its good starter for different number column layouts that works cross browser and lets you use floats and clears in both columns. Also has fixes to have full length column background colors. It also is SEO friendly by having the "main" column come first in the html rather then after the left bar which normally has information that is not has important as the center content.

Upvotes: 0

Mottie
Mottie

Reputation: 86413

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

Upvotes: 2

Related Questions