SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Thread: NOT to drop

  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)

    NOT to drop

    There are four boxes in the top at the 1st url "http://seoul.dot.kr/y-test/test55/".
    The 1st box "seoul" and the 2ne box "dot.kr" are on the left and the 3rd box "guest" and the 4th box "login" are on the right.
    Since the text "seoul is dynamic, the text in the box can be longer than the text "seoul".
    The 2nd url "http://12345678901234567890123456789...y-test/test55/" is an example of them.
    In the 2nd url the box "dot.kr" is dropped because the text in the 1st box is very long.

    I like to make the 2nd box "dot.kr" is NOT to drop, and I like to put the 2nd box "dot.kr" between the 1st box "12....center.seoul" and the 2nd box "guest".

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I think you would need to put those two elements inside a display:table structure and have them in two cells so that they can spread across but not wrap. I can't see any other way that they would not wrap normally unless they were cells.

    So create a display:table wrapper with two divs inside as display:table-cell. Then include each of your existing divs inside those cells.

    I just tested in Firebug and it seems to work but will need testing.

  3. #3
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,469
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    @Paul O'B ,

    Give this an eval and see what you think. I don't understand why the right box in the left table-cell overflows into the right cell. I worked around it with padding, and it works in FF, Opera, Chrome, and IE8, but it seems odd. (I did not try to use dotJoon's code.)

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>dotJoon</title>
    <!--
    http://www.sitepoint.com/forums/showthread.php?1188070-NOT-to-drop
    Thread: NOT to drop
    2014.01.22 20:23
    dotJoon
    -->
        <style type="text/css">
    .table {
        display:table;
        width:96%;
        margin:0 auto;
    }
    .left,
    .right {
        display:table-cell;
        vertical-align:top;
        white-space:nowrap;
        outline:1px solid magenta;  /* */
    }
    .left {
        padding-right:7.1875em;  /* adjust to compensate for the "dot.kr" element overflowing the left table-cell */
    }
    .right {
        text-align:right;
    }
    .left div,
    .right div {
        display:inline-block;
        vertical-align:top;
        border:2px solid #808080;
        border-radius:15px;
        white-space:normal;
        margin-left:.25em;
    }
    .left div:first-child {
        margin-left:0;
    }
    .left div:first-child a {
        word-break:break-all;
    }
    a {
        display:block;
        font-size:2em;
        font-family:Verdana,sans-serif;
        text-decoration:none;
        padding:3px 5px 5px;
    }
        </style>
    </head>
    <body>
    
    <div class="table">
        <div class="left">
            <div class=""><a href="">center.seoul</a></div><!--
         --><div class=""><a href="">dot.kr</a></div>
        </div>
        <div class="right">
            <div class=""><a href="">guest</a></div><!--
         --><div class=""><a href="">login</a></div>
        </div>
    </div>
    
    </body>
    </html>

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

    Give this an eval and see what you think. I don't understand why the right box in the left table-cell overflows into the right cell.
    It's the same effect you get in a real table and the white space nowrap causes the element to stick out rather than wrap and the table algorithm just seems to ignore it from there on as it should have wrapped.

    To do it automatically without using padding you would need the nested table approach that I mentioned.

    e.g.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>dotJoon</title>
    <!--
    http://www.sitepoint.com/forums/showthread.php?1188070-NOT-to-drop
    Thread: NOT to drop
    2014.01.22 20:23
    dotJoon
    -->
    <style type="text/css">
    .table {
    	display:table;
    	margin:0 auto;
    	width:96%;
    }
    .table2 {
    	width:auto;
    	display:table;
    }
    .cell { display:table-cell; }
    .left, .right {
    	display:table-cell;
    	vertical-align:top;
    	outline:1px solid magenta;  /* */
    }
    .right {
    	text-align:right;
    	white-space:nowrap;
    }
    .ib {
    	display:inline-block;
    	vertical-align:top;
    	border:2px solid #808080;
    	border-radius:15px;
    	white-space:normal;
    	margin-left:.25em;
    }
    .left .ib:first-child { margin-left:0; }
    .left .ib:first-child a { word-break:break-all; }
    a {
    	display:block;
    	font-size:2em;
    	font-family:Verdana, sans-serif;
    	text-decoration:none;
    	padding:3px 5px 5px;
    }
    </style>
    </head>
    <body>
    <div class="table">
    		<div class="left">
    				<div class="table2">
    						<div class="cell">
    								<div class="ib"><a href="">center. seoul</a></div>
    						</div>
    						<div class="cell">
    								<div class="ib"><a href="">dot.kr</a></div>
    						</div>
    				</div>
    		</div>
    		<div class="right">
    				<div class="ib"><a href="">guest</a></div><!--			
     --><div class="ib"><a href="">login</a></div>
    		</div>
    </div>
    </body>
    </html>
    It's more html but is automatic.

  5. #5
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,469
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Thanks, Paul. Automatic is what I was trying to achieve, but didn't think to go with the nested table. So much easier.

  6. #6
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,469
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    This do-over uses nested tables on both sides. More tags in the right half creates nearly symmetrical HTML and simpler CSS. A good review for me (thanks again, Paul). Hope it's useful.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--
    http://www.sitepoint.com/forums/showthread.php?1188070-NOT-to-drop
    Thread: NOT to drop
    2014.01.22 20:23
    dotJoon
    -->
        <title>dotJoon</title>
        <style type="text/css">
    .table {
        display:table;
        border-spacing:0;
    }
    .outer {
        width:96%;
        margin:0 auto;
    }
    .left {
        margin:0 auto 0 0;
    }
    .right {
        margin:0 0 0 auto;
    }
    .tcell {
        display:table-cell;
        vertical-align:top;
        outline:1px solid magenta;  /* */
    }
    .bbox {
        border:2px solid #808080;
        border-radius:15px;
        margin-left:.25em;
    }
    .ibreak {
        margin-left:0;
    }
    .ibreak a {
        word-break:break-all;
    }
    a {
        display:block;
        font-size:2em;
        font-family:Verdana, sans-serif;
        text-decoration:none;
        padding:3px 5px 5px;
    }
    </style>
    </head>
    <body>
    
    <div class="table outer">
        <div class="tcell">
            <div class="table left">
                <div class="tcell">
                    <div class="bbox ibreak"><a href="">0123456789center.seoul</a></div>
                </div>
                <div class="tcell">
                    <div class="bbox"><a href="">dot.kr</a></div>
                </div>
            </div>
        </div>
        <div class="tcell">
            <div class="table right">
                <div class="tcell">
                    <div class="bbox"><a href="">guest</a></div>
                </div>
                <div class="tcell">
                    <div class="bbox"><a href="">login</a></div>
                </div>
            </div>
        </div>
    </div>
    
    </body>
    </html>


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
  •