3 vertical divs

3 vertical divs

what i am trying to do is

3 vertical divs with categories, grid of images (pagination i will do next step) and messages

i try following way, but grid and accordion are screwed up. request wisemen to advise, i am kinda stuck here

____________________________________________________


<html>
  
  <head>
    <script type='text/javascript' src='http://code.jquery.com/jquery-latest.js'></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <style>
      #mainContainer {
        text-align: center;
        width='100%'
      }
      #categories {
        float: left;
        border: 10px;
        background-color:red;
        width: 25%;
        height:500px;
      }
      #album {
        display: inline;
        border: 1px;
        background-color:green;
        width: 50%;
        height:200px;
      }
      #messages {
        float: right;
        border: 1px;
        background-color:blue;
        width: 25%;
        height:100%;
      }
    </style>
    <style>
      #feedback {
        font-size: 1.4em;
      }
      #selectable .ui-selecting {
        background: #FECA40;
      }
      #selectable .ui-selected {
        background: #F39814;
        color: white;
      }
      #selectable {
        list-style-type: none;
        margin: 0;
        padding: 0;
        width: 450px;
      }
      #selectable li {
        margin: 3px;
        padding: 1px;
        float: left;
        width: 100px;
        height: 80px;
        font-size: 4em;
        text-align: center;
      }
    </style>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"
    />
  </head>
  
  <body>
    <div id='mainContainer'>
      <div id='categories'>categories
        <div id="accordion">
           <h3>Category 1</h3>

          <div>
            <p>
              <ul>
                <li>sc1</li>
                <li>sc2</li>
                <li>sc3</li>
              </ul>
            </p>
          </div>
           <h3>Category 2</h3>

          <div>
            <p>
              <ul>
                <li>sc1</li>
                <li>sc2</li>
                <li>sc3</li>
              </ul>
            </p>
          </div>
           <h3>Category 3</h3>

          <div>
            <p>
              <ul>
                <li>sc1</li>
                <li>sc2</li>
                <li>sc3</li>
              </ul>
            </p>
          </div>
           <h3>Category 4</h3>

          <div>
            <p>
              <ul>
                <li>sc1</li>
                <li>sc2</li>
                <li>sc3</li>
              </ul>
            </p>
          </div>
        </div>
      </div>
      <div id='album'>
        <div>
          <ol id="selectable">
            <li class="ui-state-default">1</li>
            <li class="ui-state-default">2</li>
            <li class="ui-state-default">3</li>
            <li class="ui-state-default">4</li>
            <li class="ui-state-default">5</li>
            <li class="ui-state-default">6</li>
            <li class="ui-state-default">7</li>
            <li class="ui-state-default">8</li>
            <li class="ui-state-default">9</li>
            <li class="ui-state-default">10</li>
            <li class="ui-state-default">11</li>
            <li class="ui-state-default">12</li>
          </ol>
        </div>
      </div>
      <div id='messages'>messages
        <marquee behavior="scroll" direction="up" height="250" scrollamount="2"
        scrolldelay="10" ">
  <ul><li>sc1</li><li>sc2</li><li>sc3</li></ul>
  <ul><li>sc1</li><li>sc2</li><li>sc3</li></ul>
  <ul><li>sc1</li><li>sc2</li><li>sc3</li></ul>
  <ul><li>sc1</li><li>sc2</li><li>sc3</li></ul>
  <ul><li>sc1</li><li>sc2</li><li>sc3</li></ul>
</marquee>
</div>
</div>
</body>
</html>
____________________________________________________