Staying nick div

I have a webPage at http://dot.kr/joon/016/
Although “menu” and “nick” are static contents on the header at the page, “title” can be very long theoretically because it’s dynamic contents.
I like to make that “nick” is not to drop when the contents of “title” is very long.
http://dot.kr/joon/017/ is one of my trials.
But it seems not to work I expected.

OK, “nick” does not drop.


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>

html, body {
	margin:0;
	padding:0;
	height:100%;
}
body {
	display: flex;
	height: 100vh;
	flex-direction: column;
}
main.content { background:white; }
header, footer { background:gray;
text-align:center;
display:inline-block;
vertical-align:middle;
 }
#menu,#nick,#sns,#guide{
display:inline-block;
font-size:50px;
background:white;
border-radius:20px;
margin:10px;
padding:5px;
vertical-align:middle;
}
#title,#submit{
display:inline-block;
font-size:50px;
line-height:80px;
vertical-align:middle;
}
.content {
	flex: 1;
	overflow:auto;
}
.dpTable{display:table}
.dpRow{display:table-row}
.dpCell{display:table-cell}
.flL{float:left;}
.flR{float:right;}

</style>
</head>
<body>
<header class="dpTable">
<div class="dpRow">
    <div id="menu" class="flL dpCell">menu</div>
    <div id="nick" class="flR dpCell">nick</div>
    <div id="title" class="dpCell">title title title title title title title title title title title</div>
</div>
</header>
<main class="content">
<a href="">index</a><br>
<a href="menu/">menu</a><br>
<a href="contents/">contents</a><br>
		<p>FIRST CONTENTS </p><br>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id mauris eu nulla feugiat sagittis nec vel nulla. Suspendisse lobortis, augue at ornare tincidunt, dui erat ultrices eros, sed convallis sapien orci convallis felis. Curabitur nec sapien arcu. Ut molestie gravida facilisis. Proin pharetra varius consectetur. Nullam adipiscing felis a elit pulvinar dignissim. Nam tempor adipiscing elit non varius. </p><br>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id mauris eu nulla feugiat sagittis nec vel nulla. Suspendisse lobortis, augue at ornare tincidunt, dui erat ultrices eros, sed convallis sapien orci convallis felis. Curabitur nec sapien arcu. Ut molestie gravida facilisis. Proin pharetra varius consectetur. Nullam adipiscing felis a elit pulvinar dignissim. Nam tempor adipiscing elit non varius. </p><br>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id mauris eu nulla feugiat sagittis nec vel nulla. Suspendisse lobortis, augue at ornare tincidunt, dui erat ultrices eros, sed convallis sapien orci convallis felis. Curabitur nec sapien arcu. Ut molestie gravida facilisis. Proin pharetra varius consectetur. Nullam adipiscing felis a elit pulvinar dignissim. Nam tempor adipiscing elit non varius. </p><br>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id mauris eu nulla feugiat sagittis nec vel nulla. Suspendisse lobortis, augue at ornare tincidunt, dui erat ultrices eros, sed convallis sapien orci convallis felis. Curabitur nec sapien arcu. Ut molestie gravida facilisis. Proin pharetra varius consectetur. Nullam adipiscing felis a elit pulvinar dignissim. Nam tempor adipiscing elit non varius. </p><br>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id mauris eu nulla feugiat sagittis nec vel nulla. Suspendisse lobortis, augue at ornare tincidunt, dui erat ultrices eros, sed convallis sapien orci convallis felis. Curabitur nec sapien arcu. Ut molestie gravida facilisis. Proin pharetra varius consectetur. Nullam adipiscing felis a elit pulvinar dignissim. Nam tempor adipiscing elit non varius. </p><br>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id mauris eu nulla feugiat sagittis nec vel nulla. Suspendisse lobortis, augue at ornare tincidunt, dui erat ultrices eros, sed convallis sapien orci convallis felis. Curabitur nec sapien arcu. Ut molestie gravida facilisis. Proin pharetra varius consectetur. Nullam adipiscing felis a elit pulvinar dignissim. Nam tempor adipiscing elit non varius. </p><br>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id mauris eu nulla feugiat sagittis nec vel nulla. Suspendisse lobortis, augue at ornare tincidunt, dui erat ultrices eros, sed convallis sapien orci convallis felis. Curabitur nec sapien arcu. Ut molestie gravida facilisis. Proin pharetra varius consectetur. Nullam adipiscing felis a elit pulvinar dignissim. Nam tempor adipiscing elit non varius. </p>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id mauris eu nulla feugiat sagittis nec vel nulla. Suspendisse lobortis, augue at ornare tincidunt, dui erat ultrices eros, sed convallis sapien orci convallis felis. Curabitur nec sapien arcu. Ut molestie gravida facilisis. Proin pharetra varius consectetur. Nullam adipiscing felis a elit pulvinar dignissim. Nam tempor adipiscing elit non varius. </p><br>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id mauris eu nulla feugiat sagittis nec vel nulla. Suspendisse lobortis, augue at ornare tincidunt, dui erat ultrices eros, sed convallis sapien orci convallis felis. Curabitur nec sapien arcu. Ut molestie gravida facilisis. Proin pharetra varius consectetur. Nullam adipiscing felis a elit pulvinar dignissim. Nam tempor adipiscing elit non varius. </p>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id mauris eu nulla feugiat sagittis nec vel nulla. Suspendisse lobortis, augue at ornare tincidunt, dui erat ultrices eros, sed convallis sapien orci convallis felis. Curabitur nec sapien arcu. Ut molestie gravida facilisis. Proin pharetra varius consectetur. Nullam adipiscing felis a elit pulvinar dignissim. Nam tempor adipiscing elit non varius. </p><br>
		<p> LAST CONTENTS </p><br>
