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> <!-- /end  .main -->
            
            <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> <!-- /end  .other -->
            
      </div>  <!-- /end  .blog.section -->      

</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>
SirdotsAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

GaryCommented:
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
0
SirdotsAuthor Commented:
Thanks. I don't seem to understand your explanation. The right column has a width of
36.77777777777778%
0
GaryCommented:
Good point, you are missing a ; after the width attribute (that would be a semi-colon)
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
You have 2 glaring errors....ok well they are really are not glaring.  You did not close your h1 tag and in your css you forgot a semi colon in your blog.other width.  

Fixed and working http://jsbin.com/uHOne/1/

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>padas</title>
  <style>
         #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>
</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> <!-- /end  .main -->
            
            <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> <!-- /end  .other -->
            
      </div>  <!-- /end  .blog.section -->      

</div>
</body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
SirdotsAuthor Commented:
Thanks. I didn't see that at all.
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
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.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.