SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    2 Col layout with a twist.

    Hi all,

    Does anyone know how I can have a 2 col layout that I can remove the second column and the first column will enlarge to the 100% of the container?

    example

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE> New Document </TITLE>
    <style type="text/css">
        html, body {
            width: 100%;
            text-align: center;
        }
        .container {
            width: 800px;
            margin: 30px auto 0 auto;
            padding: 0 10px 0 10px;
            background-color: pink;
        }
        .left {
            width: 570px;
            background-color: #ccc;
            float: left;
        }
        .left_unrestricted {
            width: 100%;
            background-color: #ccc;
            float: left;
        }
        .right {
            width: 200px;
            background-color: #ccc;
            float: right;
        }
    </style>
    </HEAD>
    
    <BODY>
    
        <div class="container">
    
            <div class="left">Left</div>
            <div class="right">Right</div>
        
        </div>
    
        <div class="container">
    
            <div class="left_unrestricted">Left</div>
            <!--<div class="right">Right</div>-->
        
        </div>
    
    </BODY>
    </HTML>
    The first is how it should be when I have two columns, but I want it so that when I remove or hide the second column the first column expands like the second example.

    TIA

    Gav


  2. #2
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)


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
  •