1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

2 columns but with wrap

Discussion in 'CSS' started by SoftLink, Nov 1, 2021.

0
  1. #1
    I realize this is a tall order.
    I have a list, each row containing 2 columns.
    The first column's content comes from a database and can be text and/or html.
    The second column is a form field. The width is determined by the size of the field in the database.
    So, the first column is auto and the second column is the width of the textbox.
    I can determine the width of the second column but not the first.

    I want the first column to be all the same width (ie the width of the widest cell in the column).
    The second column will be all the same width, filled with the textbox.

    If the combination of the 2 columns' width is greater than the screen width I want the columns to wrap (thereby creating only 1 column).

    The whole thing is built in PHP, server side so Javascript is out of the question.

    I'm looking for a strictly CSS solution. I've looked at grid but I'm not that great at it and so far I can't find a solution.
     
    SoftLink, Nov 1, 2021 IP
  2. sarahk

    sarahk iTamer Staff

    Messages:
    28,498
    Likes Received:
    4,460
    Best Answers:
    123
    Trophy Points:
    665
    #2
    can you set up an example somewhere like codepen? I am not a CSS person at all, but I'd start with something like this and let people mess with it. That way you can show them what you normal situation is.

    When you say the second column is defined by the size of the field what do you mean? var 100 is 100px? text is 500px? or are you using em? percent?
     
    sarahk, Nov 1, 2021 IP
  3. SoftLink

    SoftLink Active Member

    Messages:
    103
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    60
    #3
    It's in PHP. I'm really looking for an answer from someone who does know CSS.
     
    SoftLink, Nov 2, 2021 IP
  4. sarahk

    sarahk iTamer Staff

    Messages:
    28,498
    Likes Received:
    4,460
    Best Answers:
    123
    Trophy Points:
    665
    #4
    Can you give us some example HTML to play with? My point was that your description was really unclear.
     
    sarahk, Nov 2, 2021 IP
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #5
    Lists don't have rows, they have items. It sounds like your columnar relationships are semantic, in which case TABLE may in fact be the correct markup for this.

    But without seeing a sample of your data it's hard to say what the correct HTML would actually be.

    Content dictates markup, content + markup + device/user limitations dictates style. You've not shown us the data, or what you have for proper semantic markup, so we can't provide you with any CSS.

    If you're 100% certain this is not tabular data, then display:flex or display:grid might be in order.
     
    deathshadow, Nov 9, 2021 IP