#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2003
    Posts
    62
    Rep Power
    11

    CSS - Set widths and realtive widths


    Hi,
    I am creating what is essentailly a three column table in CSS using classes

    The first column or span has to be 50px wide, the last column or span has to be 50px wide and.....what I want is .. .. .. .. the middle span to take up all remaining space.


    OK... .....I want to do this without tables. I'm only using classes defined in CSS and then span tags.

    Can this be done with CSS ?? ?? ??

    I do not want (plase don't provide this as an answer)
    a) to use tables
    b) use javascript to figure out the screen or browswer width

    I only want to use span tags and CSS to define a selector or class for each of the three span tags. So bascially the code will look like

    <span class=leftarea></span><span class=centerarea>Text will go here yada yada ydaa</span><span class=rightarea></span>
    Then... I'll have 3 selectors or classes defined in CSS...

    Thanks!!!
    ~~ K. I. S . S. ~~
  2. #2
  3. Retired
    Devshed Supreme Being (6500+ posts)

    Join Date
    Feb 2002
    Location
    Finland
    Posts
    9,143
    Rep Power
    2493
    Check out Glish. I think number 7 is what you are after.

    HTH

    Cheers,
    Jamie

    >_ skiFFie ? | Twitter

    __________________

    Let the might of your compassion arise to bring a quick end
    to the flowing stream of the blood and tears .....
    Please hear my anguished words of truth.

    __________________
  4. #3
  5. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1955
    In a simple stripped down form:
    Code:
    CSS
    #left { position: absolute;
            top: 0px;
            left: 0px;
            width: 50px;
          }
    
    #right { position: absolute;
             top: 0px;
             right: 0px;
             width: 50px;
           }
    
    #center { margin-left: 50px;
              margin-right: 50px;
            }
    
    HTML
    <div id="center">blah blah blah</div>
    
    <div id="left">blah blah blah</div>
    
    <div id="right">blah blah blah</div>
    Jabba_29's ref will fully explain what's going on.

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2003
    Posts
    62
    Rep Power
    11

    Doesn't REALLY work


    Hi,
    I tried that. Perhaps I might clarify. I require images or background images to be in these cells or divs and that's the issue.

    If you don't put any text or content in the center div... it doesn't really expand all the way out (between the two fixed width divs). Add a border to it and you'll see.

    I'm so disappointed in CSS, it doesn't appear to be well thought out.

    Thanks.....
    ~~ K. I. S . S. ~~
  8. #5
  9. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1955

    Re: Doesn't REALLY work


    Originally posted by please_explain
    Hi,
    I tried that. Perhaps I might clarify. I require images or background images to be in these cells or divs and that's the issue.


    Simply add "background: url(someimage.png) 0 0;"

    If you don't put any text or content in the center div... it doesn't really expand all the way out (between the two fixed width divs). Add a border to it and you'll see.

    It still has full width, but has 0 height. Use my example or use the example at Glish and put some of your own content in the various divs.

    I'm so disappointed in CSS, it doesn't appear to be well thought out.

    It's just new to you. Google for some CSS tutorials---there are a bunch. Once you're comfortable with the basics, you'll be hooked.
    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.

IMN logo majestic logo threadwatch logo seochat tools logo