Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    Jul 2009
    Posts
    186
    Thanks
    72
    Thanked 2 Times in 2 Posts

    HELP getting divs to behave like tables! Right alignment problem.

    Hello all. I am in the process of trying to get divs to behave more like tables. I need a left column and a right column. The left column should dynamically expand and shrink depending on browser window size, and the right column should be 300px wide. I am going to put advertisements in the 300px wide area, and the actual site content in the left column. The problem i seem to be having is that I cannot seem to figure out how to get the left column to dynamically expand/shrink. It seems that no matter what I do, a specific width MUST be designated for the left column. Help!

    This is my code so far:

    (HTML)
    Code:
    <div id="gamewrap">
    <div id="gameleft">
    This is the left column.
    </div>
    <div id="gameright">
    This is the right column
    </div><!-- End gameright -->
    </div><!-- End gamewrap -->
    <div class="clear"></div><!-- Clear divs -->
    (CSS)
    Code:
    #gameleft {
      float:left;
      width:900px;
      padding:20px;
      background:#f4f4f4;
      padding-bottom: 32767px;
      margin-bottom: -32767px;
    }
    #gameright {
      float:right;
      width:300px;
      padding:20px;
      background:#f4f4f4;
      padding-bottom: 32767px;
      margin-bottom: -32767px;
    }
    #gamewrap {
      overflow: hidden;
      width:100%;
      background:#f4f4f4;
    }
    .clear {
      clear:both;
    }

  • #2
    Regular Coder
    Join Date
    Jul 2009
    Posts
    186
    Thanks
    72
    Thanked 2 Times in 2 Posts
    A good example of what I am trying to do is http://www.fark.com/. Notice the right hand side is designated for advertisements, while the actual content of the page is on the left hand side of the page and changes size depending on browser window size.

  • #3
    New Coder
    Join Date
    Jun 2010
    Location
    The Netherlands
    Posts
    52
    Thanks
    0
    Thanked 6 Times in 6 Posts
    Try this:
    html:
    Code:
    <div id="gamewrap">
    <div id="gameleft">
    This is the left column.
    </div>
    <div id="gameright">
    This is the right column
    </div><!-- End gameright -->
    <div class="clear"></div><!-- Clear divs -->
    </div><!-- End gamewrap -->
    Css:
    Code:
    #gameleft {
      float:left;
      width:auto;
      background:#f4f4f4;
      height:auto;
    }
    #gameright {
      float:right;
      width:300px;
      background:#f4f4f4;
      height:20px;
    }
    #gamewrap {
      overflow: hidden;
      width:100%;
      background:#f4f4f4;
    }
    .clear {
      clear:both;
    }

  • #4
    Regular Coder
    Join Date
    Jul 2009
    Posts
    186
    Thanks
    72
    Thanked 2 Times in 2 Posts
    Changing width to 'auto' does not work because the text in the left column forces the text in the right column to be displayed underneath it, instead of side by side.

  • #5
    New Coder
    Join Date
    Jun 2010
    Location
    The Netherlands
    Posts
    52
    Thanks
    0
    Thanked 6 Times in 6 Posts
    The problem is, your not defining a fixed width for the wrapper. When you give both your left, right and wrapper a fixed width, they will work like that fark website.

    Html:
    Code:
    <div id="gamewrap">
    <div id="gameleft">
    This is the left column.
    </div>
    <div id="gameright">
    This is the right column
    </div><!-- End gameright -->
    <div class="clear"></div><!-- Clear divs -->
    </div><!-- End gamewrap -->
    CSS:
    Code:
    #gameleft {
     float:left;
     width:900px;
     background:#f4f4f4;
    }
    #gameright {
     float:right;
     width:300px;
     background:#f4f4f4;
    }
    #gamewrap {
      background:#f4f4f4;
      width:1200px;
    }
    .clear {
      clear:both;
    }

  • #6
    Regular Coder
    Join Date
    Jul 2009
    Posts
    186
    Thanks
    72
    Thanked 2 Times in 2 Posts
    Yes but I don't want it to have a fixed width. The only fixed width I want is the right hand side, which I want to be 300px. The left hand side is supposed to change depending on browser window size.

  • #7
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    You don't need to apply floats and widths to both columns to make a 2 column layout. Take a http://bonrouge.com/2c-hf-fluid%28r%29.php.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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