Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
  <head>
    <title>
      Categories DIV Problem
    </title>
    <style type="text/css">
      /*** GLOBAL ***/
​
      *
      {
        padding: 0;
        margin: 0 auto;
        outline: none;
      }
​
      html, body
      {
        height: 100%;
        font: .9em Arial ,san-serif;
      }
​
      ul, li
      {
        list-style: none;
      }
        
      .clear
      {
        clear: both;
      }  
​
      /*** PAGE ***/
      
      div#container
      {
        min-width: 600px;
        max-width: 1000px;
        width: 85%;
        height: auto;
        min-height: 100%;
        margin: 0 auto;
      }
       
      /*** CATEGORIES ***/
​
      div#categories
      {
        width: 100%;
        height: 100%;
      }
​
      div#main
      {
        background: orange; 
      }
      
      div#sub
      {
        background: yellow; 
      }
​
      p.cat-name-box
      {
        padding: 3px 8px;
        margin: 1px;
        text-align: center;
        width: 120px;
        float: left;
        min-height: 100%;
        height: auto;
        
        background: #ddd;
      }
      
      ul#cat-main
      {
        display: table;
        background: purple;
        
      }
      
      ul#cat-sub
      {
        display: table;
        background: purple;
      
      }
      
      div#categories li
      {
        float: left;
        padding: 3px 8px;
        margin: 1px;
      }
        
     
      
      ul#cat-main li
      {
        background: #D7B0FF;
      }
       
      ul#cat-main li:hover
      {
        cursor: pointer;
        background: #9A38FF;
        color: #fff;
      }  
       
      ul#cat-sub li
      {
        background: #85FF87;
      }
       
      ul#cat-sub li:hover
      {
        cursor: pointer;
        background: #00C403;
        color: #fff;
      }  
      
      
    </style>
  </head>
  <body> 
    <div id="container">
      <div id="categories">
        <div id="main">
          <p class="cat-name-box">Main Categories</p>
          <ul id="cat-main">
            <li>Technology</li>
            <li>Politics</li>
            <li>Business</li>
            <li>Science</li>
            <li>Music</li>
            <li>Film</li>
            <li>Art</li>
            <li>Health</li>
            <li>Sports</li> 
            <li>Music</li>
            <li>Film</li>
            <li>Art</li>
            <li>Health</li>
            <li>Sports</li>
          </ul>
          <div class="clear"></div>
        </div>
        <div id="sub">
          <p class="cat-name-box">Sub Categories</p>
          <ul id="cat-sub">
            <li>Hardware</li>
            <li>Software</li>
            <li>Programming</li>
            <li>Web Applications</li>
            <li>Linux</li>
            <li>Mac</li>
            <li>Windows</li>
            <li>Mobile</li>
            <li>Web</li>
            <li>Mac</li>
            <li>Windows</li>
            <li>Mobile</li>
            <li>Web</li>
          </ul>  
          <div class="clear"></div>
        </div>
      </div>
    </div>
  </body>
</html>
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers