<p>How would I get the <code>here</code> and <code>and here</code> to be on the right, on the same lines as the lorem ipsums? See the following:</p>

<pre class="lang-none prettyprint-override"><code>Lorem Ipsum etc........here  
blah.......................  
blah blah..................  
blah.......................  
lorem ipsums.......and here
</code></pre>

[{'answer_id': 65572, 'author': 'Community', 'author_id': -1, 'author_profile': 'https://Stackoverflow.com/users/-1', 'pm_score': 0, 'selected': False, 'text': '<p>The first line would consist of 3 <code>&lt;div&gt;</code>s. One outer that contains two inner <code>&lt;div&gt;</code>s. The first inner <code>&lt;div&gt;</code> would have <code>float:left</code> which would make sure it stays to the left, the second would have <code>float:right</code>, which would stick it to the right.</p>\n\n<pre><code>&lt;div style="width:500;height:50"&gt;&lt;br&gt;\n&lt;div style="float:left" &gt;stuff &lt;/div&gt;&lt;br&gt;\n&lt;div style="float:right" &gt;stuff &lt;/div&gt;\n</code></pre>\n\n<p>... obviously the inline-styling isn\'t the best idea - but you get the point.</p>\n\n<p>2,3, and 4 would be single <code>&lt;div&gt;</code>s.</p>\n\n<p>5 would work like 1.</p>\n'}, {'answer_id': 65591, 'author': 'AdamB', 'author_id': 2176, 'author_profile': 'https://Stackoverflow.com/users/2176', 'pm_score': 0, 'selected': False, 'text': '<p>You need to put "here" into a <code>&lt;div&gt;</code> or <code>&lt;span&gt;</code> with <code>style="float: right"</code>.</p>\n'}, {'answer_id': 65594, 'author': 'ceejayoz', 'author_id': 1902010, 'author_profile': 'https://Stackoverflow.com/users/1902010', 'pm_score': 0, 'selected': False, 'text': "<p>You may be able to use absolute positioning.</p>\n\n<p>The container box should be set to <code>position: relative</code>.</p>\n\n<p>The top-right text should be set to <code>position: absolute; top: 0; right: 0</code>.\nThe bottom-right text should be set to <code>position: absolute; bottom: 0; right: 0</code>.</p>\n\n<p>You'll need to experiment with <code>padding</code> to stop the main contents of the box from running underneath the absolute positioned elements, as they exist outside the normal flow of the text contents.</p>\n"}, {'answer_id': 65600, 'author': 'Garry Shutler', 'author_id': 6369, 'author_profile': 'https://Stackoverflow.com/users/6369', 'pm_score': 6, 'selected': True, 'text': '<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">\r\n<div class="snippet-code">\r\n<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div style="position: relative; width: 250px;"&gt;\r\n  &lt;div style="position: absolute; top: 0; right: 0; width: 100px; text-align:right;"&gt;\r\n    here\r\n  &lt;/div&gt;\r\n  &lt;div style="position: absolute; bottom: 0; right: 0; width: 100px; text-align:right;"&gt;\r\n    and here\r\n  &lt;/div&gt;\r\n  Lorem Ipsum etc &lt;br /&gt;\r\n  blah &lt;br /&gt;\r\n  blah blah &lt;br /&gt;\r\n  blah &lt;br /&gt;\r\n  lorem ipsums\r\n&lt;/div&gt;</code></pre>\r\n</div>\r\n</div>\r\n</p>\n\n<p>Gets you pretty close, although you may need to tweak the "top" and "bottom" values.</p>\n'}, {'answer_id': 65612, 'author': 'Loren Segal', 'author_id': 6436, 'author_profile': 'https://Stackoverflow.com/users/6436', 'pm_score': 1, 'selected': False, 'text': '<pre><code>&lt;style&gt;\n  #content { width: 300px; height: 300px; border: 1px solid black; position: relative; }\n  .topright { position: absolute; top: 5px; right: 5px; text-align: right; }\n  .bottomright { position: absolute; bottom: 5px; right: 5px; text-align: right; }\n&lt;/style&gt;\n&lt;div id="content"&gt;\n  &lt;div class="topright"&gt;here&lt;/div&gt;\n  &lt;div class="bottomright"&gt;and here&lt;/div&gt;\n  Lorem ipsum etc................\n&lt;/div&gt;\n</code></pre>\n'}, {'answer_id': 65652, 'author': 'BrewinBombers', 'author_id': 5989, 'author_profile': 'https://Stackoverflow.com/users/5989', 'pm_score': 1, 'selected': False, 'text': '<p>If the position of the element containing the Lorum Ipsum is set absolute, you can specify the position via CSS. The "here" and "and here" elements would need to be contained in a block level element. I\'ll use markup like this.</p>\n\n<pre><code>print("&lt;div id="lipsum"&gt;");\nprint("&lt;div id="here"&gt;");\nprint("  here");\nprint("&lt;/div&gt;");\nprint("&lt;div id="andhere"&gt;");\nprint("and here");\nprint("&lt;/div&gt;");\nprint("blah");\nprint("&lt;/div&gt;");\n</code></pre>\n\n<p>Here\'s the CSS for above.</p>\n\n<pre>\n#lipsum {position:absolute;top:0;left:0;} /* example */\n#here {position:absolute;top:0;right:0;}\n#andhere {position:absolute;bottom:0;right:0;}\n</pre>\n\n<p>Again, the above only works (reliably) if #lipsum is positioned via absolute.</p>\n\n<p>If not, you\'ll need to use the float property.</p>\n\n<pre>\n#here, #andhere {float:right;}\n</pre>\n\n<p>You\'ll also need to put your markup in the appropriate place. For better presentation, your two divs will probably need some padding and margins so that the text doesn\'t all run together.</p>\n'}, {'answer_id': 66205, 'author': 'Bruce', 'author_id': 9698, 'author_profile': 'https://Stackoverflow.com/users/9698', 'pm_score': 0, 'selected': False, 'text': "<p>Or even better, use HTML elements that fit your need.  It's cleaner, and produces leaner markup.  Example:</p>\n\n<pre><code>&lt;dl&gt;\n   &lt;dt&gt;Lorem Ipsum etc &lt;em&gt;here&lt;/em&gt;&lt;/dt&gt;\n   &lt;dd&gt;blah&lt;/dd&gt;\n   &lt;dd&gt;blah blah&lt;/dd&gt;\n   &lt;dd&gt;blah&lt;/dd&gt;\n   &lt;dt&gt;lorem ipsums &lt;em&gt;and here&lt;/em&gt;&lt;/dt&gt;\n&lt;/dl&gt;\n</code></pre>\n\n<p>Float the <code>em</code> to the right (with <code>display: block</code>), or set it to <code>position: absolute</code> with its parent as <code>position: relative</code>.</p>\n"}, {'answer_id': 66210, 'author': 'phloopy', 'author_id': 8507, 'author_profile': 'https://Stackoverflow.com/users/8507', 'pm_score': 2, 'selected': False, 'text': '<p>Float right the text you want to appear on the right, and in the markup make sure that this text and its surrounding span occurs before the text that should be on the left.  If it doesn\'t occur first, you may have problems with the floated text appearing on a different line.</p>\n\n<pre><code>&lt;html&gt;\n  &lt;body&gt;\n    &lt;div&gt;\n      &lt;span style="float:right"&gt;here&lt;/span&gt;Lorem Ipsum etc&lt;br/&gt;\n      blah&lt;br/&gt;\n      blah blah&lt;br/&gt;\n      blah&lt;br/&gt;\n      &lt;span style="float:right"&gt;and here&lt;/span&gt;lorem ipsums&lt;br/&gt;\n    &lt;/div&gt;\n  &lt;/body&gt;\n&lt;/html&gt;\n</code></pre>\n\n<p>Note that this works for any line, not just the top and bottom corners.</p>\n'}, {'answer_id': 9856362, 'author': 'trillions', 'author_id': 962382, 'author_profile': 'https://Stackoverflow.com/users/962382', 'pm_score': 0, 'selected': False, 'text': '<p>You only need to float the div element to the right and give it a margin. Make sure dont use "absolute" for this case.</p>\n\n<pre class="lang-css prettyprint-override"><code>#date {\n  margin-right:5px;\n  position:relative;\n  float:right;\n}\n</code></pre>\n'}]
['https://Stackoverflow.com/questions/65536', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/9328/']