blocks are fluid but text doesn't resize

Question

I have two divs, .left and .right in a .container div All of which widths are set in % and when I resize my browser the blocks resize too but the text <p> doesn't. Why is that?

Here's a link http://jsfiddle.net/TomasRR/WuNL3/10/

I have stated that .left and .right should always be 400px width when container gets 800px with this command

 @media only screen and (max-width: 800px) {
    .left, .right {
      width: 400px;
    }

however when resizing from browser's max width till 800px I want my text in .right resize too, I mean drop down on another line, so I could see the full sentence.

<div class="cont">
      <div class="left">
        <h1>Programming and fuss</h1>
          <h2><em>by Tomas R. </em></h2>
  <p>MY TOP 3 PAGES:</p>
          <a href="http://www.twitter.com">TWITTER</a>
          <a href="http://www.wikipedia.org">WIKIPEDIA</a>
          <a href="http://www.vice.com">VICE</a>
      </div>

      <div class="right">
              <p>"An ounce of practice is generally worth more than a ton of theory." <span>E. F. Schumacher.</span></p>
      </div>  
</div> <!-- .cont -->

the .left doesn't interest me. How to fix the text in .right is my question.

Answer 1

Your white-space:nowrap; entry in the css for your cont class is where the problem lies. This stops your paragraph from wrapping within the div

If you want the 2 divs to sit side by side, use float:left; and float:right;

To combat the problem with the right div dropping below the left div, you need to use width: calc(50% - 4px); for each div as you have borders around the divs of 1px thickness. If you adjust the border thickness you will need to adjust the pixels subtracted.

Answer 2

Your white-space:nowrap; entry in the css for your cont class is where the problem lies. This stops your paragraph from wrapping within the div

If you want the 2 divs to sit side by side, use float:left; and float:right;

Answer 3

I'd use float:left instead and also use a container element to keep the widths as 50% and not need use calc to compensate for the borders

<!-- HTML -->
<div class="left">
     <div class="container">
         Foo
     </div>
</div>
<div class="right">
     <div class="container">
         Foo
     </div>
</div>

/* CSS */
.cont {                                
    width:100%;
}
.right .container { border:1px solid black; }
.right {                    
    width:50%;
    height:200px;    
    float:left;
}
.left .container { border:1px solid red; }
.left {    
    width:50%;
    height:200px;
    float:left;
    vertical-align:top;    
}

Demo

If you want them to always take up half of the width, you just have to remove the media query that you have that sets a set width when the browser is small

Demo

As a front end designer, I would recommend that at some point you use media queries to have the sections on top of each other when the screen is small so that it is responsive and readable on small screens, like this