</main>
<footer>
<div id="sns" class="flL">sns</div>
<div id="submit">submit </div>
<div id="guide" class="flR">guide</div>
</footer>
</body>
</html>


Because title is dynamic, I have 3 pages below.

Since the text “title” is between the “menu” and “nick”, the page http://dot.kr/joon/025 is okay.

The page http://dot.kr/joon/025/menu/ is still okay.

However, the page http://dot.kr/joon/025/contents/ is not okay because “title” is below the “menu” and “nick” instead of being located between “menu” and “nick”.

I like to put “title” is always located between “menu” and “nick”.
When the text “title” is very long like http://dot.kr/joon/025/contents/, the last part of the title should be dropped between “menu” and “nick”.

Hi,

Haven’t we been here before ?

If you want the middle section to stay in the middle then use this:


#title{display:block;overflow:hidden}

It’s okay because “title” is center-aligned at http://dot.kr/joon/027/.
Since “title” is dynamic, it could have very long text and some part of title will be dropped.
When some part of “title” is dropped, the dropped part is still center-aligned at http://dot.kr/joon/027/contents/.
I like to make the dropped part left-aligned.
So I added the code “text-align:left” at #title .
The result is good because the dropped part of “title” is left-aligned at http://dot.kr/joon/028/contents/.
However I met another problem.
When “title” is very short, it is unexpectedly left-aligned at http://dot.kr/joon/028/.

I like to make it like the following.
When “title” is short, it is center-aligned.
When “title” is very very long, the last dropped part of title is left-aligned.

Please do not create a new thread for an issue that is already open.

Make the following changes to your code and add a div inside #title (Add the BLUE, Delete the RED):


#title {
    display:block;
    overflow:hidden;
    word-break:break-all;
    color:white;
    [color=red][s]margin:auto;[/s][/color]
    [color=red][s]text-align:left;[/s][/color]
}
[color=blue]#title > div {
    display:table;
    margin:0 auto;
}[/color]


    <div id="title">[color=blue]<div>[/color]long long long long very very very very long long long long very very very very title[color=blue]</div>[/color]</div>

You also need to add an <html> tag at the top of your page.

Threads merged.

Only start a new topic when you move on to a new subject and where previous posts have no relevance.