CODEWITHSUNDEEP
htmlcss
Homunculus Reticulli
Homunculus Reticulli

Reputation: 68386

Nested divs and floats not working

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

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?

Upvotes: 1

Views: 1162

Answers (3)

Rohan Patil
Rohan Patil

Reputation: 2348

Just remove <div class="spacer"></div> in lhs_section

 <html>
    <head>
       <style type="text/css">
          .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>
            <div id="rhs_section">
                <div id="col3"></div>
            </div>
        </div>
    </body>
</html>

Upvotes: 1

sandeep
sandeep

Reputation: 92803

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/

Upvotes: 2

Headshota
Headshota

Reputation: 21449

Remove the spacer div after col1 and col2

Here's a jsfiddle link to the corrected code:

http://jsfiddle.net/mwESj/

Upvotes: 1

Related Questions