If I want to make one line that has some text that is justified to the right and some that is justified to the left, and they have different attributes, do I make a table?<!--content--><div style="float: left; text-align: left; width: 50%">Hello</div><br />
<div style="float: right; text-align: right; width: 50%">World</div><!--content-->Try this out:<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<br />
<br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><br />
<head><br />
<title>Title Here</title><br />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><br />
<style type="text/css" media="screen"><br />
<!--<br />
.left {<br />
float: left;<br />
width: 50%;<br />
}<br />
<br />
.right {<br />
margin-left: 50%;<br />
text-align: right;<br />
}<br />
--><br />
</style><br />
</head><br />
<body><br />
<p class="left">This text is left aligned.</p><br />
<p class="right">This text is right aligned.</p><br />
</body><br />
</html><br />
<br />
<br />
The reason I use margin-left: 50% for one of the lines of text is the way browsers calculate the widths of elements.<br />
<br />
50% + 50% does not equal 100 % of the pixels<br />
<br />
This is for any block-level element: a, li, div, p, h1 - h6, ul, ol, etc... except for tags related to creating tables<br />
<br />
Hypothetical viewable browser window area: 501 pixels.<br />
<br />
50% of 501 is 250.5 - The problem is that most browsers will round that number up to 251 pixels.<br />
<br />
Two elements of 50% width side-by-side (at 251 pixels of width per element) makes the two elements together 502 pixels wide. That's 2 pixels too wide to fit in a 500 pixel wide area.<br />
<br />
This happens because the two elements set to 50% width are not related to each other logically and therefore the width of each element is taken in respect to whatever contains it, and not by what other elements are around them.<br />
<br />
The reason that two table cells at 50% equals 100% of the pixels<br />
<br />
Table cells are logically related. The table algorithm knows that the widths of the cells in each row MUST equal 100% of the width allotted to them. So:<br />
<br />
<table width="500"><br />
<tr><br />
<td id="a" width="50%"></td><br />
<td id="b" width="50%"></td><br />
</tr><br />
</table><br />
<br />
Browers know that there are two cells in this row, and that their widths are 50%, or one half the width of the table. It will fudge the widths of the cells to fit the space allotted to them.<br />
<br />
Why use margin-left: 50%<br />
<br />
I'll be referencing the CSS and markup I wrote at the beginning of this post.<br />
<br />
.left { width: 50%; } - The content area of this element is 50% of the width available.<br />
<br />
.right { margin-left: 50%; } - The content area of this element is not 50% of the available width. That 50% is moved to the left margin. The content area of the element is anything left over after the left margin has been calculated.<br />
<br />
Back to a hypothetical screen width of 501 pixels.<br />
<br />
<p class="left"></p> - This is 251 pixels wide.<br />
<br />
<p class="right"></p> - The left margin is 50% of 501 which equals 250.5. Browsers will round this number up to 251. That's exactly how much space is needed to float the <p class="left"> element to the left of <p class="right">.<br />
<br />
There is no width set for <p class="right">. The content area of this element is 501 pixels, minus that 50% left margin. This makes the content area of <p class="right"> 249 pixels.<br />
<br />
251 pixels + 249 pixels equals 500.<br />
<br />
The total width available to both paragraphs is 500 pixels, therefore the two paragraphs are floated next to each other perfectly, no matter what browser window size the user has.<!--content-->I hate to mention it but an a tag is not a block level element unless you make it a block level element:<br />
<br />
a{display:block;}<br />
<br />
I thought I'd just point that out.<!--content-->Thanks alot all. I got it to work.<!--content-->
<div style="float: right; text-align: right; width: 50%">World</div><!--content-->Try this out:<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<br />
<br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><br />
<head><br />
<title>Title Here</title><br />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><br />
<style type="text/css" media="screen"><br />
<!--<br />
.left {<br />
float: left;<br />
width: 50%;<br />
}<br />
<br />
.right {<br />
margin-left: 50%;<br />
text-align: right;<br />
}<br />
--><br />
</style><br />
</head><br />
<body><br />
<p class="left">This text is left aligned.</p><br />
<p class="right">This text is right aligned.</p><br />
</body><br />
</html><br />
<br />
<br />
The reason I use margin-left: 50% for one of the lines of text is the way browsers calculate the widths of elements.<br />
<br />
50% + 50% does not equal 100 % of the pixels<br />
<br />
This is for any block-level element: a, li, div, p, h1 - h6, ul, ol, etc... except for tags related to creating tables<br />
<br />
Hypothetical viewable browser window area: 501 pixels.<br />
<br />
50% of 501 is 250.5 - The problem is that most browsers will round that number up to 251 pixels.<br />
<br />
Two elements of 50% width side-by-side (at 251 pixels of width per element) makes the two elements together 502 pixels wide. That's 2 pixels too wide to fit in a 500 pixel wide area.<br />
<br />
This happens because the two elements set to 50% width are not related to each other logically and therefore the width of each element is taken in respect to whatever contains it, and not by what other elements are around them.<br />
<br />
The reason that two table cells at 50% equals 100% of the pixels<br />
<br />
Table cells are logically related. The table algorithm knows that the widths of the cells in each row MUST equal 100% of the width allotted to them. So:<br />
<br />
<table width="500"><br />
<tr><br />
<td id="a" width="50%"></td><br />
<td id="b" width="50%"></td><br />
</tr><br />
</table><br />
<br />
Browers know that there are two cells in this row, and that their widths are 50%, or one half the width of the table. It will fudge the widths of the cells to fit the space allotted to them.<br />
<br />
Why use margin-left: 50%<br />
<br />
I'll be referencing the CSS and markup I wrote at the beginning of this post.<br />
<br />
.left { width: 50%; } - The content area of this element is 50% of the width available.<br />
<br />
.right { margin-left: 50%; } - The content area of this element is not 50% of the available width. That 50% is moved to the left margin. The content area of the element is anything left over after the left margin has been calculated.<br />
<br />
Back to a hypothetical screen width of 501 pixels.<br />
<br />
<p class="left"></p> - This is 251 pixels wide.<br />
<br />
<p class="right"></p> - The left margin is 50% of 501 which equals 250.5. Browsers will round this number up to 251. That's exactly how much space is needed to float the <p class="left"> element to the left of <p class="right">.<br />
<br />
There is no width set for <p class="right">. The content area of this element is 501 pixels, minus that 50% left margin. This makes the content area of <p class="right"> 249 pixels.<br />
<br />
251 pixels + 249 pixels equals 500.<br />
<br />
The total width available to both paragraphs is 500 pixels, therefore the two paragraphs are floated next to each other perfectly, no matter what browser window size the user has.<!--content-->I hate to mention it but an a tag is not a block level element unless you make it a block level element:<br />
<br />
a{display:block;}<br />
<br />
I thought I'd just point that out.<!--content-->Thanks alot all. I got it to work.<!--content-->