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://12345678901234567890123456789012345678901234567890.center.seoul.dot.kr/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”.
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.
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.)
<!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>
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.
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.
