-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdeleted-how-to-mix-unrelated-content-with-the-main-text-article-while-preserving-semantic-purity.html
465 lines (316 loc) · 31.6 KB
/
deleted-how-to-mix-unrelated-content-with-the-main-text-article-while-preserving-semantic-purity.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
<html itemscope="" itemtype="http://schema.org/QAPage" class="html__responsive"><head>
<title>css - How to mix unrelated content (e.g., ads, "see more") with the main text/article while preserving the semantic purity of an HTML page? - Stack Overflow</title>
<link rel="stylesheet" type="text/css" href="https://cdn.sstatic.net/Shared/stacks.css?v=25a7b20b759e">
<link rel="stylesheet" type="text/css" href="https://cdn.sstatic.net/Sites/stackoverflow/primary.css?v=30410593dcda">
</head>
<body class="question-page unified-theme theme-dark">
<div id="content" class="snippet-hidden">
<div itemprop="mainEntity" itemscope="" itemtype="http://schema.org/Question">
<link itemprop="image" href="https://cdn.sstatic.net/Sites/stackoverflow/Img/apple-touch-icon.png?v=c78bd457575a">
<div class="inner-content clearfix">
<div id="question-header" class="grid sm:fd-column">
<h1 itemprop="name" class="grid--cell fs-headline1 fl1 ow-break-word mb8"><a href="/questions/61584157/how-to-mix-unrelated-content-e-g-ads-see-more-with-the-main-text-article" class="question-hyperlink">How to mix unrelated content (e.g., ads, “see more”) with the main text/article while preserving the semantic purity of an HTML page? [closed]</a></h1>
</div>
<div class="grid fw-wrap pb8 mb16 bb bc-black-2">
<div class="grid--cell ws-nowrap mr16 mb8" title="2020-05-04 02:14:01Z">
<span class="fc-light mr2">Asked</span>
<time itemprop="dateCreated" datetime="2020-05-04T02:14:01">11 days ago</time>
</div>
<div class="grid--cell ws-nowrap mr16 mb8">
<span class="fc-light mr2">Active</span>
<a href="?lastactivity" class="s-link s-link__inherit" title="2020-05-05 17:11:18Z">9 days ago</a>
</div>
<div class="grid--cell ws-nowrap mb8" title="Viewed 43 times">
<span class="fc-light mr2">Viewed</span>
43 times
</div>
</div>
<div id="mainbar" role="main" aria-label="question and answers">
<div class="" data-questionid="61584157" id="question">
<input type="hidden" id="61584157-only-allow-inform-moderator-flagging" value="true">
<div class="post-layout">
<div class="votecell post-layout--left">
<div class="js-voting-container grid fd-column ai-stretch gs4 fc-black-200" data-post-id="61584157">
<button class="js-vote-up-btn grid--cell s-btn s-btn__unset c-pointer" title="This question shows research effort; it is useful and clear" aria-pressed="false" aria-label="up vote" data-selected-classes="fc-theme-primary"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button>
<div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center c-pointer" itemprop="upvoteCount" data-value="-3" title="View upvote and downvote totals" tabindex="0">-3</div>
<button class="js-vote-down-btn grid--cell s-btn s-btn__unset c-pointer" title="This question does not show any research effort; it is unclear or not useful" aria-pressed="false" aria-label="down vote" data-selected-classes="fc-theme-primary"><svg aria-hidden="true" class="m0 svg-icon iconArrowDownLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 10h32L18 26 2 10z"></path></svg></button>
<button class="js-bookmark-btn s-btn s-btn__unset c-pointer py4 js-gps-track" aria-pressed="false" aria-label="bookmark" data-selected-classes="fc-yellow-600" data-gps-track="post.click({ item: 1, priv: 15, post_type: 1 })" title="Bookmark this question.">
<svg aria-hidden="true" class="svg-icon iconBookmark" width="18" height="18" viewBox="0 0 18 18"><path d="M6 1a2 2 0 0 0-2 2v14l5-4 5 4V3a2 2 0 0 0-2-2H6zm3.9 3.83h2.9l-2.35 1.7.9 2.77L9 7.59l-2.35 1.7.9-2.76-2.35-1.7h2.9L9 2.06l.9 2.77z"></path></svg>
<div class="js-bookmark-count mt4 d-none" data-value=""></div>
</button>
<a class="js-post-issue grid--cell s-btn s-btn__unset c-pointer py8 mx-auto" href="/posts/61584157/timeline" data-shortcut="T" title="Timeline"><svg aria-hidden="true" class="mln2 mr0 svg-icon iconHistory" width="19" height="18" viewBox="0 0 19 18"><path d="M3 9a8 8 0 1 1 3.73 6.77L8.2 14.3A6 6 0 1 0 5 9l3.01-.01-4 4-4-4h3L3 9zm7-4h1.01L11 9.36l3.22 2.1-.6.93L10 10V5z"></path></svg></a>
</div>
</div>
<div class="postcell post-layout--right">
<div class="post-text" itemprop="text">
<p>Most of the news articles I've seen are peppered with HTML elements containing unrelated content that </p>
<ul>
<li>weren't written by the author,</li>
<li>don't semantically belong to the story,</li>
<li>are only there for marketing or other purposes, and </li>
<li>they can mess up accessibility (e.g., screen reader navigation).</li>
</ul>
<p>Thus, these should be probably placed at a different place in the HTML markup.</p>
<p>How would it be possible to <strong>visually</strong> mix these unrelated content with the article text while still keeping the semantic integrity of the HTML markup?</p>
<p>For example, have a <code><div></code> container somewhere in the HTML markup containing the ads (or anchors to generate the ads dynamically), and visually intersperse them with the <code><p></code>'s of the <code><article></code>. (That is, don't reorganize the DOM but render elements in other places that would achieve the same effect, as if those elements were included there in the DOM.)</p>
<pre class="lang-html prettyprint prettyprinted" style=""><code><span class="dec"><!DOCTYPE html></span><span class="pln">
</span><span class="tag"><html></span><span class="pln">
</span><span class="tag"><head></span><span class="pln">
</span><span class="tag"><meta</span><span class="pln"> </span><span class="atn">charset</span><span class="pun">=</span><span class="atv">"utf-8"</span><span class="tag">></span><span class="pln">
</span><span class="tag"><title></span><span class="pln">Article title</span><span class="tag"></title></span><span class="pln">
</span><span class="tag"></head></span><span class="pln">
</span><span class="tag"><body></span><span class="pln">
</span><span class="tag"><main></span><span class="pln">
</span><span class="tag"><article></span><span class="pln">
</span><span class="tag"><h1></span><span class="pln">Article title</span><span class="tag"></h2></span><span class="pln">
</span><span class="tag"><p></span><span class="pln">...</span><span class="tag"></p></span><span class="pln">
</span><span class="tag"><h2></span><span class="pln">Subsection</span><span class="tag"></h3></span><span class="pln">
</span><span class="tag"><p></span><span class="pln">...</span><span class="tag"></p></span><span class="pln">
</span><span class="tag"><p></span><span class="pln">...</span><span class="tag"></p></span><span class="pln">
</span><span class="tag"><h2></span><span class="pln">Another subsection</span><span class="tag"></h3></span><span class="pln">
</span><span class="tag"><p></span><span class="pln">...</span><span class="tag"></p></span><span class="pln">
</span><span class="tag"></article></span><span class="pln">
</span><span class="tag"><aside></span><span class="pln">
</span><span class="tag"><h2></span><span class="pln">Related articles</span><span class="tag"></h2></span><span class="pln">
</span><span class="tag"><ul></span><span class="pln">
</span><span class="tag"><li><a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">></span><span class="pln">It never stops raining</span><span class="tag"></a></li></span><span class="pln">
</span><span class="tag"><li><a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">></span><span class="pln">Oh well...</span><span class="tag"></a></li></span><span class="pln">
</span><span class="tag"></ul></span><span class="pln">
</span><span class="tag"></aside></span><span class="pln">
</span><span class="tag"><div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"ad-container"</span><span class="tag">></span><span class="pln">
</span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"ad"</span><span class="tag">></span><span class="pln">Tis an ad</span><span class="tag"></div></span><span class="pln">
</span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"ad"</span><span class="tag">></span><span class="pln">Yet another ad</span><span class="tag"></div></span><span class="pln">
</span><span class="tag"></div></span><span class="pln">
</span><span class="tag"></main></span></code></pre>
<p>but render it so:</p>
<blockquote>
<h1>Article title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p>
<blockquote>
<h2>Related articles</h2>
<ul>
<li>It never stops raining</li>
<li>Oh well...</li>
</ul>
</blockquote>
<h2>Subsection</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p>
<blockquote>
<p>AD BLOCK: Tis an ad.</p>
</blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p>
<h2>Another subsection</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p>
<blockquote>
<p>AD BLOCK: Yet another ad.</p>
</blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p>
</blockquote>
</div>
<div class="post-taglist grid gs4 gsy fd-column">
<div class="grid ps-relative d-block">
<a href="/questions/tagged/html" class="post-tag js-gps-track" title="show questions tagged 'html'" rel="tag">html</a> <a href="/questions/tagged/css" class="post-tag js-gps-track" title="show questions tagged 'css'" rel="tag">css</a>
</div>
</div>
<div class="mb0 ">
<div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4">
<div class="grid--cell mr16" style="flex: 1 1 100px;">
<div class="post-menu"><a href="/q/61584157/1498178" rel="nofollow" itemprop="url" class="js-share-link js-gps-track" title="short permalink to this question" data-gps-track="post.click({ item: 2, priv: 15, post_type: 1 })" data-controller="se-share-sheet s-popover" data-se-share-sheet-title="Share a link to this question" data-se-share-sheet-subtitle="(includes your user id)" data-se-share-sheet-post-type="question" data-se-share-sheet-social="facebook twitter devto" data-se-share-sheet-location="1" data-s-popover-placement="bottom-start" aria-controls="se-share-sheet-0" data-action=" s-popover#toggle se-share-sheet#preventNavigation s-popover:show->se-share-sheet#willShow s-popover:shown->se-share-sheet#didShow">share</a><div class="s-popover z-dropdown" style="width: unset; max-width: 28em;" id="se-share-sheet-0"><div class="s-popover--arrow"></div><div><span class="js-title fw-bold">Share a link to this question</span> <span class="js-subtitle">(includes your user id)</span></div><div class="my8"><input type="text" class="js-input s-input wmn3 sm:wmn-initial" readonly=""></div><div class="d-flex jc-space-between mbn4"><button class="js-copy-link-btn s-btn s-btn__link">Copy link</button><div class="js-social-container"></div></div></div><span class="lsep">|</span><a href="/posts/61584157/edit" class="edit-post js-gps-track" data-gps-track="post.click({ item: 6, priv: 15, post_type: 1 })" title="revise and improve this post">edit</a><span class="lsep">|</span><a href="#" class="close-question-link js-gps-track js-close-question-link" data-gps-track="post.click({ item: 10, priv: 15, post_type: 1 })" title="vote to reopen this question (when reopened, new answers can be added again)" data-questionid="61584157" data-show-interstitial="" data-isclosed="true">reopen</a><span class="lsep">|</span><a href="#" id="delete-post-61584157" title="vote to undelete this post" class="js-gps-track deleted-post" data-fancy-delete="true" data-gps-track="post.click({ item: 8, priv: 15, post_type: 1 })" data-delete-prompt="Vote to delete this post? (5 votes remaining)" data-undelete-prompt="Vote to undelete this post? (5 votes remaining)">
undelete </a><span class="lsep">|</span><a href="#" class="flag-post-link js-gps-track" data-gps-track="post.click({ item: 5, priv: 15, post_type: 1 })" title="flag this post for serious problems or moderator attention" data-postid="61584157">flag</a><span class="lsep">|</span></div>
</div>
<div class="post-signature grid--cell">
<div class="user-info ">
<div class="user-action-time">
<a href="/posts/61584157/revisions" title="show all edits to this post" class="js-gps-track" data-gps-track="post.click({ item: 4, priv: 15, post_type: 1 })">edited <span title="2020-05-05 17:11:18Z" class="relativetime">May 5 at 17:11</span></a>
</div>
<div class="user-gravatar32">
</div>
<div class="user-details" itemprop="author" itemscope="" itemtype="http://schema.org/Person">
<span class="d-none" itemprop="name">toraritte</span>
<div class="-flair">
</div>
</div>
</div> </div>
<div class="post-signature grid--cell">
<div class="user-info user-hover">
<div class="user-action-time">
asked <span title="2020-05-04 02:14:01Z" class="relativetime">May 4 at 2:14</span>
</div>
<div class="user-gravatar32">
<a href="/users/1498178/toraritte"><div class="gravatar-wrapper-32"><img src="https://www.gravatar.com/avatar/2a7f53f1d991f2ab18a4957a1f192960?s=32&d=identicon&r=PG" alt="" width="32" height="32" class="bar-sm"></div></a>
</div>
<div class="user-details" itemprop="author" itemscope="" itemtype="http://schema.org/Person">
<a href="/users/1498178/toraritte">toraritte</a><span class="d-none" itemprop="name">toraritte</span>
<div class="-flair">
<span class="reputation-score" title="reputation score " dir="ltr">2,954</span><span title="1 gold badge" aria-hidden="true"><span class="badge1"></span><span class="badgecount">1</span></span><span class="v-visible-sr">1 gold badge</span><span title="21 silver badges" aria-hidden="true"><span class="badge2"></span><span class="badgecount">21</span></span><span class="v-visible-sr">21 silver badges</span><span title="33 bronze badges" aria-hidden="true"><span class="badge3"></span><span class="badgecount">33</span></span><span class="v-visible-sr">33 bronze badges</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="post-layout--right">
<div id="comments-61584157" class="comments js-comments-container bt bc-black-2 mt12 dno" data-post-id="61584157" data-min-length="15">
<ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="false" data-comments-unavailable="true" data-addlink-disabled="true">
</ul>
</div>
<div id="comments-link-61584157">
<span class="disabled-link">comments disabled on deleted / locked posts / reviews</span>
<span class="js-link-separator dno"> | </span>
<a class="js-show-link comments-link dno" title="expand to show all comments on this post" href="#" onclick="" role="button"></a>
</div>
</div>
</div>
</div>
<div id="answers">
<a name="tab-top"></a>
<div id="answers-header">
<div class="answers-subheader grid ai-center mb8">
<div class="grid--cell fl1">
<h2 class="mb0" data-answercount="1">
1 Answer
<span style="display:none;" itemprop="answerCount">1</span>
</h2>
</div>
<div class="grid--cell">
<div class=" grid s-btn-group js-filter-btn">
<a class="grid--cell s-btn s-btn__muted s-btn__outlined" href="/questions/61584157/how-to-mix-unrelated-content-e-g-ads-see-more-with-the-main-text-article?answertab=active#tab-top" data-nav-xhref="" title="Answers with the latest activity first" data-value="active" data-shortcut="A">
Active</a>
<a class="grid--cell s-btn s-btn__muted s-btn__outlined" href="/questions/61584157/how-to-mix-unrelated-content-e-g-ads-see-more-with-the-main-text-article?answertab=oldest#tab-top" data-nav-xhref="" title="Answers in the order they were provided" data-value="oldest" data-shortcut="O">
Oldest</a>
<a class="youarehere is-selected grid--cell s-btn s-btn__muted s-btn__outlined" href="/questions/61584157/how-to-mix-unrelated-content-e-g-ads-see-more-with-the-main-text-article?answertab=votes#tab-top" data-nav-xhref="" title="Answers with the highest score first" data-value="votes" data-shortcut="V">
Votes</a>
</div>
</div>
</div>
</div>
<div class="s-pagination pager-answers">
</div>
<a name="61595052"></a>
<div id="answer-61595052" class="" data-answerid="61595052" itemprop="suggestedAnswer" itemscope="" itemtype="http://schema.org/Answer">
<input type="hidden" id="61595052-only-allow-inform-moderator-flagging" value="true">
<div class="post-layout">
<div class="votecell post-layout--left">
<div class="js-voting-container grid fd-column ai-stretch gs4 fc-black-200" data-post-id="61595052">
<button class="js-vote-up-btn grid--cell s-btn s-btn__unset c-pointer" title="This answer is useful" aria-pressed="false" aria-label="up vote" data-selected-classes="fc-theme-primary"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button>
<div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center c-pointer" itemprop="upvoteCount" data-value="0" title="View upvote and downvote totals" tabindex="0">0</div>
<button class="js-vote-down-btn grid--cell s-btn s-btn__unset c-pointer" title="This answer is not useful" aria-pressed="false" aria-label="down vote" data-selected-classes="fc-theme-primary"><svg aria-hidden="true" class="m0 svg-icon iconArrowDownLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 10h32L18 26 2 10z"></path></svg></button>
<button class="js-accept-answer-btn grid--cell s-btn s-btn__unset c-pointer" aria-pressed="false" data-selected-classes="fc-green-500" data-title-accept="Click to accept this answer because it solved your problem or was the most helpful in finding your solution (click again to undo)" data-title-unaccept="Click to undo acceptance of this answer; you accepted this answer " aria-label="accept answer" title="Click to accept this answer because it solved your problem or was the most helpful in finding your solution (click again to undo)">
<svg aria-hidden="true" class="m0 svg-icon iconCheckmarkLg" width="36" height="36" viewBox="0 0 36 36"><path d="M6 14l8 8L30 6v8L14 30l-8-8v-8z"></path></svg>
</button>
<a class="js-post-issue grid--cell s-btn s-btn__unset c-pointer py8 mx-auto" href="/posts/61595052/timeline" data-shortcut="T" title="Timeline"><svg aria-hidden="true" class="mln2 mr0 svg-icon iconHistory" width="19" height="18" viewBox="0 0 19 18"><path d="M3 9a8 8 0 1 1 3.73 6.77L8.2 14.3A6 6 0 1 0 5 9l3.01-.01-4 4-4-4h3L3 9zm7-4h1.01L11 9.36l3.22 2.1-.6.93L10 10V5z"></path></svg></a>
</div>
</div>
<div class="answercell post-layout--right">
<div class="post-text" itemprop="text">
<p><s>No, it's not possible</s>. Maybe possible? (See <strong>Update</strong>.)</p>
<p>Elements can't be moved around in the DOM with CSS (see answer to <a href="https://stackoverflow.com/questions/32040756/is-it-possible-to-place-a-div-between-two-paragraphs-using-css-only">this question</a>), but that was never the point: the HTML markup is static int this scenario (and semantically sound), and would like to render elements in a way that they appear in a different flow.</p>
<p>Some resources:</p>
<ul>
<li><a href="https://webdesign.tutsplus.com/tutorials/a-few-different-css-methods-for-column-ordering--cms-27079" rel="nofollow noreferrer">A Few Different CSS Methods for Changing Display Order</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items" rel="nofollow noreferrer">MDN - Ordering Flex Items</a></li>
<li><a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/" rel="nofollow noreferrer">CSS Tricks - A Complete Guide to Flexbox</a></li>
</ul>
<hr>
<p><strong>Update</strong>: The answer's to the linked question are probably missing the point that it was about rendering elements in different places and not move it around in the DOM.</p>
</div>
<div class="grid mb0 fw-wrap ai-start jc-end gs8 gsy">
<time itemprop="dateCreated" datetime="2020-05-04T14:49:15"></time>
<div class="grid--cell mr16" style="flex: 1 1 100px;">
<div class="post-menu"><a href="/a/61595052/1498178" rel="nofollow" itemprop="url" class="js-share-link js-gps-track" title="short permalink to this answer" data-gps-track="post.click({ item: 2, priv: 15, post_type: 2 })" data-controller="se-share-sheet s-popover" data-se-share-sheet-title="Share a link to this answer" data-se-share-sheet-subtitle="(includes your user id)" data-se-share-sheet-post-type="answer" data-se-share-sheet-social="facebook twitter devto" data-se-share-sheet-location="2" data-s-popover-placement="bottom-start" aria-controls="se-share-sheet-1" data-action=" s-popover#toggle se-share-sheet#preventNavigation s-popover:show->se-share-sheet#willShow s-popover:shown->se-share-sheet#didShow">share</a><div class="s-popover z-dropdown" style="width: unset; max-width: 28em;" id="se-share-sheet-1"><div class="s-popover--arrow"></div><div><span class="js-title fw-bold">Share a link to this answer</span> <span class="js-subtitle">(includes your user id)</span></div><div class="my8"><input type="text" class="js-input s-input wmn3 sm:wmn-initial" readonly=""></div><div class="d-flex jc-space-between mbn4"><button class="js-copy-link-btn s-btn s-btn__link">Copy link</button><div class="js-social-container"></div></div></div><span class="lsep">|</span><a href="/posts/61595052/edit" class="edit-post js-gps-track" data-gps-track="post.click({ item: 6, priv: 15, post_type: 2 })" title="revise and improve this post">edit</a><span class="lsep">|</span><span class="lsep">|</span><a href="#" id="delete-post-61595052" title="vote to undelete this post" class="js-gps-track deleted-post" data-gps-track="post.click({ item: 8, priv: 15, post_type: 2 })" data-delete-prompt="Delete this post?" data-undelete-prompt="Undelete this post?">
undelete </a><span class="lsep">|</span><a href="#" class="flag-post-link js-gps-track" data-gps-track="post.click({ item: 5, priv: 15, post_type: 2 })" title="flag this post for serious problems or moderator attention" data-postid="61595052">flag</a><span class="lsep">|</span></div>
</div>
<div class="post-signature grid--cell fl0">
<div class="user-info ">
<div class="user-action-time">
<a href="/posts/61595052/revisions" title="show all edits to this post" class="js-gps-track" data-gps-track="post.click({ item: 4, priv: 15, post_type: 2 })">edited <span title="2020-05-04 16:21:01Z" class="relativetime">May 4 at 16:21</span></a>
</div>
<div class="user-gravatar32">
</div>
<div class="user-details">
<div class="-flair">
</div>
</div>
</div> </div>
<div class="post-signature owner grid--cell fl0">
<div class="user-info">
<div class="user-details">
<span class="community-wiki" title="This post is community owned as of May 4 at 16:21. Votes do not generate reputation, and it can be edited by users with 100 rep">
community wiki
</span>
</div><br>
<div class="user-details">
<a id="history-61595052" href="/posts/61595052/revisions" title="show revision history for this post">
3 revs<br></a><a href="/users/1498178">toraritte</a>
</div>
</div>
</div>
</div>
</div>
<div class="post-layout--right">
<div id="comments-61595052" class="comments js-comments-container bt bc-black-2 mt12 " data-post-id="61595052" data-min-length="15">
<ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="false" data-comments-unavailable="true" data-addlink-disabled="true">
<li id="comment-108955125" class="comment js-comment " data-comment-id="108955125">
<div class="js-comment-actions comment-actions">
<div class="comment-score js-comment-edit-hide">
<span title="number of 'useful comment' votes received" class="cool">1</span>
</div>
<div class="comment-voting mtn2 js-comment-edit-hide">
<div class="comment-up-on ba bc-transparent" aria-label="You've voted for this as a useful comment" title="You've voted for this as a useful comment">
<svg aria-hidden="true" class="svg-icon iconArrowUp" width="18" height="18" viewBox="0 0 18 18"><path d="M1 13h16L9 5l-8 8z"></path></svg>
</div>
</div>
<div class="comment-flagging js-comment-edit-hide">
<button class="js-comment-flag s-btn s-btn__unset bg-transparent c-pointer fc-black-100 h:fc-red-500" aria-label="Flag Comment" aria-pressed="false" title="Flag this comment for serious problems or moderator attention">
<svg aria-hidden="true" class="svg-icon iconFlag" width="18" height="18" viewBox="0 0 18 18"><path d="M3 2v14h2v-6h3.6l.4 1h6V3H9.5L9 2H3z"></path></svg>
</button>
</div>
</div>
<div class="comment-text js-comment-text-and-form">
<div class="comment-body js-comment-edit-hide">
<span class="comment-copy">Elements can be moved around with CSS only, <i>visually</i>. They can't be moved <i>within the DOM</i>. In other words, an ad could be placed at the end of the DOM, but be shown underneath the header of the article using CSS only. See <a href="http://www.csszengarden.com/" rel="nofollow noreferrer">CSS Zen Garden</a> for examples of using the same HTML to achieve very different visual outcomes using CSS.</span>
– <a href="/users/215552/heretic-monkey" title="8,098 reputation" class="comment-user">Heretic Monkey</a>
<span class="comment-date" dir="ltr"><a class="comment-link" href="#comment108955125_61595052"><span title="2020-05-04 14:59:08Z , License: CC BY-SA 4.0" class="relativetime-clean">May 4 at 14:59</span></a></span>
</div>
</div>
</li>
<li id="comment-108957162" class="comment js-comment " data-comment-id="108957162">
<div class="js-comment-actions comment-actions">
<div class="comment-score js-comment-edit-hide">
</div>
</div>
<div class="comment-text js-comment-text-and-form">
<div class="comment-body js-comment-edit-hide">
<span class="comment-copy">Yes, I meant visually, thanks for the comment and for link! I presumed that it is possible, but CSS beginner here. Updated the question, and please feel free to amend it too, if it could be clarified further.</span>
– <a href="/users/1498178/toraritte" title="2,954 reputation" class="comment-user owner">toraritte</a>
<span class="comment-date" dir="ltr"><a class="comment-link" href="#comment108957162_61595052"><span title="2020-05-04 15:54:26Z , License: CC BY-SA 4.0" class="relativetime-clean">May 4 at 15:54</span></a></span>
<button class="js-comment-delete s-btn s-btn__link fc-red-600" title="delete this comment" aria-label="Delete"><span class="hover-only-label">Delete</span></button>
</div>
</div>
</li>
</ul>
</div>
<div id="comments-link-61595052">
<span class="disabled-link">comments disabled on deleted / locked posts / reviews</span>
<span class="js-link-separator dno"> | </span>
<a class="js-show-link comments-link dno" title="expand to show all comments on this post" href="#" onclick="" role="button"></a>
</div>
</div>
</div>
</div>
<div class="s-pagination pager-answers">
</div>
<script>
StackExchange.using("inlineEditing", function () {
StackExchange.inlineEditing.init();
});
</script>
</div>
</div>
</div>
<script>StackExchange.ready(function(){$.get('/posts/61584157/ivc/667c');});</script>
<noscript><div><img src="/posts/61584157/ivc/667c" class="dno" alt="" width="0" height="0"></div></noscript><div style="display:none" id="prettify-lang">default</div></div>
</div>
</body></html>