Question

I am new to CSS, I found an layout online, but I have a little problem customizing it.

When the content of mainContent div is “higher” then the left menu, everything is working ok – but when the mainContent is smaller, it looks like this:

The div order is visible through Firefox WebDevelopper addon. The .css file is as follows:

body {
   padding: 0px;
   margin: 0px;
   font-family: Arial, Helvetica, sans-serif;
}

#container {
   padding-right: 20px;
   padding-left: 20px;
}

#header {
}

#mainMenu {
   border: 1px solid #808080;
   font-size: 0.8em;
}

#pageBody {
   position: relative;
}

#sidebar {
   width: 250px;
   padding: 5px 10px 10px 10px;
   float: left;
   border: 1px solid #808080;
   font-size: 0.8em;
   margin-top: 5px;
   margin-right: 10px;
   min-height: 500px;
}

.mainContent { 
   text-align: justify;
   min-width: 400px;
   min-height: 500px;
   margin-left: 285px;
}

#footer {
   font-size: 0.8em;
   border-top-style: solid;
   border-top-width: 1px;
   border-top-color: #CCCCCC;
   text-align: center;
   color: #CCCCCC;
   background-color: #333333;
   padding-top: 10px;
   padding-bottom: 10px;
   margin: 0;
   /*clear: both;*/
}

#footer p {
   margin-top: 0px;
   margin-bottom: 5px;
}

#footer a {
   color: #CC3300;
   text-decoration: none;
}

#footer a:hover {
   color: #FF9900;
}

Can I please ask for some guidance in repairing this layout? I would like to acheive something similar to:

The exact position is not important, I just want the footer to be placed below the pageBody div.

I would be grateful for any help.

Answer 1

I don’t know what your html looks like, but it looks like you could try inserting a clearing div just before the footer… btw, why is the ‘clear: both;’ commented out in the footer css rule?

code to insert just before the footer div:

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

Not positive whether it will help, but if I understand your problem correcty, this is my best guess!