Home/ Questions/Q 6824337
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T21:53:22+00:00

I am trying to create a three column page. My intention is to have

  • 0

I am trying to create a three column page. My intention is to have 2 main sections:

  • Left hand section (this will be split into two columns)
  • Right hand section (this will have onlly one column)

Columns 1 and 2 float left correctly and are side by side. However, I have tried just about everything, and column 3 ALWAYS is displayed under column 1&2

This is what my simplified HTML looks like:

<html>
    <head>
       <style type="text/css">
          body { width: 1200px; }
          .spacer { clear: both; height: 1px; }
          #lhs-section, #rhs-section { float: left; }
          #col1, #col2, #col3 { float: left; min-height: 400px; padding-right: 5px; border: 1px solid #abc; width: 350px; }
       </style>
    </head>
    <body>
        <div>
            <div id="lhs-section">
                <div id="col1"></div>
                <div id="col2"></div>
                <div class="spacer"></div>
            </div>
            <div id="rhs-section">
                <div id="col3"></div>
                <div class="spacer"></div>
            </div>
            <div class="spacer"></div>
        </div>
    </body>
</html>

What am I doing wrong?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The mean problem with your id names they are different in css & in html markup. Reason you write #lhs-section, #rhs-section in your css & <div id="lhs_section"> <div id="rhs_section">
    in your html.

    So, write like this:

    <div id="lhs-section">
                <div id="col1"></div>
                <div id="col2"></div>
                <div class="spacer"></div>
            </div>
            <div id="rhs-section">
                <div id="col3"></div>
                <div class="spacer"></div>
            </div>
            <div class="spacer"></div>
        </div>

    Check this http://jsfiddle.net/aU5y8/

    • 0