SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    flexible width by browser resolutions.

    I have 3 <td> cells like the code below.

    The first cell is the left cell.
    The second cell is the center cell.
    The last cell is the right cell.


    I like to make the left cell is fixed by 200px on the most left.
    I like to make the right cell is fixed by 200px on the most right.
    and
    I like to make the center cell is flexible by browser resolution on the left.

    The following code is a trial code, but it seems not what I want.
    Code:
    <table>
    <tr>
    <td style='width:200px;background-color:green'>
      fixted 200px from the left
    </td>
    <td style='width:*'>
      different px from the browser resolutions
    </td>
    <td style='width:200px;background-color:green'>
      fixed 200px from the right
    </td>
    
    </tr>
    
    </table>
    I like to make the center cell spread to the rest of the screen( brwoser px - 400 px).
    Last edited by dotJoon; Apr 6, 2007 at 00:41.

  2. #2
    SitePoint Wizard bronze trophy C. Ankerstjerne's Avatar
    Join Date
    Jan 2004
    Location
    The Kingdom of Denmark
    Posts
    2,702
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    You can't use the asterisk in CSS, and you don't have to. Just use
    HTML Code:
    <table style="width:100%;">
      <tr>
        <td style="width:200px;"></td>
        <td></td>
        <td style="width:200px;"></td>
      </tr>
    </table>
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  3. #3
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by C. Ankerstjerne View Post
    You can't use the asterisk in CSS, and you don't have to. Just use
    HTML Code:
    <table style="width:100%;">
      <tr>
        <td style="width:200px;"></td>
        <td></td>
        <td style="width:200px;"></td>
      </tr>
    </table>
    It's cool!

  4. #4
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Can I make it without table?

    The following code seems not to work.

    Code:
    <div style="width:100%;">
    
    
    <span style='width:200px;background-color:green'>
      fixted 200px from the left
    </span>
    
    <span>
      different px from the browser resolutions
    </span>
    
    <span style='width:200px;background-color:green'>
      fixed 200px from the right
    </span>
    
    </div>

  5. #5
    SitePoint Wizard bronze trophy C. Ankerstjerne's Avatar
    Join Date
    Jan 2004
    Location
    The Kingdom of Denmark
    Posts
    2,702
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    Use the following:
    HTML Code:
    <div style="width:100&#37;">
      <div style="float:right;width:200px;"></div>
      <div style="float:left;width:200px;"></div>
      <div></div>
    </div>
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  6. #6
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by C. Ankerstjerne View Post
    Use the following:
    HTML Code:
    <div style="width:100%">
      <div style="float:right;width:200px;"></div>
      <div style="float:left;width:200px;"></div>
      <div></div>
    </div>
    Your code works fine at http://www.gisic.com/test/test28.html

    But the following code at http://www.gisic.com/test/test29.html seems not to be like what I expected.
    Code:
    <style type='text/css'>
     #lFloat{float:left}
     #rFloat{float:right}
    </style>
    
    <div style="width:100%">
      <div class='rFloat' 
             style="width:200px;background-color:pink">right</div>
      <div class='lFloat' 
            style="width:200px;background-color:lightBlue">left</div>
      <div>center</div>
    </div>
    I like to change the inline style into internal style.

  7. #7
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I got the answer myself like the following.
    Code:
    <style type='text/css'>
     #lFloat{float:left}
     #rFloat{float:right}
    </style>
    
    <div style="width:100%">
      <div id='rFloat' 
             style="width:200px;background-color:pink">right</div>
      <div id='lFloat' 
            style="width:200px;background-color:lightBlue">left</div>
      <div>center</div>
    </div>

  8. #8
    SitePoint Wizard bronze trophy C. Ankerstjerne's Avatar
    Join Date
    Jan 2004
    Location
    The Kingdom of Denmark
    Posts
    2,702
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    The best would be to use an external style sheet, if you need more than one page - I'm just including the style inline to make the example smaller
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!


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
  •