SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    SitePoint Zealot Norrad's Avatar
    Join Date
    Nov 2003
    Location
    Thailand
    Posts
    173
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Splitting box in 2 columns

    I have a simple box on my site that I want to split in 2 columns using CSS.

    The code to create the current box is:
    PHP Code:
    <div id="main">
      <
    div id="box">&nbsp;</div>
    </
    div
    And the stylesheet:
    PHP Code:
    #main {
        
    border1px solid #CCCCCC;
        
    width400px;
        
    padding5px;
    }
    #box {
        
    padding5px;
        
    background-color#CCCCCC;

    I want to split the centre box (#box) into 2 columns of equal width. Is this possible using CSS or should I resort to tables?
    Attached Images Attached Images

  2. #2
    SitePoint Zealot pacman2504's Avatar
    Join Date
    Oct 2003
    Location
    North Wales
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your image hasn't been approved yet, but is this what you are trying to achieve?
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <title>
          Untitled
        </title>
        <style type="text/css">
    /*<![CDATA[*/
    <!--
    #main {
        border: 1px solid #CCCCCC;
        width: 400px;
        padding: 5px;
    }
    #box {
        padding: 5px;
        background-color: #CCCCCC;
        height: 100%;
    } 
    .left {
        float: left;
        padding-bottom: 15px;
    }
    .right {
        float: right;
        color: red;
    }
    .left, .right {
        width: 190px;
    }
    -->
    /*]]>*/
        </style>
      </head>
      <body>
        <div id="main">
          <div id="box">
            <p class="right">
              This is the right column. This is the right column.
            </p>
            <p class="left">
              This is the left column. This is the left column.
            </p>
          </div>
        </div>
      </body>
    </html>
    In the land of the witless, the half-wit is king.
    Business and liability insurance quotes


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •