asked on

Html: Responsive design not working. Floated columns do not align

I was reading a responsive web design book by Ethan Marcotte and playing with the html below. This is not working. The two columns floated to the left and right are not working. Does anyone know why?

<html>
<title>
Responsive design example
</title>
<head>
</head>
<body>
<div id="page">
      <div class="blog">
            <h1 class="lede"> Recently in <a href="#">The Bot Blog </a><h1>
            <div class="main">
             <p>
             This is the main section and I hope you get it
             This is the main section and I hope you get it
             This is the main section and I hope you get it
             This is the main section and I hope you get it
             This is the main section and I hope you get it
            </p>
            </div> 

            <div class="other">
             <p>
             This is the other section and I hope you get it
             This is the other section and I hope you get it
             This is the other section and I hope you get it
             This is the other section and I hope you get it
             This is the other section and I hope you get it
             </p>
            </div> 

      </div> 

</div>
</body>
<style type="text/css">
      #page {
            margin: 36px auto;
            width: 90%;
            background-color: red;
      }

      .blog {
            margin: 0 auto 53px;
            width: 93.75%; /* 900px / 960px */
            background-color: yellow;
      }

      .blog .main {
            float: left;
            width: 62.88888888888889%; /* 566px / 900px */
            background-color: blue;
      }

      .blog .other {
            float: right;
            width: 36.77777777777778% /* 331px / 900px */
            background-color: yellow;
      }
</style>

</html>

Gary

Give the right column a width like 37%
A floated div will continue to take up all space it can to fit the content and if there is no width then that means it can break out of the floated area and take as much width as it needs.
Don't think I'm explaining this properly

Sirdots

ASKER

Thanks. I don't seem to understand your explanation. The right column has a width of
36.77777777777778%

Gary

Good point, you are missing a ; after the width attribute (that would be a semi-colon)

ASKER CERTIFIED SOLUTION

Scott Fell

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Sirdots

ASKER

Thanks. I didn't see that at all.

Scott Fell

When you get into trouble like that, I check the html validation http://validator.w3.org/. If this was a complete page, I would have also checked chrome/firebug console.

Otherwise, those errors are not easy to see when you stare at it for too long.