SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)

    Div as a column layout

    Hello, I'm having trouble achieving a table like fluid CSS layout, what I need to achieve is to imitate this table layout

    HTML Code:
    <table>
    <tr><td>Some text of varied length 1A</td><td>Some text of varied length 1B</td></tr>
    <tr><td>Some text of varied length 2A</td><td>Some text of varied length 2B</td></tr>
    <tr><td>Some text of varied length 3A</td><td>Some text of varied length 3B</td></tr>
    </table>


    using this HTML

    HTML Code:
    <div class="multicol">
    <div class="colA">
    <p>Some text of varied length 1A</p>
    <p>Some text of varied length 2A</p>
    <p>Some text of varied length 3A</p>
    </div>
    <div class="colB">
    <p>Some text of varied length 1B</p>
    <p>Some text of varied length 2B</p>
    <p>Some text of varied length 3B</p>
    </div>
    </div>
    and any CSS, even if it's CSS3, including crazy hacking CSS if necessary, but no javascript or CSS expressions.
    I've been huffing and puffing all day now and am wondering if any of your folks are willing to at least tell me if it's possible to achieve this or not.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,592
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Would this do it, or am I missing something?

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>table</title>
    	
    <style media="all">
    .multicol {display:table;}
    .colA, .colB {display:table-cell;}
    </style>
    	
    </head>
    
    <body>
    
    <div class="multicol">
    <div class="colA">
    <p>Some text of varied length 1A</p>
    <p>Some text of varied length 2A</p>
    <p>Some text of varied length 3A</p>
    </div>
    <div class="colB">
    <p>Some text of varied length 1B</p>
    <p>Some text of varied length 2B</p>
    <p>Some text of varied length 3B</p>
    </div>
    </div>
    </body>
    
    </html>

  3. #3
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,222
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Interesting challenge.
    You said fluid layout. By nature, tables are great fluid containers.
    Tables are constructed by row, then by column (columns are inside rows) just like your table example shows.
    However, the css markup is arranged by column, then by row (rows are inside columns). Different animals.
    The css markup will not work like a table with 3 rows and 2 columns because the "columns" are not paired in rows.
    The difference is obvious when the table code is rewritten as shown below.
    I don't think the solution you are seeking is possible. But I'm just a novice

    Table code rearranged:
    Code:
    <table>
        <tr>
            <td>Some text of varied length 1A</td>
            <td>Some text of varied length 1B</td>
        </tr>
        <tr>
            <td>Some text of varied length 2A</td>
            <td>Some text of varied length 2B</td>
        </tr>
        <tr>
            <td>Some text of varied length 3A</td>
            <td>Some text of varied length 3B</td>
        </tr>
    </table>
    Same css code:
    Code:
    <div class="multicol">
        <div class="colA">
            <p>Some text of varied length 1A</p>
            <p>Some text of varied length 2A</p>
            <p>Some text of varied length 3A</p>
        </div>
        <div class="colB">
            <p>Some text of varied length 1B</p>
            <p>Some text of varied length 2B</p>
            <p>Some text of varied length 3B</p>
        </div>
    </div>

  4. #4
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Thank you for the reply ralph!
    Yeah, the p's need to be vertically lined up like they would be for a table, for example look at this

    HTML Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>table</title>
    	
    <style media="all">
    .multicol {display:table;width:300px}
    .colA, .colB {display:table-cell;}
    p {
    	border:solid #000 1px;
    }
    </style>
    	
    </head>
    
    <body>
    
    <div class="multicol">
    <div class="colA">
    <p>Some text of varied length 1A</p>
    <p>Some text of varied length 2A</p>
    <p>Some text of varied length 3A</p>
    </div>
    <div class="colB">
    <p>Some text of varied length 1B</p>
    <p>Some text of varied length 2B
    Some text of varied length
    Some text of varied length
    Some text of varied length
    Some text of varied length
    Some text of varied length</p>
    <p>Some text of varied length 3B</p>
    </div>
    </div>
    </body>
    
    </html>
    so that it looks like this

    HTML Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>table</title>
    	
    <style media="all">
    table {
    	width:300px;
    }
    table td {
    	border:solid #000 1px;
    }
    </style>
    	
    </head>
    
    <body>
    
    <table>
    <tr><td>Some text of varied length 1A</td><td>Some text of varied length 1B</td></tr>
    <tr><td>Some text of varied length 2A</td><td>Some text of varied length 2B
    Some text of varied length
    Some text of varied length
    Some text of varied length
    Some text of varied length
    Some text of varied length</td></tr>
    <tr><td>Some text of varied length 3A</td><td>Some text of varied length 3B</td></tr>
    </table>
    </body>
    
    </html>

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,592
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Ah yes, I see. Hmm, definitely a job for PMOB.

  6. #6
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    @ronpat thank you, it is interesting and difficult to accomplish, if it is possible.
    @ralph I sent a message to Paul, lets see if he has the time to help out.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,784
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi Timo,

    Ronpat hit the nail on the head and you'd need to use the same html structure as the table because the p elements in your cell bear no relationship to the p elements in the other cell unless they are paired in a table-row structure. If you can't change the html then I don't think it can be done.

    You can equally distribute the elements in each column but that's not the same as them aligning with each other.

    e.g.
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>table</title>
    <style media="all">
    .multicol {
    	display:table;
    	width:300px
    }
    .colA, .colB {
    	display:table-cell;
    	vertical-align:middle;
    	padding: 0 5px
    }
    p {
    	border:solid #000 1px;
    	margin:3em 0;
    }
    </style>
    </head>
    
    <body>
    <div class="multicol">
    		<div class="colA">
    				<p>Some text of varied length 1A</p>
    				<p>Some text of varied length 2A</p>
    				<p>Some text of varied length 3A</p>
    		</div>
    		<div class="colB">
    				<p>Some text of varied length 1B</p>
    				<p>Some text of varied length 2B
    						Some text of varied length
    						Some text of varied length
    						Some text of varied length
    						Some text of varied length
    						Some text of varied length</p>
    				<p>Some text of varied length 3B</p>
    		</div>
    </div>
    </body>
    </html>
    That only works because the content just happens to almost match.

  8. #8
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    @Paul
    thanks a lot for replying, I figured it was impossible. Although now that "impossible" is mentioned I begin to get ideas, for example I wonder if it's possible to achieve this without changing the html using the experimental flex-box model, what do you think?

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,784
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by YuriKolovsky View Post
    @Paul
    thanks a lot for replying, I figured it was impossible. Although now that "impossible" is mentioned I begin to get ideas, for example I wonder if it's possible to achieve this without changing the html using the experimental flex-box model, what do you think?
    I haven't played around with flexbox (because the spec keeps changing) but it looks like it can do some clever things. I'd still hazard a guess that you would need to change the html around though to create a relationship between those elements.


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
  •