HTML Aligning Text
Posted
by nevillejones
on Stack Overflow
See other posts from Stack Overflow
or by nevillejones
Published on 2010-06-10T18:10:30Z
Indexed on
2010/06/10
18:12 UTC
Read the original article
Hit count: 220
I want to display text on a page like in the following way:
My Text: Text Here
My Text: More Text Here.........................................................
Text from line above continued here.
I have the following markup just to test:
<html>
<head>
<style type="text/css">
body {
font-family: arial;
}
form div {
padding: 3px;
}
form .label {
float: left;
text-align: right;
width: 150px;
margin-right: 8px;
}
</style>
</head>
<body>
<form>
<div class="label">My Text:</div>
<div>Aenean tellus diam, pharetra sed posuere sed, ullamcorper eget enim. Suspendisse quis posuere nisi. Integer sodales neque id erat luctus suscipit. Curabitur in nisi arcu. Curabitur suscipit tellus non lectus blandit non mollis risus aliquet. Proin et felis nulla. Integer ut felis nibh, eu condimentum elit. Sed tincidunt fermentum lorem, convallis ornare ipsum mattis sed. Vestibulum vel quam sed velit condimentum volutpat eu sed enim. Duis tincidunt, turpis id suscipit molestie, erat tortor tincidunt augue, eu venenatis erat neque nec nisi. Nunc malesuada bibendum elit eu bibendum.</div>
<div class="label">My Text 2:</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla suscipit arcu ut risus dapibus tincidunt et ut orci. Vestibulum vitae urna in ligula fringilla facilisis aliquet vel nisl. Quisque placerat risus eget arcu fermentum at consectetur arcu lobortis. In hac habitasse platea dictumst. In in libero non justo pellentesque cursus quis non nisi. Donec sit amet pharetra ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla enim enim, fringilla vitae sodales id, ultrices non lacus. Etiam id augue ut dui convallis hendrerit. Vivamus urna justo, dignissim in suscipit eu, facilisis a libero. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. .</div>
</form>
</body>
When this is rendered about half the text is displayed underneath the corresponding "label" class div. I would like all the text to be appear to the right of the "label" div.
© Stack Overflow or respective owner
