SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  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)

    autoHeight and removing vertical space

    I have 6 lines at http://dot.kr/x-test/autoLayOut01.php.
    Code:
    (1) topLine
    (2) uideLine
    (3) adLine
    (4) titleLine
    (5) contentsLine
    (6) bottomLine
    Please notice the following.
    Code:
    (1)The text in red border will be varied because they are dynamic.
    (2)leftAd and rightAd in adLine are vertically middle aligned.
    (3)leftTitle and rightTitle in titleLine are also vertically middle aligned.
    Now I am telling what I want.
    I like to put the titleLine just below the adLine.
    In other words, I like to remove the white space gap between the adLine and the titleLine.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,513
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You have set the element to be display:table and 100% high which means that all the rows will need to expand to fill the 100% height.

    You could do as you have done for the first row where you have given it a 1px height which ensures the height remains at the minimum and you would need to do that for the adline row so that the titleline can start immediately under it..

  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 Paul O'B View Post
    You have set the element to be display:table and 100% high which means that all the rows will need to expand to fill the 100% height.
    Yes, that's what I want.
    And I want guideLine is just below the topLine and adLine is just below the topLine
    and titleLine is just below the adLine and contentsLine is to be vertically centered between titleLine and the bottomLine.


    Quote Originally Posted by Paul O'B View Post
    You could do as you have done for the first row where you have given it a 1px height which ensures the height remains at the minimum and you would need to do that for the adline row so that the titleline can start immediately under it..
    As I try to remove 1px height, I made another trial page at http://dot.kr/x-test/autoLayOut02.php.
    But the page autoLayOut01.php is not I want.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,513
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by dotJoon View Post
    Yes, that's what I want.
    And I want guideLine is just below the topLine and adLine is just below the topLine
    Then you will need to do what I said and set them to 1px height so that they don't stretch to 100% because that is the default behavior. Rows will try and stretch to take up the whole 100% and space will be equally distributed between them unless you force the height to be a small size and then the rest of the rows just stretch.

    e.g.
    Code:
    <body class="hiP100">
    <div class="dpTable hiP100 wiP100">
    		<div class="alnCenter hite1 dpTr">
    				<div class="hite5"></div>
    				<div class="flR mlr5 RoyalBlue_box"> <a href="" class="blueLink">rightTop</a> </div>
    				<div class="overflowHidden">
    						<div class="alnLeft flL m-l5 Red_box"> <a href="" class="blueLink">leftTop</a> </div>
    				</div>
    				<div class="hite5"></div>
    				<div class="flL m-l5 RoyalBlue_box"> <a href="" class="blueLink">leftGuide</a> </div>
    				<div class="flR m-r5 RoyalBlue_box"> <a href="" class="blueLink">rightGuide</a> </div>
    				<div class="inlineBlock mlr5 RoyalBlue_box"> <a href="" class="blueLink">guide2</a> </div>
    				<div class="hite5"></div>
    		</div>
    		<div class="dpTr hite1">
    				<div class="dpTable-cell">
    etc....
    Unless of course I misunderstand what you are trying to do.

    That layout is a little unrealistic without real content and I would never design with just boxes like that unless that is your page of course. I'm just assuming they are place-holders for content.

  5. #5
    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 Paul O'B View Post
    I'm just assuming they are place-holders for content.
    They'll be actually intro for contents.

    I added hite1(height:1px) as I change it from "<div class="dpTr">" to "<div class="hite1 dpTr">".
    The result is at http://dot.kr/x-test/autoLayOut03.php.
    The titleLine of autoLayOut03 is going up a little more than the titleLine of autoLayOut01.
    But the titleLine is not just below the adLine.
    (In order to see it, You need to test it with IPad or smatPhone.)

    Is there any way to put the titleLine place just below the adLine?

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,513
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by dotJoon View Post
    But the titleLine is not just below the adLine.
    It looks directly under it to me but a bit off horizontally because you have put it in another table structure so you will lose column alignment. You can't nest a table structure and have it align with the other rows as there is no connection. It just becomes another table with its own content. It should have just been another table-row and not a nested table structure.

    However, if you gave all the cells the same width then they should line up horizontally.

    e.g.
    Code:
    .dpTable-cell{width:33%}
    That does depends on the exact dynamics of what else you are going to put in those boxes.

    The hite5 div also effectively creates more table rows into the mix so it becomes more and more awkward to control things exactly. I haven't yet worked out what the effect you want as now you have some cells that stretch and some that don't which seems a little odd to me .

    (In order to see it, You need to test it with IPad or smatPhone.)
    That should have been mentioned in the first post!

    I don't have an ipad to hand so can't test at the moment. I'll have a look later when my wife brings hers back.

  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)
    Quote Originally Posted by Paul O'B View Post
    It looks directly under it to me but a bit off horizontally because you have put it in another table structure
    I think there might be some misunderstanding.
    if you look at http://dot.kr/x-test/autoLayOut03.php, you can, please, see 5px height between "leftTop" and "leftGuide" vertically.
    And there is another 5px height between "guide2" and "ad<br>ad" vertically.
    So far so good.

    However
    There are more than 5px height between "ad<br>ad" and "title<br>title" vertically.

    I like to remove the vertical space which is more than 5px between "ad<br>ad" and "title<br>title".
    I like to put the "title<br>title" to just(means 5px height;does NOT mean directly) below the "ad<br>ad".

    Thinking 5px height is very small height, I can say it is just because it is not very long height.

    Quote Originally Posted by Paul O'B View Post
    That should have been mentioned in the first post!
    Yes, I should. I am sorry about that.
    iPad/smartPhone has the same look with deskTop but it shows the vertical empty space which is more than 5 px clearly because they(iPad/smartPhone) has vertically long screen.

    Quote Originally Posted by Paul O'B View Post
    I don't have an ipad to hand so can't test at the moment. I'll have a look later when my wife brings hers back.
    I am looking forward it.

  8. #8
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,596
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    dotJoon,

    You appear to be the victim of several basic table coding error, empty/misplaced table-rows primarily.

    Try this slightly modified version of your page and see how it works on the smartPhones:
    (Note that table-cells have magenta outlines and the .hite5 items are light green.)
    Hopefully, there aren't any more empty/misplaced table-rows.
    Code:
    <!DOCTYPE html>
    <html class="hiP100">
    <head>
    <meta charset="utf-8">
    <title>index</title>
    
    <link rel="stylesheet" type="text/css" href="'.$httpRootSlash.'view/style.css">
    
    <style type="text/css">
    
    .dpTable.hiP100.wiP100 > div {outline:1px solid #f0f;}  /* outlines added to table-rows */
    
    *{margin:0;padding:0;word-break:break-all;border-collapse:collapse}
    a:link{text-decoration:none;color:royalBlue}
    a:visited{color:blueViolet}
    a:hover{text-decoration:underline;color:red}
    a.blueLink:link{color:royalBlue}
    a.blueLink:visited{color:royalBlue}
    a.blueLink:hover{text-decoration:none;color:red}
    .dplnline-block{display:inline-block}
    .dpTable{display:table}
    .dpTable-cell{display:table-cell;}
    .dpTable-row{display:table-row}
    .dpTr{display:table-row}
    .alnCenter{text-align:center}
    .alnLeft{text-align:left}
    .alnMiddle{vertical-align:middle}
    .alnTop{vertical-align:top}
    .flL{float:left}
    .flR{float:right}
    .hiAuto{height:auto}
    .overflowHidden{overflow:hidden}
    
    .dpTable .dpTable .dpTable-cell {padding-bottom:5px;}
    
    .fize40{font-size:40px}
    .hiP100{height:100%}
    .hite1{height:1px}
    .hite5{height:5px; background-color:#afa;}    /* bgcolor added to .hite5 */
    .mgn5{margin:5px}
    .mlr5{margin-left:5px;margin-right:5px}
    .mtb5{margin-top:5px;margin-bottom:5px}
    .m-b5{margin-bottom:5px}
    .m-l5{margin-left:5px}
    .m-r5{margin-right:5px}
    .m-t5{margin-top:5px}
    .wdn120{min-width:120px}
    .wiP100{width:100%}
    
    .Black_box{border:2px solid black;font-size:40px;border-radius:15px;padding:5pxdisplay:inline-block;}
    .RoyalBlue_box{border:2px solid royalBlue;font-size:40px;border-radius:15px;padding:5px;display:inline-block}
    .Red_box{border:2px solid red; font-size:40px;border-radius:15px;padding:5px;display:inline-block}
    </style>
    </head>
    <body class="hiP100">
    
    <div class="dpTable hiP100 wiP100">
        <div class="alnCenter hite1 dpTr">
            <div class="dpTable-cell">
                <div class="hite5"></div>
                <div class="flR mlr5 RoyalBlue_box">
                    <a href="" class="blueLink">rightTop</a>
                </div>
                <div class="overflowHidden">
                    <div class="alnLeft flL m-l5 Red_box">
                        <a href="" class="blueLink">leftTop</a>
                    </div>
                </div>
                <div class="hite5"></div>
                <div class="flL m-l5 RoyalBlue_box">
                    <a href="" class="blueLink">leftGuide</a>
                </div>
                <div class="flR m-r5 RoyalBlue_box">
                    <a href="" class="blueLink">rightGuide</a>
                </div>
                <div class="inlineBlock mlr5 RoyalBlue_box">
                    <a href="" class="blueLink">guide2</a>
                </div>
                <div class="hite5"></div>
            </div>
        </div>
        <div class="hite1 dpTr">
            <div class="dpTable-cell">
                <div class="alnCenter dpTable wiP100">
                    <div class="alnMiddle dpTable-cell">
                        <div class="flL mlr5 wdn120 RoyalBlue_box">
                            <a href="" class="blueLink">leftAd</a>
                        </div>
                    </div>
                    <div class="dpTable-cell">
                        <div class="Red_box">ad<br>ad</div>
                    </div>
                    <div class="alnMiddle dpTable-cell">
                        <div class="flR mlr5 wdn120 RoyalBlue_box">
                            <a href="" class="blueLink">rightAd</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="dpTr">
            <div class="dpTable-cell">
                <div class="wiP100 alnCenter dpTable">
                    <div class="alnMiddle dpTable-cell">
                        <div class="flL RoyalBlue_box m-l5">
                            <a href="" class="blueLink">leftTitle</a>
                        </div>
                    </div>
                    <div class="dpTable-cell">
                        <div class="mlr5 Red_box"><a href="">title<br>title</a></div>
                    </div>
                    <div class="alnMiddle dpTable-cell">
                        <div class="flR RoyalBlue_box m-r5 nide100">
                            <a href="" class="blueLink">rightTitle</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="dpTr">
            <div class="dpTable-cell">
                <div class="wiP100 alnCenter dpTable">
                    <div class="alnTop dpTable-cell">
                        <div class="alnLeft flL Red_box m-l5">
                            <a href="" class="blueLink">left</a><br>
                            <a href="" class="blueLink">contents</a>
                        </div>
                    </div>
                    <div class="dpTable-cell">
                        <div class="mlr5 Red_box">contents1<br>contents1<br>contents1<br></div>
                    </div>
                    <div class="alnTop dpTable-cell">
                        <div class="alnLeft flR Red_box m-r5 nide100">
                            <a href="" class="blueLink">right</a><br>
                            <a href="" class="blueLink">contents</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="dpTr">
            <div class="hite1 alnCenter dpTable-cell">
                <div class="hite5"></div>
                <div class="RoyalBlue_box flL m-l5">
                    <a href="" class="blueLink">left bottom</a>
                </div>
                <div class="RoyalBlue_box flR m-r5">
                    <a href="" class="blueLink">right bottom</a>
                </div>
                <div class="RoyalBlue_box b-r15 inlineBlock">
                    <a href="" class="blueLink">center bottom</a>
                </div>
            </div>
        </div>
    </div>
    
    </body>
    </html>

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,513
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Ron has given the correct answer above as you need to make sure your html is correct so I would go with his revision.

    However, there is a quick fix in your original and that is just to remove the hite5 div from above the row you want to remain static and just use padding top instead.

    e.g.
    Code:
    	<!--	<div class="hite5"></div>-->
    		<div class="dpTr">
    				<div class="dpTable-cell pad5">
    						<div class="wiP100 alnCenter dpTable">
    								<div class="alnMiddle dpTable-cell">
    										<div class="flL RoyalBlue_box m-l5"> <a href="" class="blueLink"> leftTitle </a> </div>
    Code:
    .pad5{padding-top:5px}
    I would still go with Rons revision above but I believe that could be simplified quite a lot by removing the nested table structure and .hite divs and just use some padding in the cells as required.

    I would do it like this is about half of the code.

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    * {
    	margin:0;
    	padding:0;
    	word-break:break-word;
    	border-collapse:collapse
    }
    a:link {
    	text-decoration:none;
    	color:royalBlue
    }
    a:visited { color:blueViolet }
    a:hover {
    	text-decoration:underline;
    	color:red
    }
    a.blueLink:link { color:royalBlue }
    a.blueLink:visited { color:royalBlue }
    a.blueLink:hover {
    	text-decoration:none;
    	color:red
    }
    html, body, .wrap {
    	height:100%;
    	width:100%
    }
    .wrap{display:table}
    .row { display:table-row;width:100% }
    .row1, .row2, .row3,.row4,.row6 { height:1px }
    .cell { padding:3px 5px 2px;display:table-cell;vertical-align:middle}
    .cell1{text-align:left}
    .cell2{text-align:center}
    .cell3{text-align:right}
    .row6 .cel{vertical-align:bottom}
    .Black_box,.RoyalBlue_box,.Red_box {
    	border:2px solid black;
    	font-size:40px;
    	border-radius:15px;
    	padding:5px;
    	display:inline-block;
    	vertical-align:middle;
    	text-align:left;
    }
    .RoyalBlue_box {border:2px solid royalBlue;}
    .Red_box {border:2px solid red;}
    </style>
    </head>
    
    <body>
    <div class="wrap">
    		<div class="row row1">
    				<div class="cell cell1"><div class="Red_box"><a href="" class="blueLink">leftTop</a></div></div>
    				<div class="cell cell2">&nbsp;</div>
    				<div class="cell cell3"><div class="RoyalBlue_box"><a href="" class="blueLink">rightTop</a></div></div>
    		</div>
    		<div class="row row2">
    				<div class="cell cell1"><div class="RoyalBlue_box"><a href="" class="blueLink">leftGuide</a></div></div>
    				<div class="cell cell2"><div class="RoyalBlue_box"><a href="" class="blueLink">guide2</a></div></div>
    				<div class="cell cell3"><div class="RoyalBlue_box"><a href="" class="blueLink">rightGuide</a></div></div>
    		</div>
    		<div class="row row3">
    				<div class="cell cell1"><div class="RoyalBlue_box"><a href="" class="blueLink"> leftAd </a> </div></div>
    				<div class="cell cell2"><div class="Red_box">ad<br>ad</div></div>
    				<div class="cell cell3"><div class="RoyalBlue_box"><a href="" class="blueLink">rightAd</a> </div></div>
    		</div>
    			<div class="row row4">
    				<div class="cell cell1"><div class="RoyalBlue_box"><a href="" class="blueLink"> leftTitle </a> </div></div>
    				<div class="cell cell2"><div class="Red_box"><a href="">title<br>title</a></div></div>
    				<div class="cell cell3"><div class="RoyalBlue_box"><a href="" class="blueLink">rightTitle</a> </div></div>
    		</div>
    			<div class="row row5">
    				<div class="cell cell1"><div class="Red_box"> <a href="" class="blueLink">left</a><br><a href="" class="blueLink">contents</a> </div></div>
    				<div class="cell cell2"><div class="Red_box">contents1<br>contents1<br>contents1<br></div></div>
    				<div class="cell cell3"><div class="Red_box"> <a href="" class="blueLink">right</a><br><a href="" class="blueLink">contents</a> </div></div>
    		</div>
    			<div class="row row6">
    				<div class="cell cell1"><div class="RoyalBlue_box"> <a href="" class="blueLink"> left bottom </a> </div></div>
    				<div class="cell cell2"><div class="RoyalBlue_box"> <a href="" class="blueLink"> center bottom </a> </div></div>
    				<div class="cell cell3"><div class="RoyalBlue_box"> <a href="" class="blueLink"> right bottom </a> </div></div>
    		</div>
    </div>
    </body>
    </html>
    Of course there may be reasons that you have used nested table structures in your examples if you want different column widths but your design doesn't seem to show that is true.

  10. #10
    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)
    http://dot.kr/x-test/autoLayOut05.php has Ron's code above.
    I added height:5px on the bottom because I think the bottom needs some vertical margin.
    The result is at http://dot.kr/x-test/autoLayOut06.php .
    I wanted that and it is, I think, cool.
    Thanks to Ron.

    http://dot.kr/x-test/autoHeightLayOut_paul01.php has Paul's code above.
    But the result is, I think, that I made something mistake in applying Paul's code.
    I always thanks to Paul.

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,513
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by dotJoon View Post

    http://dot.kr/x-test/autoHeightLayOut_paul01.php has Paul's code above.
    But the result is, I think, that I made something mistake in applying Paul's code.
    I always thanks to Paul.
    It must have got corrupted in my copy and paste as there was one missing bracket.

    Here is a live version.
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    * {
    	margin:0;
    	padding:0;
    	word-break:break-word;
    	border-collapse:collapse
    }
    a:link {
    	text-decoration:none;
    	color:royalBlue
    }
    a:visited { color:blueViolet }
    a:hover {
    	text-decoration:underline;
    	color:red
    }
    a.blueLink:link { color:royalBlue }
    a.blueLink:visited { color:royalBlue }
    a.blueLink:hover {
    	text-decoration:none;
    	color:red
    }
    html, body, .wrap {
    	height:100%;
    	width:100%
    }
    .wrap{display:table}
    .row { display:table-row;width:100% }
    .row1, .row2, .row3,.row4,.row6 { height:1px }
    .cell { padding:3px 5px 2px;display:table-cell;vertical-align:middle}
    .cell1{text-align:left}
    .cell2{text-align:center}
    .cell3{text-align:right}
    .row6 .cel{vertical-align:bottom}
    .Black_box,.RoyalBlue_box,.Red_box {
    	border:2px solid black;
    	font-size:40px;
    	border-radius:15px;
    	padding:5px;
    	display:inline-block;
    	vertical-align:middle;
    	text-align:left;
    }
    .RoyalBlue_box {border:2px solid royalBlue;}
    .Red_box {border:2px solid red;}
    </style>
    </head>
    
    <body>
    <div class="wrap">
    		<div class="row row1">
    				<div class="cell cell1"><div class="Red_box"><a href="" class="blueLink">leftTop</a></div></div>
    				<div class="cell cell2">&nbsp;</div>
    				<div class="cell cell3"><div class="RoyalBlue_box"><a href="" class="blueLink">rightTop</a></div></div>
    		</div>
    		<div class="row row2">
    				<div class="cell cell1"><div class="RoyalBlue_box"><a href="" class="blueLink">leftGuide</a></div></div>
    				<div class="cell cell2"><div class="RoyalBlue_box"><a href="" class="blueLink">guide2</a></div></div>
    				<div class="cell cell3"><div class="RoyalBlue_box"><a href="" class="blueLink">rightGuide</a></div></div>
    		</div>
    		<div class="row row3">
    				<div class="cell cell1"><div class="RoyalBlue_box"><a href="" class="blueLink"> leftAd </a> </div></div>
    				<div class="cell cell2"><div class="Red_box">ad<br>ad</div></div>
    				<div class="cell cell3"><div class="RoyalBlue_box"><a href="" class="blueLink">rightAd</a> </div></div>
    		</div>
    			<div class="row row4">
    				<div class="cell cell1"><div class="RoyalBlue_box"><a href="" class="blueLink"> leftTitle </a> </div></div>
    				<div class="cell cell2"><div class="Red_box"><a href="">title<br>title</a></div></div>
    				<div class="cell cell3"><div class="RoyalBlue_box"><a href="" class="blueLink">rightTitle</a> </div></div>
    		</div>
    			<div class="row row5">
    				<div class="cell cell1"><div class="Red_box"> <a href="" class="blueLink">left</a><br><a href="" class="blueLink">contents</a> </div></div>
    				<div class="cell cell2"><div class="Red_box">contents1<br>contents1<br>contents1<br></div></div>
    				<div class="cell cell3"><div class="Red_box"> <a href="" class="blueLink">right</a><br><a href="" class="blueLink">contents</a> </div></div>
    		</div>
    			<div class="row row6">
    				<div class="cell cell1"><div class="RoyalBlue_box"> <a href="" class="blueLink"> left bottom </a> </div></div>
    				<div class="cell cell2"><div class="RoyalBlue_box"> <a href="" class="blueLink"> center bottom </a> </div></div>
    				<div class="cell cell3"><div class="RoyalBlue_box"> <a href="" class="blueLink"> right bottom </a> </div></div>
    		</div>
    </div>
    </body>
    </html>

    The only real difference I notice is that in my example the "title title" in the middle of the 4th row is perfectly centred but yours is offset. I don't know of that was deliberate on your behalf or not.

  12. #12
    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)
    http://dot.kr/x-test/autoHeight03.php has exact copy of your live version.
    It looks cool.
    I am sorry to say that since red_bordered box has dynamic text, it can be varied.
    If "leftContents" has long text like at http://dot.kr/x-test/autoHeight04.php, "ad<br>ad" in adLine and "title<br>title" in titleLine are moved to right like the contentsLine.
    I like each line(row) is independent from other lines.
    "leftTop", "leftContents", and "rightContents" can cause those kinds of problems because they could has dynamic text.
    Although "ad<br>ad" and "title<br>title" are also dynamic text, it is, I think, NOT problem because they are in the center of the their line.

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,513
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    It's still not clear what you are aiming for exactly.

    If you want the columns to remain at 33% width no mater the width of the content then you just need to add table-layout:fixed to the wrap in my example.

    Code:
    .wrap {
        display: table;
        table-layout: fixed;
    }
    Live example.

    If on the other hand you want different cell widths on each row then you should create it as a series of separate table structures and not nested tables as such.

  14. #14
    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 Paul O'B View Post
    It's still not clear what you are aiming for exactly.
    For the reason,
    (1) my language of yours is not fluent.(English is not my language)
    (2) my language of CSS is not fluent like you.
    (3) my ability for setting idea of layOut might be not fluent as you think although I have my own reason for that.

    Anyway, I like to say what I want.
    http://dot.kr/x-test/autoHeight06.php is basically Ron's code above although I modified a little.
    If "left contents" become "very long left contents", since it is dynamic text, the result is at http://dot.kr/x-test/autoHeight07.php.
    Although center contents is moved toward right, "title<br>title" and "ad<br>ad" are not moved toward right.
    This is what I want, but if there is more refined way for that I like to get it because my greedy(?) wants more short and stable code for the layOut if there is.

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,513
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    This still comes down to the issue of what the real content is in these elements as you seem to have manufactured text so that your layout appears to work but as soon as any item changes your layout is all over the place as seen by the attached screenshot of your last example with some extra text added through firebug.

    As you can see from the screenshot there is no clear logic into the behaviour of those elements once the size of the text boxes is changed. Nothing is centred and nothing aligns. If that's what you intended then that's fine but from a web page point of view it doesn't seem to make much sense. Either the center items should remain centred and all aligned vertically or if you want independent rows then you would expect them to be centred between your side items but this is not the case. You made a big fuss about a couple of pixels in the vertical layout but these items seem miles out horizontally to me! (perhaps its just me )

    Notwithstanding the above you can still cut down on the code as you would simply need separate tables and not nested tables as I mentioned before. I'm loathe to make another demo because I must be missing something important along the way as I can't yet see a logic pattern to the layout (there must always be logic even if its your own design logic).
    Attached Images Attached Images


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
  •