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">
      <link rel="stylesheet" type="text/css" href="style.css" />
    <body class="about">  
      <div id="header">
        <img src="header_img.jpg">      

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

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

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

      <div id="footer">
          This is the footer

1 answer

twayney 20

Floats usually have to be "cleared."

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

Answered over 8 years ago by twayney
  • Thanks your suggestion worked. Parag Shah over 8 years ago