Home/ Questions/Q 8628641
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T08:35:53+00:00

I am trying to setup a template with HTML and CSS and I am

  • 0

I am trying to setup a template with HTML and CSS and I am having trouble with my sidebar. It seems to be getting pushed below my content although it is to the left like it should be. I can’t figure out why? Does anyone have any suggestions?

Example: http://jsfiddle.net/zDdfn/

HTML:

<head>
<title>working</title>

<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container"> 

    <div id="banner">  </div> <!-- End banner div -->

    <div id="navcontainer">     
        <ul id="navlist">
            <li><a href="index.php">HOMEPAGE</a></li>
            <li><a href="about.php">ABOUT</a></li>
            <li><a id="current" href="index.php">HOMEPAGE</a></li>
            <li><a href="index.php">HOMEPAGE</a></li>
        </ul>
    </div> <!-- End navcontainer div -->



    <div id="content">main content
     </div> <!-- End content div -->


    <div id="sidebar"> sidebar content
    </div> <!-- End sidebar div -->



    <div id="footer"> foooter </div> <!-- End footer div -->



</div> <!-- End container div -->

</body>

and CSS

html, body {
    height: 100%; /* Required */
    }

body {
    margin : 0;
    padding : 0;

    font : 75% "Trebuchet MS", verdana, arial, tahoma, sans-serif;
    line-height : 1.8em;
    color : #000000;
    background : #F5F5FF; 
    }

#container {

    position: relative;
    min-height: 100%;
    width : 800px;
    margin : 0 auto 0 auto;
    border-style: solid;
    border-width:1px;
    background : #FFFFCC;
    }




#banner {

    color : #000000;
    border-style: solid;
    border-width:1px;
    height : 150px;
    background : #fff
    }    



#content {
    min-height: 100%;
    float:right
    padding : 10px;
    margin-left : 200px;
    margin-bottom : 10px;
    color : #666;
    background : #F5EBCC;
    border-left-style:dotted;
    border-left-color:#8F8F00;
    border-bottom-style:dotted;
    border-bottom-color:#8F8F00;
    }



#sidebar {

    float : left;
    width : 20px;

    padding : 10px;

    color : #000000;

    border-style: solid;
    border-width:1px;
    }


#footer {
    clear:both;
    position:relative;
    bottom: 0;
    width: 800px;
    background : #FFFFCC;
    } 

#navcontainer {
    background:#E0E066;

    }

#navlist {
    list-style: none;   /* list-style: none removes bullets */
    margin: 0px;
    padding : 0.5em 0;
    }

#navlist li {
    display: inline;
    margin : 0;
    }

#navlist li a {
    padding : 0.5em 0.5em;
    margin: 0;
    color : #000;
    background : #B8B800;
    text-decoration : none;
    }

#navlist li a:hover {
    color : yellow; 
    background : #8F8F00 url(img/menu_arrow.gif) bottom center no-repeat;
    }

#navlist li a#current {
    color :  #fff;
    background : #8F8F00 url(img/menu_arrow.gif) bottom center no-repeat;
    }
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Switching the order of your #content and #sidebar div tags in the HTML will solve this as you are using the opposing float technique: http://jsfiddle.net/vrdZZ/

    • 0