I am trying to achieve a simple 2 column web page design with a header and footer.

I have the following HTML, but the div containing the footer is actually being rendered on the same line as the div with id=main, if I maximize my browser window to a width of 1396.

Note: The header image is 1024x150 px.

Also is there a best practice CSS for a 2 or 3 columns layout with a header and footer?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>  
      <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body class="about">  
      <div id="header">
        <img src="header_img.jpg">      
      </div>    

      <div id="main" style="width: 1024px;">

        <div id="content" style="width: 80%; float: left;">
      Courses, lectures, etc will be shown here
    </div>

    <div id="rhs_sidebar" style="width: 20%; float: left;">
      The sidebar
    </div>
      </div>    

      <div id="footer">
      <hr/>
          This is the footer
      </div> 
    </body>
</html>

1 answer

twayney 20
2
points

Floats usually have to be "cleared."

Try inserting <div style="clear: both;"></div> right before the footer div.

Answered almost 6 years ago by twayney
  • Thanks your suggestion worked. Parag Shah almost 6 years ago