How would I get the here and and here to be on the right, on the same lines as the lorem ipsums? See the following:
Lorem Ipsum etc........here
blah.......................
blah blah..................
blah.......................
lorem ipsums.......and here
<div style="position: relative; width: 250px;">
<div style="position: absolute; top: 0; right: 0; width: 100px; text-align:right;">
here
</div>
<div style="position: absolute; bottom: 0; right: 0; width: 100px; text-align:right;">
and here
</div>
Lorem Ipsum etc <br />
blah <br />
blah blah <br />
blah <br />
lorem ipsums
</div>Gets you pretty close, although you may need to tweak the "top" and "bottom" values.
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.
<html>
<body>
<div>
<span style="float:right">here</span>Lorem Ipsum etc<br/>
blah<br/>
blah blah<br/>
blah<br/>
<span style="float:right">and here</span>lorem ipsums<br/>
</div>
</body>
</html>
Note that this works for any line, not just the top and bottom corners.
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.
print("<div id="lipsum">");
print("<div id="here">");
print(" here");
print("</div>");
print("<div id="andhere">");
print("and here");
print("</div>");
print("blah");
print("</div>");
Here's the CSS for above.
#lipsum {position:absolute;top:0;left:0;} /* example */
#here {position:absolute;top:0;right:0;}
#andhere {position:absolute;bottom:0;right:0;}
Again, the above only works (reliably) if #lipsum is positioned via absolute.
If not, you'll need to use the float property.
#here, #andhere {float:right;}
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.
<style>
#content { width: 300px; height: 300px; border: 1px solid black; position: relative; }
.topright { position: absolute; top: 5px; right: 5px; text-align: right; }
.bottomright { position: absolute; bottom: 5px; right: 5px; text-align: right; }
</style>
<div id="content">
<div class="topright">here</div>
<div class="bottomright">and here</div>
Lorem ipsum etc................
</div>
Or even better, use HTML elements that fit your need. It's cleaner, and produces leaner markup. Example:
<dl>
<dt>Lorem Ipsum etc <em>here</em></dt>
<dd>blah</dd>
<dd>blah blah</dd>
<dd>blah</dd>
<dt>lorem ipsums <em>and here</em></dt>
</dl>
Float the em to the right (with display: block), or set it to position: absolute with its parent as position: relative.
You need to put "here" into a <div> or <span> with style="float: right".
The first line would consist of 3 <div>s. One outer that contains two inner <div>s. The first inner <div> would have float:left which would make sure it stays to the left, the second would have float:right, which would stick it to the right.
<div style="width:500;height:50"><br>
<div style="float:left" >stuff </div><br>
<div style="float:right" >stuff </div>
... obviously the inline-styling isn't the best idea - but you get the point.
2,3, and 4 would be single <div>s.
5 would work like 1.
You may be able to use absolute positioning.
The container box should be set to position: relative.
The top-right text should be set to position: absolute; top: 0; right: 0.
The bottom-right text should be set to position: absolute; bottom: 0; right: 0.
You'll need to experiment with padding 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.
You only need to float the div element to the right and give it a margin. Make sure dont use "absolute" for this case.
#date {
margin-right:5px;
position:relative;
float:right;
}
